Ringkasan pengalaman praktikal: Perkara utama pembangunan projek tindanan penuh Vue3+Django4
Pengenalan:
Dengan perkembangan pesat Internet, pembangunan tindanan penuh telah menjadi model pembangunan yang popular. Vue3 dan Django4 kini merupakan salah satu rangka kerja bahagian hadapan dan belakang yang paling popular. Sebagai rangka kerja JavaScript moden, Vue3 boleh menyediakan reka bentuk antara muka pengguna yang sangat baik dan responsif; Django4 ialah rangka kerja Python yang pantas, selamat dan boleh dikembangkan sesuai untuk membina aplikasi web berkualiti tinggi.
Artikel ini akan meringkaskan perkara utama pembangunan projek tindanan penuh Vue3+Django4 berdasarkan pengalaman praktikal dan melampirkan beberapa contoh kod.
1. Project initialization
Vue3 project initialization
Mula-mula, kita perlu memasang versi terkini Vue CLI, pasang melalui arahan berikut:
npm install -g @vue/cli
Kemudian, gunakan Vue CLI untuk mencipta projek Vue baharu:
vue create my-project
In Semasa proses mencipta projek, anda boleh memilih konfigurasi yang sesuai, seperti memilih versi Vue3, menambah pemalam, dsb.
Django4 project initialization
Gunakan arahan berikut untuk memasang Django4:
pip install Django==4.0.0
Kemudian, cipta projek Django baharu melalui arahan berikut:
django-admin startproject my_project
Second, front-end dan back-end separation🜎 +Pembangunan projek timbunan penuh Django4 , pemisahan bahagian hadapan dan hujung belakang ialah model pembangunan biasa. Bahagian hadapan bertanggungjawab untuk reka bentuk antara muka pengguna dan logik interaksi pengguna, manakala bahagian belakang bertanggungjawab untuk memproses data dan operasi logik.
<template> <div> <h1>{{ message }}</h1> <button @click="updateMessage">Update Message</button> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const message = ref('Hello, Vue3!'); const updateMessage = () => { message.value = 'Updated Message'; }; return { message, updateMessage, }; }, }; </script>
from django.http import JsonResponse def hello(request): return JsonResponse({'message': 'Hello, Django4!'})
Dalam pembangunan projek tindanan penuh Vue3+Django4, interaksi data hadapan dan belakang adalah sangat penting. Biasanya kami menggunakan protokol HTTP untuk penghantaran data.
axios
untuk menghantar permintaan HTTP. Berikut ialah contoh penggunaan axios
untuk menghantar permintaan GET: import axios from 'axios'; axios.get('/api/data') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); });
axios
库来发送HTTP请求。以下是一个使用axios
发送GET请求的示例:from django.http import JsonResponse def get_data(request): data = { 'name': 'John', 'age': 25, } return JsonResponse(data)
后端数据处理
在Django4中,我们可以使用django.views
模块来处理HTTP请求。以下是一个处理GET请求的Django4视图函数示例:
gunicorn my_project.wsgi:application
这里我们返回一个包含姓名和年龄的JSON响应。
四、项目部署
当开发完成后,我们需要将Vue3前端和Django4后端部署到服务器上以供访问。
npm run build
命令来构建生产环境的前端代码。构建完成后,生成的静态文件将存放在dist
目录下。将dist
目录下的文件部署到Web服务器上即可。后端部署
对于Django4,我们可以使用gunicorn
等WSGI服务器将Django应用部署在服务器上。以下是使用gunicorn
Dalam Django4, kami boleh menggunakan modul django.views
untuk mengendalikan HTTP permintaan . Berikut ialah contoh fungsi paparan Django4 yang mengendalikan permintaan GET:
npm run build
untuk membina kod bahagian hadapan untuk persekitaran pengeluaran. Selepas binaan selesai, fail statik yang dijana akan disimpan dalam direktori dist
. Hanya gunakan fail dalam direktori dist
ke pelayan web. 🎜🎜🎜Kerahan belakang🎜Untuk Django4, kita boleh menggunakan pelayan WSGI seperti gunicorn
untuk menggunakan aplikasi Django pada pelayan. Berikut ialah contoh arahan untuk menggunakan Django4 menggunakan gunicorn
: 🎜rrreee🎜 boleh dikonfigurasikan mengikut keperluan sebenar, seperti mengikat alamat IP dan port, dsb. 🎜🎜🎜🎜Ringkasan: 🎜Artikel ini meringkaskan perkara utama pembangunan projek tindanan penuh Vue3+Django4, termasuk pemulaan projek, pemisahan bahagian hadapan dan belakang, interaksi data dan penggunaan projek. Melalui perkara utama dan contoh kod ini, saya percaya pembaca boleh mula membangunkan projek tindanan penuh Vue3+Django4 dengan cepat dan mencapai hasil pembangunan yang baik. Semoga artikel ini bermanfaat kepada pembaca! 🎜Atas ialah kandungan terperinci Ringkasan pengalaman praktikal: perkara utama pembangunan projek tindanan penuh Vue3+Django4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!