Latihan praktikal: Amalan pembangunan tindanan penuh Vue3+Django4

Latih tubi praktikal: Amalan pembangunan timbunan penuh Vue3+Django4

Dengan perkembangan pesat Internet, model pembangunan pemisahan hujung depan dan belakang telah menjadi arus perdana pembangunan web moden. Sebagai dua rangka kerja pembangunan yang popular, Vue dan Django memainkan peranan penting dalam pembangunan hadapan dan belakang. Artikel ini akan memperkenalkan cara menggunakan Vue3 dan Django4 untuk pembangunan tindanan penuh, dan menunjukkan proses praktikalnya melalui contoh praktikal.

1. Perancangan projek

Sebelum memulakan pembangunan, kita perlu melaksanakan perancangan projek terlebih dahulu. Kami akan mencipta sistem pengurusan tugas yang mudah di mana pengguna boleh log masuk, mencipta tugas, melihat senarai tugas dan mengemas kini status tugas. Sistem ini akan menggunakan Vue3 sebagai rangka kerja bahagian hadapan, Django4 sebagai rangka kerja bahagian belakang dan menggunakan API untuk komunikasi bahagian hadapan dan belakang.

2. Pembangunan bahagian hadapan

1. Buat projek Vue3
   Pertama, kami menggunakan Vue CLI untuk mencipta projek Vue3 baharu. Jalankan arahan berikut dalam terminal:

   vue create frontend

   Pilih item konfigurasi yang diperlukan mengikut gesaan dan tunggu projek dibuat.

2. Tetapkan penghalaan dan komponen halaman
   Buat fail router.js dalam direktori src dan tetapkan penghalaan. Kami akan mempunyai tiga halaman: halaman log masuk, halaman senarai tugas dan halaman butiran tugas. Tambahkan kod berikut dalam router.js: router.js文件，并设置路由。我们将有三个页面：登录页面、任务列表页面和任务详情页面。在router.js中添加以下代码：

   import { createRouter, createWebHistory } from 'vue-router'
   import Login from './views/Login.vue'
   import TaskList from './views/TaskList.vue'
   import TaskDetail from './views/TaskDetail.vue'
   
   const routes = [
     {
    path: '/login',
    name: 'Login',
    component: Login
     },
     {
    path: '/taskList',
    name: 'TaskList',
    component: TaskList
     },
     {
    path: '/taskDetail/:id',
    name: 'TaskDetail',
    component: TaskDetail
     }
   ]
   
   const router = createRouter({
     history: createWebHistory(process.env.BASE_URL),
     routes
   })
   
   export default router

3. 创建页面组件
   在src/views目录下创建Login.vue、TaskList.vue和TaskDetail.vue三个页面组件，并编写相关的HTML和逻辑。这里不再展示具体代码，读者可以根据需要自行创建相关组件。
4. 发送API请求
   在src目录下创建api.js文件，用于发送API请求。这里我们使用Axios库来发送HTTP请求。具体的API请求代码可以根据后端API的设计来编写。
5. 集成Vuex
   在src目录下创建store.js文件，并配置Vuex。我们将在store中存储用户信息和任务列表数据，并通过mutations和actions来修改和获取这些数据。

至此，我们的前端开发工作就完成了。可以通过执行npm run serve命令来启动开发服务器，并在浏览器中访问http://localhost:8080来查看页面。

三、后端开发

1. 创建Django4项目
   在终端中执行以下命令来创建一个新的Django4项目：

   django-admin startproject backend

2. 创建应用
   进入项目目录，并执行以下命令来创建一个新的应用：

   cd backend
   python manage.py startapp tasks

3. 设置数据库和模型
   在项目的settings.py中配置数据库信息，并在tasks应用的models.py中创建所需的模型。例如，任务模型可以定义如下：

   from django.db import models
   
   class Task(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField()
    status = models.CharField(max_length=20)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

4. 创建API视图
   在tasks应用的views.py中创建API视图，并定义相关的路由。使用Django的Rest Framework可以更便捷地创建API视图和路由。
5. 配置CORS
   由于前端和后端分别运行在不同的域名或端口上，我们需要进行跨域资源共享（CORS）的配置。通过在settings.py中进行配置即可实现跨域请求。

四、前后端集成

1. 运行后端服务器
   在终端中执行以下命令来启动Django的开发服务器：

   python manage.py runserver

2. 配置前端API请求
   在前端的api.js文件中配置API请求的base URL，使其指向后端服务器的地址和端口。
3. 配置前端路由
   在前端的router.jsrrreee

Buat komponen halaman

Buat Login.vue dan TaskList.vue dalam direktori src/views code> dan <code>TaskDetail.vue tiga komponen halaman, dan tulis HTML dan logik yang berkaitan. Kod khusus tidak lagi ditunjukkan di sini, pembaca boleh membuat komponen yang berkaitan dengan sendiri mengikut keperluan.

Hantar permintaan API

Buat fail api.js dalam direktori src untuk menghantar permintaan API. Di sini kami menggunakan perpustakaan Axios untuk menghantar permintaan HTTP. Kod permintaan API khusus boleh ditulis mengikut reka bentuk API bahagian belakang.

Integrate Vuex🎜Buat fail store.js dalam direktori src dan konfigurasikan Vuex. Kami akan menyimpan maklumat pengguna dan data senarai tugas di stor, dan mengubah suai serta mendapatkan data ini melalui mutasi dan tindakan. 🎜🎜🎜Pada ketika ini, kerja pembangunan bahagian hadapan kami telah selesai. Anda boleh memulakan pelayan pembangunan dengan melaksanakan perintah npm run serve dan akses http://localhost:8080 dalam penyemak imbas untuk melihat halaman. 🎜🎜3. Pembangunan bahagian belakang🎜🎜🎜🎜Buat projek Django4🎜Laksanakan arahan berikut dalam terminal untuk mencipta projek Django4 baharu:🎜rrreee🎜🎜🎜Buat aplikasi🎜Masukkan arahan projek berikut Aplikasi baharu: 🎜rrreee🎜🎜🎜Sediakan pangkalan data dan model🎜 Konfigurasikan maklumat pangkalan data dalam tetapan.py projek dan cipta model yang diperlukan dalam models.py aplikasi tugas. Sebagai contoh, model tugasan boleh ditakrifkan seperti berikut: 🎜rrreee🎜🎜Buat paparan API🎜Buat paparan API dalam views.py aplikasi tugas dan tentukan laluan yang berkaitan. Menggunakan Rangka Kerja Rehat Django menjadikannya lebih mudah untuk membuat paparan dan laluan API. 🎜🎜Konfigurasikan CORS🎜Memandangkan bahagian hadapan dan bahagian belakang dijalankan pada nama domain atau port yang berbeza, kami perlu mengkonfigurasi perkongsian sumber merentas domain (CORS). Permintaan merentas domain boleh dilaksanakan dengan mengkonfigurasi settings.py. 🎜🎜🎜4. Penyepaduan bahagian hadapan dan bahagian belakang🎜🎜🎜🎜Jalankan pelayan bahagian belakang🎜Lakukan arahan berikut dalam terminal untuk memulakan pelayan pembangunan Django:🎜rrreee🎜🎜Konfigurasikan permintaan API bahagian hadapan🎜 Dalam fail api.js bahagian hadapan hadapan Konfigurasikan URL asas permintaan API dalam kod> supaya ia menghala ke alamat dan port pelayan bahagian belakang. 🎜🎜Konfigurasikan penghalaan bahagian hadapan🎜Konfigurasikan penghalaan dalam fail <code>router.js bahagian hadapan mengikut keperluan sebenar. 🎜🎜🎜Kini, kerja penyepaduan bahagian hadapan dan bahagian belakang kami telah selesai. Anda boleh menguji kefungsian aplikasi anda dan berkomunikasi dengan bahagian belakang dengan mengakses URL bahagian hadapan. 🎜🎜5 Ringkasan🎜🎜Artikel ini memperkenalkan cara menggunakan Vue3 dan Django4 untuk pembangunan tindanan penuh, dan menunjukkan proses praktikalnya melalui contoh praktikal. Melalui model pembangunan pemisahan bahagian hadapan dan belakang, kami boleh membangunkan dan mengekalkan aplikasi web yang berkuasa dengan lebih cekap. Saya harap artikel ini dapat memberikan sedikit inspirasi kepada pemula dan membantu dalam pembangunan sebenar. Jika ada kekurangan mohon diperbetulkan. 🎜

Atas ialah kandungan terperinci Latihan praktikal: Amalan pembangunan tindanan penuh Vue3+Django4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!