Ringkasan pengalaman praktikal: perkara utama pembangunan projek tindanan penuh Vue3+Django4

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

1. Vue3 project initialization
   Mula-mula, kita perlu memasang versi terkini Vue CLI, pasang melalui arahan berikut:

   npm install -g @vue/cli

   Salin selepas log masuk

   Kemudian, gunakan Vue CLI untuk mencipta projek Vue baharu:

   vue create my-project

   Salin selepas log masuk

   In Semasa proses mencipta projek, anda boleh memilih konfigurasi yang sesuai, seperti memilih versi Vue3, menambah pemalam, dsb.

2. Django4 project initialization
   Gunakan arahan berikut untuk memasang Django4:

   pip install Django==4.0.0

   Salin selepas log masuk

   Kemudian, cipta projek Django baharu melalui arahan berikut:

   django-admin startproject my_project

   Salin selepas log masuk

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.

Pembangunan bahagian hadapan
1. Vue3 menyediakan sintaks yang ringkas dan elegan serta banyak fungsi praktikal, seperti komponenisasi, pengikatan data responsif, penghalaan dan pengurusan keadaan, dsb. Berikut ialah contoh komponen Vue3 yang mudah:

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

   Salin selepas log masuk
   
   

Pembangunan backend
2. Django4 menyediakan model, pandangan, penghalaan dan fungsi lain yang berkuasa untuk membina antara muka API bahagian belakang dengan mudah. Berikut ialah contoh fungsi paparan Django4 yang mudah:

   from django.http import JsonResponse
   
   def hello(request):
    return JsonResponse({'message': 'Hello, Django4!'})

   Salin selepas log masuk
   
   Di sini kami menggunakan JsonResponse untuk mengembalikan respons berformat JSON.

3. Interaksi data

Dalam pembangunan projek tindanan penuh Vue3+Django4, interaksi data hadapan dan belakang adalah sangat penting. Biasanya kami menggunakan protokol HTTP untuk penghantaran data.

Permintaan data bahagian hadapan
1. Dalam Vue3, kami boleh menggunakan pustaka 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);
     });

   Salin selepas log masuk
   
   axios库来发送HTTP请求。以下是一个使用axios发送GET请求的示例：

   from django.http import JsonResponse
   
   def get_data(request):
    data = {
        'name': 'John',
        'age': 25,
    }
    return JsonResponse(data)

   Salin selepas log masuk

2. 后端数据处理
   在Django4中，我们可以使用django.views模块来处理HTTP请求。以下是一个处理GET请求的Django4视图函数示例：

   gunicorn my_project.wsgi:application

   Salin selepas log masuk

   这里我们返回一个包含姓名和年龄的JSON响应。

四、项目部署

当开发完成后，我们需要将Vue3前端和Django4后端部署到服务器上以供访问。

1. 前端部署
   在Vue3中，我们可以使用npm run build命令来构建生产环境的前端代码。构建完成后，生成的静态文件将存放在dist目录下。将dist目录下的文件部署到Web服务器上即可。

2. 后端部署
   对于Django4，我们可以使用gunicorn等WSGI服务器将Django应用部署在服务器上。以下是使用gunicorn

   Backend data processing

   Dalam Django4, kami boleh menggunakan modul django.views untuk mengendalikan HTTP permintaan . Berikut ialah contoh fungsi paparan Django4 yang mengendalikan permintaan GET:

   rrreee
Di sini kami mengembalikan respons JSON yang mengandungi nama dan umur.

4 Penerapan Projek🎜🎜Apabila pembangunan selesai, kami perlu menggunakan bahagian hadapan Vue3 dan bahagian belakang Django4 ke pelayan untuk akses. 🎜🎜🎜Kerahan bahagian hadapan🎜Dalam Vue3, kita boleh menggunakan perintah 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!