Membangunkan aplikasi web disegerakkan masa nyata menggunakan Python dan Vue.js

Dengan populariti aplikasi web dan keperluan yang semakin meningkat untuk pengalaman pengguna, penyegerakan masa nyata telah menjadi ciri yang amat diperlukan dalam aplikasi web moden. Dalam artikel ini, kami akan memperkenalkan cara membangunkan aplikasi web segerak masa nyata menggunakan Python dan Vue.js.

Untuk mencapai penyegerakan masa nyata, kita perlu menggunakan beberapa teknologi Web moden, termasuk WebSocket, pengaturcaraan tak segerak dan rangka kerja bahagian hadapan. Berikut ialah tindanan teknologi yang akan digunakan dalam artikel ini:

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

Mari langkah demi langkah memperkenalkan cara menggunakan teknologi ini untuk melaksanakan program aplikasi web disegerakkan masa nyata.

1. Mencipta aplikasi Flask

Pertama, kita perlu mencipta aplikasi Flask. Kita boleh menggunakan pengurus pakej pip Python untuk memasang Flask:

pip install flask

Kemudian, cipta fail app.py dengan kandungan berikut:

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)

Kod ini mencipta aplikasi Flask dan templat bernama indeks. html diberikan pada laluan akar. Kami akan membuat templat ini kemudian. Di samping itu, kami juga memulakan pelayan WebSocket supaya kami boleh menggunakannya kemudian untuk melaksanakan penyegerakan masa nyata.

2. Membuat aplikasi Vue.js

Seterusnya, kita perlu mencipta aplikasi Vue.js. Kita boleh menggunakan alat CLI Vue untuk mencipta aplikasi Vue.js dengan cepat Perintahnya adalah seperti berikut:

npm install -g @vue/cli
vue create client

Ini akan mencipta aplikasi Vue.js bernama klien. Pergi ke direktori aplikasi dan pasang kebergantungan yang diperlukan:

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

Kemudian kita perlu melakukan beberapa konfigurasi aplikasi. Buka src/main.js dan gunakan kod berikut:

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')

Dalam kod kami telah mengimport beberapa modul yang diperlukan dan mencipta contoh soket supaya kami boleh menyambung ke pelayan WebSocket dalam aplikasi Flask.

3. Buat kedai Vuex

Kami menggunakan Vuex untuk mengurus keadaan aplikasi. Oleh itu, kita perlu mencipta folder kedai dan mencipta fail store.js di dalamnya, menggunakan kod berikut:

rreee

Kedai ini mengandungi medan mesej dalam keadaan dan mempunyai mutasi untuk menetapkan medan itu.

4. Buat komponen Vue

Kini kita boleh mencipta komponen Vue untuk memaparkan status mesej dan mencapai penyegerakan masa nyata. Kami akan menggunakan kaedah pemancar soket dan pada komponen untuk melaksanakan penyegerakan masa nyata. Buka fail App.vue dan gunakan kod berikut:

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
    }
  }
})

Perhatikan bahawa kami menggunakan kaedah pancaran dan pada soket dalam komponen Vue. Kaedah emit digunakan untuk menghantar mesej kepada pelayan, manakala kaedah on digunakan untuk menerima mesej yang dihantar daripada pelayan dan melaksanakan panggilan balik yang ditentukan.

5. Cipta templat index.html

Kami juga perlu mencipta templat index.html untuk menyediakan titik masuk untuk aplikasi Terbuka templat/index.html dan gunakan Kod berikut:

<template>
  <div class="container">
    <h1>{{ 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>

Templat ini mengandungi titik masuk untuk Vue dan menyediakan elemen DOM untuk aplikasi Vue untuk memaparkan kandungan. Ambil perhatian bahawa templat juga termasuk URL fail statik yang akan dirujuk oleh aplikasi Flask dan menyediakan skrip aplikasi Vue.

6. Jalankan aplikasi

Sekarang kita mempunyai semua tetapan untuk aplikasi, kita boleh melancarkannya menggunakan arahan berikut:

<!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>

Kemudian dalam Buka http://localhost:5000 dalam penyemak imbas. Anda akan melihat kotak input pada halaman di mana anda boleh memasukkan beberapa teks. Bukan itu sahaja, apabila anda bertukar ke penyemak imbas lain dan memasukkan teks ke dalam kotak input, anda akan mendapati bahawa teks yang baru anda masukkan turut disegerakkan di sini!

Dengan cara ini, kami telah berjaya melaksanakan Python dan A aplikasi web disegerakkan masa nyata untuk Vue.js. Model ini mempunyai banyak senario aplikasi, seperti aplikasi sembang dalam talian atau aplikasi kerjasama berbilang orang.

Atas ialah kandungan terperinci Membangunkan aplikasi web disegerakkan masa nyata menggunakan Python dan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!