快速入門(mén)：Vue3+Django4全棧開(kāi)發(fā)入門(mén)指南
隨著互聯(lián)網(wǎng)的快速發(fā)展，全棧開(kāi)發(fā)成為了近年來(lái)最熱門(mén)的技術(shù)趨勢(shì)之一。而在全棧開(kāi)發(fā)中，結(jié)合前端框架和后端框架進(jìn)行開(kāi)發(fā)是一種常見(jiàn)的方式。本文將帶領(lǐng)大家進(jìn)入Vue3+Django4全棧開(kāi)發(fā)的世界，并為初學(xué)者提供一個(gè)入門(mén)指南。
Vue3是目前最新的Vue.js框架版本，它擁有更高的性能、更好的開(kāi)發(fā)體驗(yàn)和更多的新特性。而Django是一個(gè)高級(jí)的Python Web框架，它提供了豐富的功能和可擴(kuò)展性。將它們結(jié)合在一起，可以創(chuàng)建出強(qiáng)大而現(xiàn)代化的Web應(yīng)用程序。
在開(kāi)始之前，確保你已經(jīng)正確安裝了Node.js、Vue CLI和Python。安裝完成后，我們可以開(kāi)始創(chuàng)建我們的項(xiàng)目了。首先，使用Vue CLI創(chuàng)建一個(gè)Vue3項(xiàng)目，打開(kāi)終端并運(yùn)行以下命令：
vue create myproject
登錄后復(fù)制
在創(chuàng)建過(guò)程中，你可以選擇使用Vue3預(yù)設(shè)選項(xiàng)，這將提供給你一個(gè)包含Vue Router和Vuex的現(xiàn)成配置。創(chuàng)建完成后，我們進(jìn)入到項(xiàng)目目錄，并安裝Vue和Django的依賴(lài)包：
cd myproject npm install vue@next pip install Django
登錄后復(fù)制
接下來(lái)，我們需要在項(xiàng)目中創(chuàng)建一個(gè)Django應(yīng)用，通過(guò)以下命令來(lái)創(chuàng)建：
django-admin startproject backend cd backend python manage.py startapp api
登錄后復(fù)制
創(chuàng)建完成后，我們可以開(kāi)始編寫(xiě)代碼。首先，我們需要在Django的settings.py文件中添加Vue的靜態(tài)文件路徑，找到STATIC_URL并在其下面添加以下代碼：
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'frontend/dist'),
]
登錄后復(fù)制
然后，我們創(chuàng)建一個(gè)新的urls.py文件，用于處理和Vue前端的請(qǐng)求。此文件位于api目錄下，編寫(xiě)以下代碼：
from django.urls import path
from . import views
urlpatterns = [
path('api/', views.api),
]
登錄后復(fù)制
接下來(lái)，我們編寫(xiě)views.py文件中的邏輯代碼，用于處理Vue前端的請(qǐng)求。編寫(xiě)以下代碼：
from django.shortcuts import render
from django.http import JsonResponse
def api(request):
data = {
'message': 'Hello from Django API!'
}
return JsonResponse(data)
登錄后復(fù)制
在這個(gè)簡(jiǎn)單的示例中，我們只是返回了一個(gè)包含簡(jiǎn)單消息的JSON響應(yīng)。在實(shí)際的應(yīng)用中，你可以編寫(xiě)更復(fù)雜的邏輯來(lái)處理不同的請(qǐng)求。
接下來(lái)，我們需要用Vue編寫(xiě)前端代碼。進(jìn)入到項(xiàng)目目錄并安裝Vue Router和Axios：
cd frontend npm install vue-router@next axios
登錄后復(fù)制
然后我們打開(kāi)src/router/index.js文件，并添加以下代碼：
import { createWebHistory, createRouter } from 'vue-router'
import Home from '../views/Home.vue'
import API from '../views/API.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/api',
name: 'API',
component: API
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
登錄后復(fù)制
在這個(gè)示例中，我們定義了兩個(gè)路由：’/’對(duì)應(yīng)Home組件，’/api’對(duì)應(yīng)API組件。然后，我們?cè)趕rc/views目錄下創(chuàng)建Home.vue和API.vue組件，這里我們只需要簡(jiǎn)單的展示一些文本信息。
現(xiàn)在我們可以在API.vue組件中發(fā)送請(qǐng)求，獲取Django API的數(shù)據(jù)。使用以下代碼替換掉原有的內(nèi)容：
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
message: ''
}
},
mounted() {
axios.get('/api/')
.then(response => {
this.message = response.data.message
})
.catch(error => {
console.error(error)
})
}
}
</script>
登錄后復(fù)制
在這個(gè)示例中，我們?cè)诮M件的mounted鉤子函數(shù)中發(fā)送了一個(gè)GET請(qǐng)求，獲取到了Django API返回的數(shù)據(jù)，并將數(shù)據(jù)展示到頁(yè)面上。
現(xiàn)在我們已經(jīng)完成了一個(gè)使用Vue3和Django4的基本全棧應(yīng)用。你可以運(yùn)行以下命令來(lái)啟動(dòng)開(kāi)發(fā)服務(wù)器：
cd .. python manage.py runserver
登錄后復(fù)制
然后在瀏覽器中打開(kāi)http://localhost:8000/，你將看到一個(gè)包含Django API數(shù)據(jù)的頁(yè)面。
通過(guò)本文的指導(dǎo)，我們帶領(lǐng)大家完成了Vue3+Django4全棧開(kāi)發(fā)的入門(mén)指南。希望對(duì)初學(xué)者有所幫助，同時(shí)也希望你能夠進(jìn)一步深入學(xué)習(xí)和探索全棧開(kāi)發(fā)的領(lǐng)域。加油！
以上就是快速入門(mén)：Vue3+Django4全棧開(kāi)發(fā)入門(mén)指南的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
