Django+vue+vscode前后端分離搭建的實現(xiàn)
更新時間：2023年08月10日 09:14:58 作者：唐僧騎白馬
本文以一個非常簡單的demo為例,介紹了利用django+drf+vue的前后端分離開發(fā)模式,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
一、Django后端搭建
1.1 創(chuàng)建項目和app
django-admin startproject tman python manage.py startapp tadmin
1.2 注冊app
INSTALLED_APPS = [
'tadmin',
]1.3 運行項目
python manage.py runserver
1.4 配置mysql數(shù)據(jù)庫
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'taskmanage',
'USER': 'root',
'PASSWORD': '密碼',
'HOST': '192.168.75.132',
'PORT': '3306',
}
}在項目tman項目下的init.py中加入如下代碼
pip install pymysql
import pymysql pymysql.version_info = (1, 4, 3, "final", 0) pymysql.install_as_MySQLdb()
1.5 創(chuàng)建數(shù)據(jù)庫類
在tadmin的model.py中加入如下代碼
from django.db import models
class UserInfo(models.Model):
username = models.CharField('用戶名', max_length=128)
password = models.CharField('密碼', max_length=128)
class Meta:
verbose_name = '用戶信息'
verbose_name_plural = '用戶信息'
def __str__(self):
return self.username執(zhí)行如下命令創(chuàng)建數(shù)據(jù)庫
python manage.py makemigrations python manage.py migrate
1.6 使用Django后臺進行數(shù)據(jù)管理
在tadmin應用目錄下加入如下代碼
from django.contrib import admin
from tadmin.models import UserInfo
admin.site.site_header = '任務管理系統(tǒng)'
class UserInfoAdmin(admin.ModelAdmin):
list_display = ('id', 'username', 'password',)
list_display_links = ('username',)
list_per_page = 50
admin.site.register(UserInfo, UserInfoAdmin)創(chuàng)建后臺管理員用戶
python manage.py createsuperuser
2、Django rest framework配置
pip install djangorestframework # 暫時不裝也可以 pip install markdown # 用于數(shù)據(jù)篩選 pip install django-filter
在settings中注冊framework
INSTALLED_APPS = [
'rest_framework',
'django_filters',
]2.1 序列化
在app目錄下創(chuàng)建serializer.py，添加如下代碼
from tadmin.models import UserInfo
from rest_framework import serializers
class UserInfoSerializer(serializers.ModelSerializer):
class Meta:
model = UserInfo
fields = "__all__"2.2 添加視圖
在app目錄下的view.py中加入如下代碼：
from rest_framework.viewsets import ModelViewSet
from tadmin.models import UserInfo
from tadmin.serializer import UserInfoSerializer
from tadmin.filter import UserInfoFilter
from django_filters.rest_framework import DjangoFilterBackend
class UserInfoViewSet(ModelViewSet):
queryset = UserInfo.objects.all()
serializer_class = UserInfoSerializer
filter_class = UserInfoFilter
filter_fields = ['username',]
search_fields = ('username',)2.3 添加路由
在app目錄下創(chuàng)建urls.py文件：
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from tadmin.views import UserInfoViewSet
router = DefaultRouter()
router.register('UserInfo', UserInfoViewSet, basename='UserInfo')
urlpatterns = [
]
urlpatterns += [
path('', include(router.urls)),
]2.4 在項目根目錄下的urls中加入如下代碼
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('api/v1/', include('tadmin.urls')),
]2.5 api測試
http://127.0.0.1:8000/api/v1/UserInfo/
2.6 篩選和搜索功能配置
在app根目錄下創(chuàng)建filter.py文件
from django_filters import FilterSet, filters
from tadmin.models import UserInfo
class UserInfoFilter(FilterSet):
name = filters.CharFilter(field_name='username', lookup_expr='icontains')
class Meta:
model = UserInfo
fields = ('username',)修改app目錄下的view文件： 在這里插入代碼片
from django.shortcuts import render
from rest_framework.viewsets import ModelViewSet
from tadmin.models import UserInfo
from tadmin.serializer import UserInfoSerializer
from tadmin.filter import UserInfoFilter
from django_filters.rest_framework import DjangoFilterBackend
class UserInfoViewSet(ModelViewSet):
queryset = UserInfo.objects.all()
serializer_class = UserInfoSerializer
filter_class = UserInfoFilter
filter_fields = ['username']
search_fields = ('username',)在settings中注冊django_filters：
INSTALLED_APPS = [
'django_filters',
]
# REST_FRAMEWORK增加全局過濾配置
REST_FRAMEWORK = {
'DEFAULT_FILTER_BACKENDS': [
'django_filters.rest_framework.DjangoFilterBackend',
'rest_framework.filters.SearchFilter',
],
}
# 如果可以實現(xiàn)模糊查詢，則以下語句可省略
FILTERS_DEFAULT_LOOKUP_EXPR = 'icontains'Django Rest Framework頁面出現(xiàn)Filters圖標說明配置成功
2.7 分頁設(shè)置
在settings.py中做如下修改
# REST_FRAMEWORK增加全局過濾配置
REST_FRAMEWORK = {
# 設(shè)置分頁
'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
'PAGE_SIZE': 10,
}
3、自動生成api文檔
pip install drf-yasg
在項目文件夾urls.py中做如下修改
INSTALLED_APPS = [
'drf_yasg', # swagger
]在app的urls.py中做如下修改
from drf_yasg.views import get_schema_view
from drf_yasg import openapi
schema_view = get_schema_view(
openapi.Info(
title="API平臺",
default_version="v1",
description="接口文檔",
terms_of_service="",
contact=openapi.Contact(email='2495128088@qq.com'),
license=openapi.License(name="BSD License"),
),
public=True
)
router = DefaultRouter()
router.register('UserInfo', UserInfoViewSet, basename='UserInfo')
urlpatterns = [
path('docs/', schema_view.with_ui('swagger',cache_timeout=0), name='schema-swagger-ui'),
]文檔查看文檔是否成功， http://127.0.0.1:8000/api/v1/docs/
二、vue前端搭建
1、前端工具及框架
- node.js
- npm
- vue3
- axios
- Element plus
- 前端開發(fā)工具：VS Code
2、在Django項目的根目錄下創(chuàng)建前端文件
npm init webpack tmanfront
最終的文件目錄如下：
3、修改src/components/HelloWorld.vue中的代碼如下
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<ul>
<li v-for="(user,index) in users" :key="index" style="display: block;">
{{ index }}--{{ user.username }}--{{ user.password }}
</li>
</ul>
<form action="">
用戶名：<input type="text" placeholder="user name" v-model="inputUser.username"><br>
密碼：<input type="text" placeholder="user password" v-model="inputUser.password"><br>
<button type="submit" @click="userSubmit()">提交</button>
</form>
</div>
</template>
<script>
import { getUsers,postUser } from '../api/api.js';
export default {
name:'hellouser',
data () {
return {
msg:'Welcome to Your Vue.js App',
users:[
{username:'test1',password:'test1'},
{username:'test2',password:'test2'}
],
inputUser:{
"username":"",
"password":"",
}
}
},
methods:{
loadUsers(){},
userSubmit(){}
},
created: function(){
this.loadUsers()
}
}
</script>啟動前端項目，瀏覽器訪問127.0.0.1:8080，可以看到剛寫的頁面已經(jīng)更新上去了
4、前后端聯(lián)調(diào)
利用django-cors-headers模塊解決跨域問題
pip install django-cors-headers
然后在項目settings.py中添加該模塊：
INSTALLED_APPS = [
'corsheaders',
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', # 需注意與其他中間件順序，這里放在最前面即可
...
]
# 支持跨域配置開始
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True 后端部分告于段落，接下來需要補充一下前端的邏輯，Vue框架現(xiàn)在一般都用axios模塊進行網(wǎng)絡(luò)請求，這里沿用這種方式，下面是在前端項目中操作：首先命令行安裝axios模塊，如果沒有安裝cnpm就還是用npm安裝：
cnpm install axios 或者 npm install axios
為了方便管理api請求的各種邏輯，在前端項目的src目錄下創(chuàng)建api目錄，然后創(chuàng)建api.js和index.js文件。index.js文件是對axios做配置： /src/api/index.js
import Vue from 'vue'
import Axios from 'axios'
const axiosInstance=Axios.create({
withCredentials:true
})
axiosInstance.interceptors.request.use((config)=>{
config.headers['X-Requested-With'] = 'XMLHttpRequest'
const regex = /.*csrftoken=([^;.]*).*$/
config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1]
return config
})
axiosInstance.interceptors.response.use(
response=>{
return response
},
error=>{
return Promise.reject(error)
}
)
Vue.prototype.axios=axiosInstance
export default axiosInstanceapi.js文件是對后端進行請求，可以看到，獲取books列表和添加一本book各對應于一個請求：
import axiosInstance from "./index";
const axios = axiosInstance
export const getUsers = () => { return axios.get(`http://127.0.0.1:8000/api/v1/UserInfo/`) }
export const postUser = (username, password) => { return axios.post(`http://127.0.0.1:8000/api/v1/UserInfo/`, { 'username': username, 'password': password }) }然后更新HelloWorld.vue中的處理邏輯：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<ul>
<li v-for="(user,index) in users" :key="index" style="display: block;">
{{ index }}--{{ user.username }}--{{ user.password }}
</li>
</ul>
<form action="">
用戶名：<input type="text" placeholder="user name" v-model="inputUser.username"><br>
密碼：<input type="text" placeholder="user password" v-model="inputUser.password"><br>
<button type="submit" @click="userSubmit()">提交</button>
</form>
</div>
</template>
<script>
import { getUsers,postUser } from '../api/api.js';
export default {
name:'hellouser',
data () {
return {
msg:'Welcome to Your Vue.js App',
users:[
{username:'test1',password:'test1'},
{username:'test2',password:'test2'}
],
inputUser:{
"username":"",
"password":"",
}
}
},
methods:{
loadUsers(){
getUsers().then(response=>{
this.users=response.data
})
},
userSubmit(){
postUser(this.inputUser.username,this.inputUser.password).then(response=>{
console.log(response)
this.loadUsers()
})
}
},
created: function(){
this.loadUsers()
}
}
</script>至此，一個簡單的Django+vue前后端分離項目就已搭建完成，測試添加數(shù)據(jù)成功
可以看到，列表里面的數(shù)據(jù)是從后端讀取到的，同時前端的提交數(shù)據(jù)庫也能有對應的操作，所以前后端至此是打通了。
5、前端打包
現(xiàn)階段是前后端分開開發(fā)，但是當最后要用的時候，還需要把代碼合在一起。首先對前端項目進行打包，這里用Vue的自動打包，進入前端的根目錄下：
npm run build
可以看到前端項目中多出了一個dist文件夾，這個就是前端文件的打包結(jié)果。需要把dist文件夾復制到tman項目文件夾中
然后對settings.py文件進行相應的修改，其實就是幫django指定模版文件和靜態(tài)文件的搜索地址：
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'dist')],
...
},
]
...
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'dist/static'),
]最后在項目根urls.py文件中配置一下入口html文件的對應路由：
from django.views.generic.base import TemplateView
urlpatterns = [
path('', TemplateView.as_view(template_name='index.html'))
]重新啟動項目，這次用瀏覽器訪問127.0.0.1:8000，即django服務的對應端口即可?？梢钥吹?，項目的交互是正常的，符合我們的預期。
三、總結(jié)
本文以一個非常簡單的demo為例，介紹了利用django+drf+vue的前后端分離開發(fā)模式，基本可以算是手把手入門。有了這個小demo之后，不管是前端頁面還是后端功能，都可以做相應的擴展，從而開發(fā)出更加復雜使用的網(wǎng)站。
到此這篇關(guān)于Django+vue+vscode前后端分離搭建的實現(xiàn)的文章就介紹到這了,更多相關(guān)Django vue前后端分離搭建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
Python中微服務架構(gòu)的設(shè)計與實現(xiàn)詳解
在當今軟件開發(fā)領(lǐng)域中,微服務架構(gòu)已經(jīng)成為了一種流行的設(shè)計范式,這篇文章主要為大家介紹了如何使用Python語言來設(shè)計和實現(xiàn)微服務架構(gòu),需要的可以參考一下2024-04-04
對python 通過ssh訪問數(shù)據(jù)庫的實例詳解
今天小編就為大家分享一篇對python 通過ssh訪問數(shù)據(jù)庫的實例詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-02-02
本文主要介紹了python修改鏡像源的方法步驟,包括臨時使用、永久修改以及恢復默認源的方法,具有一定的參考價值,感興趣的可以了解一下2025-03-03
python用pip install時安裝失敗的一系列問題及解決方法
這篇文章主要介紹了python用pip install時安裝失敗的一系列問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
這篇文章主要介紹了python 如何對logging日志封裝，幫助大家更好的理解和使用python，感興趣的朋友可以了解下2020-12-12
ubuntu環(huán)境下python虛擬環(huán)境的安裝過程
這篇文章主要介紹了ubuntu環(huán)境下python虛擬環(huán)境的安裝搭建過程 ,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了Python OS模塊,結(jié)合實例形式總結(jié)分析了Python使用OS解析文件路徑、判斷文件、目錄等相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Python標準庫之sqlite3使用實例,本文講解了創(chuàng)建數(shù)據(jù)庫、插入數(shù)據(jù)、查詢數(shù)據(jù)、更新與刪除數(shù)據(jù)操作實例,需要的朋友可以參考下2014-11-11
Python中文件操作可以通過open函數(shù)，這的確很像C語言中的fopen。通過open函數(shù)獲取一個file object，然后調(diào)用read()，write()等方法對文件進行讀寫操作。2008-09-09
Python大數(shù)據(jù)之網(wǎng)絡(luò)爬蟲的post請求、get請求區(qū)別實例分析
這篇文章主要介紹了Python大數(shù)據(jù)之網(wǎng)絡(luò)爬蟲的post請求、get請求區(qū)別,結(jié)合具體實例形式分析了Python網(wǎng)頁爬蟲post請求與get請求相關(guān)使用技巧,需要的朋友可以參考下2019-11-11