Python と Vue.js を使用してリアルタイム同期 Web アプリケーションを開発する-Python チュートリアル-php.cn

ホームページ

バックエンド開発

Python チュートリアル

Python と Vue.js を使用してリアルタイム同期 Web アプリケーションを開発する

PHPz

Jun 17, 2023 am 08:28 AM

pythonvuejsウェブリアルタイム

Web アプリケーションの人気とユーザーエクスペリエンス要件の継続的な改善により、リアルタイム同期は最新の Web アプリケーションに不可欠な機能になりました。この記事では、PythonとVue.jsを使ってリアルタイム同期Webアプリケーションを開発する方法を紹介します。

リアルタイム同期を実現するには、WebSocket、非同期プログラミング、フロントエンドフレームワークなどの最新の Web テクノロジを使用する必要があります。この記事で使用するテクノロジースタックは次のとおりです:

Python 3.6
Flask
Flask-SocketIO
gevent
Vue.js 2.0
Vuex
Socket.IO-client

これらのテクノロジーを使用して実際のアプリケーションを実装する方法を段階的に紹介します。時刻同期Webアプリケーション。

Flask アプリケーションの作成

まず、Flask アプリケーションを作成する必要があります。 Python の pip パッケージマネージャーを使用して Flask をインストールできます。

pip install flask

次に、次の内容を含む app.py ファイルを作成します。

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    socketio.run(app)

このコードは、Flask アプリケーションと、index という名前のテンプレートを作成します。 html はルートパスにレンダリングされます。このテンプレートは後で作成します。さらに、後でリアルタイム同期を実装するために使用できるように、WebSocket サーバーも起動しました。

Vue.js アプリケーションの作成

次に、Vue.js アプリケーションを作成する必要があります。 Vue の CLI ツールを使用して、Vue.js アプリケーションをすばやく作成できます。コマンドは次のとおりです:

npm install -g @vue/cli
vue create client

これにより、client という名前の Vue.js アプリケーションが作成されます。アプリケーションディレクトリに移動し、必要な依存関係をインストールします。

cd client
npm install vue-socket.io vue-socket.io-extended socket.io-client vuex --save

次に、アプリケーションの構成を行う必要があります。 src/main.js を開き、次のコードを使用します。

import Vue from 'vue'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io-extended'
import io from 'socket.io-client'
import Vuex from 'vuex'
import {store} from './store/store'

Vue.use(Vuex)

const socket = io(`${window.location.hostname}:5000`)

Vue.use(VueSocketIO, socket, {store})

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

コードでは、Flask アプリケーションで WebSocket サーバーに接続できるように、必要なモジュールをいくつかインポートし、ソケットインスタンスを作成しました。

Vuex ストアの作成

Vuex を使用してアプリケーションの状態を管理します。したがって、次のコードを使用して、ストアフォルダーを作成し、その中に store.js ファイルを作成する必要があります。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    SET_MESSAGE(state, payload) {
      state.message = payload
    }
  }
})

このストアには状態にメッセージフィールドが含まれており、フィールドの設定にはミューテーションが使用されます。。

Vue コンポーネントの作成

これで、メッセージステータスを表示し、リアルタイム同期を実現するための Vue コンポーネントを作成できます。コンポーネントのソケットの Emit メソッドと on メソッドを使用して、リアルタイム同期を実装します。 App.vue ファイルを開き、次のコードを使用します。

<template>
  <div class="container">
    <h1 id="message">{{ message }}</h1>
    <input v-model="input" type="text">
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      input: ''
    }
  },
  computed: {
    message() {
      return this.$store.state.message
    }
  },
  methods: {
    sendMessage() {
      this.$socket.emit('message', this.input)
    }
  },
  sockets: {
    message(payload) {
      this.$store.commit('SET_MESSAGE', payload)
    }
  }
}
</script>

<style>
.container {
  margin: 100px auto;
  text-align: center;
}
</style>

Vue コンポーネントでソケットの Emit メソッドと on メソッドを使用していることに注意してください。 Emit メソッドはサーバーにメッセージを送信するために使用され、on メソッドはサーバーから送信されたメッセージを受信し、指定されたコールバックを実行するために使用されます。

index.html テンプレートの作成

Flask アプリケーションのエントリポイントを提供するために、index.html テンプレートを作成する必要もあります。templates/index.html を開き、次のコードを使用します:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Socket.IO Application</title>
</head>
<body>
  <div id="app"></div>
  <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>

このテンプレートには Vue のエントリポイントが含まれており、Vue アプリケーションがコンテンツをレンダリングするための DOM 要素を提供します。テンプレートには、Flask アプリケーションによって参照され、Vue アプリケーションのスクリプトを提供する静的ファイル URL も含まれていることに注意してください。

アプリケーションの実行

アプリケーションのすべての設定が完了したので、次のコマンドを使用してアプリケーションを起動できます。

python app.py

次に、ブラウザで http://localhost:5000 を開きます。ページ上にテキストを入力できる入力ボックスが表示されます。それだけでなく、他のブラウザに切り替えて入力ボックスにテキストを入力すると、入力したばかりのテキストがここでも同期されていることがわかります!

このようにして、以下に基づいたテキストを実装することに成功しました。 Python と Vue.js のリアルタイム同期 Web アプリケーション。このモデルには、オンラインチャットアプリケーションや複数人のコラボレーションアプリケーションなど、多くのアプリケーションシナリオがあります。

以上がPython と Vue.js を使用してリアルタイム同期 Web アプリケーションを開発するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Python：ゲーム、GUIなどApr 13, 2025 am 12:14 AM

PythonはゲームとGUI開発に優れています。 1）ゲーム開発は、2Dゲームの作成に適した図面、オーディオ、その他の機能を提供し、Pygameを使用します。 2）GUI開発は、TKINTERまたはPYQTを選択できます。 TKINTERはシンプルで使いやすく、PYQTは豊富な機能を備えており、専門能力開発に適しています。

Python vs. C：比較されたアプリケーションとユースケースApr 12, 2025 am 12:01 AM

Pythonは、データサイエンス、Web開発、自動化タスクに適していますが、Cはシステムプログラミング、ゲーム開発、組み込みシステムに適しています。 Pythonは、そのシンプルさと強力なエコシステムで知られていますが、Cは高性能および基礎となる制御機能で知られています。

2時間のPython計画：現実的なアプローチApr 11, 2025 am 12:04 AM

2時間以内にPythonの基本的なプログラミングの概念とスキルを学ぶことができます。 1.変数とデータ型、2。マスターコントロールフロー（条件付きステートメントとループ）、3。機能の定義と使用を理解する4。

Python：主要なアプリケーションの調査Apr 10, 2025 am 09:41 AM

Pythonは、Web開発、データサイエンス、機械学習、自動化、スクリプトの分野で広く使用されています。 1）Web開発では、DjangoおよびFlask Frameworksが開発プロセスを簡素化します。 2）データサイエンスと機械学習の分野では、Numpy、Pandas、Scikit-Learn、Tensorflowライブラリが強力なサポートを提供します。 3）自動化とスクリプトの観点から、Pythonは自動テストやシステム管理などのタスクに適しています。

2時間でどのくらいのPythonを学ぶことができますか？Apr 09, 2025 pm 04:33 PM

2時間以内にPythonの基本を学ぶことができます。 1。変数とデータ型を学習します。2。ステートメントやループの場合などのマスター制御構造、3。関数の定義と使用を理解します。これらは、簡単なPythonプログラムの作成を開始するのに役立ちます。

プロジェクトの基本と問題駆動型の方法で10時間以内にコンピューター初心者プログラミングの基本を教える方法は？Apr 02, 2025 am 07:18 AM

10時間以内にコンピューター初心者プログラミングの基本を教える方法は？コンピューター初心者にプログラミングの知識を教えるのに10時間しかない場合、何を教えることを選びますか...

中間の読書にどこでもfiddlerを使用するときにブラウザによって検出されないようにするにはどうすればよいですか？Apr 02, 2025 am 07:15 AM

fiddlereveryversings for the-middleの測定値を使用するときに検出されないようにする方法

Python 3.6にピクルスファイルをロードするときに「__Builtin__」モジュールが見つからない場合はどうすればよいですか？Apr 02, 2025 am 07:12 AM

Python 3.6のピクルスファイルのロードレポートエラー：modulenotFounderror：nomodulenamed ...

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

WebStorm Mac版

便利なJavaScript開発ツール

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、