pembangunan bahagian belakangTutorial PythonFlask + Vue.js: Laksanakan aplikasi satu halaman dengan pantasFlask + Vue.js: Laksanakan aplikasi satu halaman dengan pantas
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 id="Home">Home</h1>
<p>This is home page.</p>
</div>
`
};
const About = {
template: `
<div>
<h1 id="About">About</h1>
<p>This is about page.</p>
</div>
`
};
const NotFound = {
template: `
<div>
<h1 id="Not-Found">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, <router-view></router-view> 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!
Bagaimana tatasusunan digunakan dalam pengkomputeran saintifik dengan python?Apr 25, 2025 am 12:28 AMArraysinpython, terutamanya yang, arecrucialinscientificificputingputingfortheirefficiencyandversatility.1) mereka yang digunakan untuk
Bagaimana anda mengendalikan versi python yang berbeza pada sistem yang sama?Apr 25, 2025 am 12:24 AMAnda boleh menguruskan versi python yang berbeza dengan menggunakan Pyenv, Venv dan Anaconda. 1) Gunakan pyenv untuk menguruskan pelbagai versi python: Pasang pyenv, tetapkan versi global dan tempatan. 2) Gunakan VENV untuk mewujudkan persekitaran maya untuk mengasingkan kebergantungan projek. 3) Gunakan Anaconda untuk menguruskan versi python dalam projek sains data anda. 4) Simpan sistem python untuk tugas peringkat sistem. Melalui alat dan strategi ini, anda dapat menguruskan versi Python yang berbeza untuk memastikan projek yang lancar.
Apakah beberapa kelebihan menggunakan array numpy melalui array python standard?Apr 25, 2025 am 12:21 AMNumpyarrayshaveseveraladvantagesoverstanderardpythonarrays: 1) thearemuchfasterduetoc-assedimplementation, 2) thearemorememory-efficient, antyedlargedataSets, and3) theyofferoptimized, vectorizedfuncionsformathhematicalicalicalicialisation
Bagaimanakah sifat tatasusunan homogen mempengaruhi prestasi?Apr 25, 2025 am 12:13 AMKesan homogenitas tatasusunan pada prestasi adalah dwi: 1) homogenitas membolehkan pengkompil untuk mengoptimumkan akses memori dan meningkatkan prestasi; 2) tetapi mengehadkan kepelbagaian jenis, yang boleh menyebabkan ketidakcekapan. Singkatnya, memilih struktur data yang betul adalah penting.
Apakah beberapa amalan terbaik untuk menulis skrip python yang boleh dilaksanakan?Apr 25, 2025 am 12:11 AMToCraftExecutablePythonscripts, ikutiTheseBestPractics: 1) addAshebangline (#!/Usr/bin/envpython3) tomakethescriptexecutable.2) setpermissionswithchmod xyour_script.py.3)
Bagaimanakah array numpy berbeza dari tatasusunan yang dibuat menggunakan modul array?Apr 24, 2025 pm 03:53 PMNumpyarraysarebetterfornumericationsoperationsandmulti-dimensialdata, whiletheArrayModuleissuitiableforbasic, ingatan-efisienArrays.1) numpyexcelsinperformanceandfunctionalityforlargedatasetsandcomplexoperations.2) thearrayModeMoremoremory-efficientModeMoremoremoremory-efficientModeMoremoremoremory-efficenceismemoremoremoremoremoremoremoremory-efficenceismemoremoremoremoremorem
Bagaimanakah penggunaan array Numpy berbanding dengan menggunakan array modul array di Python?Apr 24, 2025 pm 03:49 PMNumpyarraysareBetterforheavynumericalcomputing, whilethearraymoduleismoresuitifFormemory-constrainedprojectswithsimpledatypes.1) numpyarraysofferversativilityandperformanceForlargedATAsetSandcomplexoperations.2)
Bagaimanakah modul CTYPES berkaitan dengan tatasusunan di Python?Apr 24, 2025 pm 03:45 PMctypesallowscreatingandmanipulatingc-stylearraysinpython.1) usectypestointerwithclibrariesforperformance.2) createec-stylearraysfornumericalcomputations.3) Passarraystocfuntionsforficientsoperations.however, becautiousofmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmemmem
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Dreamweaver Mac版
Alat pembangunan web visual
VSCode Windows 64-bit Muat Turun
Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
Dreamweaver CS6
Alat pembangunan web visual
