国产成人综合在线视频,欧美日韩福利视频,久久久精品在线观看

實戰(zhàn)演練：Vue3+Django4全棧開發(fā)實踐

隨著互聯(lián)網(wǎng)的迅猛發(fā)展，前后端分離的開發(fā)模式已經(jīng)成為現(xiàn)代web開發(fā)的主流。Vue和Django作為兩個流行的開發(fā)框架，在前端和后端開發(fā)中扮演著重要的角色。本文將介紹如何通過使用Vue3和Django4進行全棧開發(fā)，并通過一個實際的示例來演示其實踐過程。

一、項目規(guī)劃

在開始開發(fā)之前，我們首先需要進行項目規(guī)劃。我們將創(chuàng)建一個簡單的任務管理系統(tǒng)，其中用戶可以登錄、創(chuàng)建任務、查看任務列表和更新任務的狀態(tài)。該系統(tǒng)將使用Vue3作為前端框架，Django4作為后端框架，并使用API進行前后端的通信。

二、前端開發(fā)

創(chuàng)建Vue3項目
首先，我們使用Vue CLI創(chuàng)建一個新的Vue3項目。在終端中執(zhí)行以下命令：

vue create frontend

登錄后復制

按照提示選擇需要的配置項，并等待項目創(chuàng)建完成。

設置路由和頁面組件
在src目錄中創(chuàng)建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

登錄后復制創(chuàng)建頁面組件
在src/views目錄下創(chuàng)建Login.vue、TaskList.vue和TaskDetail.vue三個頁面組件，并編寫相關的HTML和邏輯。這里不再展示具體代碼，讀者可以根據(jù)需要自行創(chuàng)建相關組件。發(fā)送API請求
在src目錄下創(chuàng)建api.js文件，用于發(fā)送API請求。這里我們使用Axios庫來發(fā)送HTTP請求。具體的API請求代碼可以根據(jù)后端API的設計來編寫。集成Vuex
在src目錄下創(chuàng)建store.js文件，并配置Vuex。我們將在store中存儲用戶信息和任務列表數(shù)據(jù)，并通過mutations和actions來修改和獲取這些數(shù)據(jù)。

至此，我們的前端開發(fā)工作就完成了。可以通過執(zhí)行npm run serve命令來啟動開發(fā)服務器，并在瀏覽器中訪問http://localhost:8080來查看頁面。

三、后端開發(fā)

創(chuàng)建Django4項目
在終端中執(zhí)行以下命令來創(chuàng)建一個新的Django4項目：

django-admin startproject backend

登錄后復制

創(chuàng)建應用
進入項目目錄，并執(zhí)行以下命令來創(chuàng)建一個新的應用：

cd backend
python manage.py startapp tasks

登錄后復制

設置數(shù)據(jù)庫和模型
在項目的settings.py中配置數(shù)據(jù)庫信息，并在tasks應用的models.py中創(chuàng)建所需的模型。例如，任務模型可以定義如下：

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)

登錄后復制創(chuàng)建API視圖
在tasks應用的views.py中創(chuàng)建API視圖，并定義相關的路由。使用Django的Rest Framework可以更便捷地創(chuàng)建API視圖和路由。配置CORS
由于前端和后端分別運行在不同的域名或端口上，我們需要進行跨域資源共享（CORS）的配置。通過在settings.py中進行配置即可實現(xiàn)跨域請求。

四、前后端集成

運行后端服務器
在終端中執(zhí)行以下命令來啟動Django的開發(fā)服務器：