Membina contoh SPA menggunakan Python dan Vue.js

Dengan populariti aplikasi web, aplikasi halaman tunggal (SPA) telah menjadi trend. SPA tidak memerlukan memuatkan semula halaman setiap kali, tetapi menyerahkan kandungan kepada JavaScript untuk diurus, sekali gus meningkatkan prestasi aplikasi web.

Dalam artikel ini, kami akan menggunakan Python dan Vue.js untuk membina contoh SPA yang mudah. Python akan digunakan untuk menyediakan API bahagian belakang dan Vue.js akan digunakan untuk pelaksanaan bahagian hadapan.

Langkah 1: Sediakan persekitaran

Untuk membina aplikasi ini, anda perlu memasang Python 3.x dan Node.js. Anda boleh memuat turun pemasang dari laman web rasmi.

Selepas pemasangan selesai, anda boleh menjalankan arahan berikut dalam terminal untuk menyemak sama ada pemasangan berjaya:

python --version
node --version

Langkah 2: Cipta API bahagian belakang

Kami akan menggunakan rangka kerja Flask untuk Menyediakan API bahagian belakang. Flask ialah rangka kerja mikro yang ditulis dalam Python yang memudahkan untuk membuat aplikasi web.

Kami perlu memasang perpustakaan Flask dan Flask-CORS untuk membuat permintaan merentas domain kepada API daripada klien.

Buat direktori yang dipanggil "backend" dan kemudian buat fail Python yang dipanggil "app.py" dalam direktori itu. Salin kod berikut ke dalam fail ini:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/api/test')
def test():
    return {'message': 'Hello from the backend!'}

Di sini kami telah mencipta aplikasi Flask dan mendayakan CORS. Seterusnya, kami mentakrifkan laluan sebagai "/api/test" yang akan mengembalikan mesej ringkas.

Seterusnya, anda boleh menjalankan arahan berikut dalam terminal untuk memulakan pelayan API bahagian belakang:

export FLASK_APP=app.py
export FLASK_ENV=development
flask run

Langkah Tiga: Buat aplikasi Vue.js bahagian hadapan

Seterusnya kami Aplikasi satu halaman akan dibuat menggunakan Vue.js. Anda boleh memilih untuk menggunakan Vue CLI untuk mencipta aplikasi Vue.js.

Pergi ke direktori "backend" dalam terminal dan jalankan arahan berikut:

npm install -g @vue/cli
vue create frontend

Ini akan mencipta direktori yang dipanggil "frontend" dan menyediakan aplikasi js asas.

Seterusnya, kita perlu memasang perpustakaan axios untuk mengakses API bahagian belakang daripada aplikasi bahagian hadapan. Jalankan arahan berikut dalam direktori "frontend":

npm install axios

Kini anda boleh membuka fail "src/App.vue" dalam aplikasi Vue.js anda dan salin kod berikut ke dalam teg templat:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    data() {
      return {
        message: ""
      };
    },
    mounted() {
      this.getMessage();
    },
    methods: {
      getMessage() {
        axios.get("http://localhost:5000/api/test").then(response => {
          this.message = response.data.message;
        });
      }
    }
  };
</script>

Kod di atas mengandungi templat ringkas yang memaparkan mesej daripada API bahagian belakang pada halaman. Ia juga mengandungi komponen Vue.js yang menggunakan pustaka axios untuk mendapatkan mesej daripada API bahagian belakang dan mengikatnya pada elemen halaman.

Seterusnya, anda boleh menjalankan arahan berikut dalam terminal untuk melancarkan aplikasi Vue.js:

npm run serve

Langkah Empat: Uji Aplikasi

Sekarang, anda boleh menggunakan When penyemak imbas anda mengakses http://localhost:8080, anda sepatutnya melihat mesej bertajuk "Hello dari bahagian belakang!"

Selesai! Kini anda boleh terus membangunkan aplikasi anda mengikut keperluan. Ini adalah contoh aplikasi mudah, tetapi anda boleh menggunakan templat ini untuk membina aplikasi yang lebih besar termasuk log masuk dan pengesahan, sambungan pangkalan data dan antara muka hadapan yang lebih kompleks.

Atas ialah kandungan terperinci Membina contoh SPA menggunakan Python dan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!