Rumah > Artikel > pembangunan bahagian belakang > Flask + Vue.js: Laksanakan aplikasi satu halaman dengan pantas

Flask + Vue.js: Laksanakan aplikasi satu halaman dengan pantas

王林asal: 2023-06-17 09:06:401750semak imbas

Dengan perkembangan pesat Internet mudah alih dan teknologi Web, semakin banyak aplikasi perlu menyediakan pengalaman pengguna yang lancar dan pantas. Aplikasi berbilang halaman tradisional tidak lagi dapat memenuhi keperluan ini, dan aplikasi satu halaman (SPA) telah menjadi salah satu penyelesaian.

Jadi, bagaimana untuk melaksanakan aplikasi satu halaman dengan cepat? Artikel ini akan memperkenalkan cara menggunakan Flask dan Vue.js untuk membina SPA.

Flask ialah rangka kerja aplikasi web ringan yang ditulis dalam Python Kelebihannya ialah fleksibiliti, pengembangan yang mudah dan pembelajaran yang mudah. Vue.js ialah rangka kerja JavaScript popular yang memudahkan untuk membina antara muka pengguna interaktif.

Langkah 1: Buat aplikasi Flask

Pertama, anda perlu mencipta aplikasi Flask Anda boleh menggunakan kod berikut:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello world'

if __name__ == '__main__':
    app.run(debug=True)

Kod di atas mencipta Flask mudah. aplikasi. Apabila pengguna Apabila mengakses direktori akar, rentetan "Hello world" dipaparkan.

Langkah 2: Tambah fail statik

Seterusnya, anda perlu menambah folder statik, yang digunakan untuk menyimpan Vue.js dan fail statik lain. Dalam aplikasi Flask, anda boleh menggunakan kod berikut untuk menambah folder statik:

from flask import Flask, send_from_directory

app = Flask(__name__)

@app.route('/')
def index():
    return send_from_directory('static', 'index.html')

if __name__ == '__main__':
    app.run(debug=True)

Dalam kod di atas, fungsi send_from_directory akan mencari fail static daripada folder index.html dan mengembalikannya kepada pengguna.

Langkah 3: Tulis kod Vue.js

Kini anda boleh mula menulis kod Vue.js. Vue.js biasanya perlu dibungkus menggunakan Webpack, tetapi dalam artikel ini kami hanya menggunakan fail vue.js dan vue-router.js yang disertakan dengan Vue.js untuk memudahkan proses.

Pertama, anda perlu mencipta folder static di bawah folder js dan menambah fail vue.js dan vue-router.js di dalamnya. Kemudian, cipta fail static di bawah folder app.js dan tambah kod berikut:

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '*', component: NotFound }
];

const router = new VueRouter({
    mode: 'history',
    routes: routes
});

const app = new Vue({
    router,
    el: '#app'
});

Kod di atas terutamanya mengkonfigurasi Penghala Vue dan mentakrifkan tiga laluan: / sepadan dengan komponen Home , /about sepadan dengan komponen About dan * sepadan dengan komponen NotFound. Komponen Home dan About boleh ditakrifkan dalam fail app.js:

const Home = {
    template: `
        <div>
            <h1>Home</h1>
            <p>This is home page.</p>
        </div>
    `
};

const About = {
    template: `
        <div>
            <h1>About</h1>
            <p>This is about page.</p>
        </div>
    `
};

const NotFound = {
    template: `
        <div>
            <h1>404 Not Found</h1>
            <p>The page you're looking for is not found.</p>
        </div>
    `
};

Langkah 4: Sambungkan aplikasi Vue.js dan Flask

Kini, aplikasi Vue.js dan Flask Semuanya sudah bersedia, sudah tiba masanya untuk menyambungkannya. Dalam index.html, tambahkan kod berikut:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Flask + Vue.js</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script type="text/javascript" src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>

Dalam kod di atas, 975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e akan memaparkan komponen yang sepadan secara dinamik mengikut konfigurasi Penghala Vue. Fungsi url_for menghantar laluan fail statik yang dijana oleh aplikasi Flask ke Vue.js.

Akhir sekali, tambahkan kod berikut pada aplikasi Flask:

from flask import Flask, send_from_directory

app = Flask(__name__)

@app.route('/')
def index():
    return send_from_directory('static', 'index.html')

@app.route('/<path:path>')
def any_path(path):
    return send_from_directory('static', 'index.html')

if __name__ == '__main__':
    app.run(debug=True)

Dalam kod di atas, fungsi any_path akan mengubah hala semua laluan ke index.html untuk menghalang Penghala Vue daripada mengakses ralat muka surat.

Kini, aplikasi satu halaman selesai! Anda boleh memulakan aplikasi melalui Flask, mengakses penghalaan dalam penyemak imbas, dan menguji setiap halaman dan kesan interaksi aplikasi.

Ringkasan

Artikel ini memperkenalkan cara menggunakan Flask dan Vue.js untuk melaksanakan aplikasi satu halaman. Dengan menggunakan Flask untuk menyediakan antara muka dan Vue.js untuk memaparkan halaman, anda boleh membuat aplikasi web moden dengan cepat.

Adalah disyorkan bahawa pembaca mempunyai pemahaman yang lebih mendalam tentang penggunaan Vue.js dan Flask, dan cuba melaksanakan SPA yang serupa dengan alatan dan rangka kerja lain.

Atas ialah kandungan terperinci Flask + Vue.js: Laksanakan aplikasi satu halaman dengan pantas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Python JavaScript flask vue.js html webpack Static 字符串接口 JS

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Pengujian Flask: Amalan terbaik untuk ujian unit dalam aplikasi web PythonArtikel seterusnya：Pengujian Flask: Amalan terbaik untuk ujian unit dalam aplikasi web Python

Artikel berkaitan

Lihat lagi