django 套vue 模板_Vue admin template + Django 快速进行Web开发
本文教大家如何使用Vue admin template和Django快速進(jìn)行Web開發(fā)，旨在幫助我們使用現(xiàn)有的工具、框架及開源UI，讓我們?cè)诨A(chǔ)較為薄弱的情況下，能進(jìn)行Web開發(fā)。本文不會(huì)介紹過多的原理，實(shí)踐為主。
Vue admin template的簡(jiǎn)單使用
Vue admin template是PanJiaChen開源的UI腳手架，通過它我們可以快速開發(fā)我們的系統(tǒng)，不必在考慮一個(gè)通用功能的封裝問題。
Vue admin template是Vue element admin的一個(gè)純凈版本，Vue element admin繼承了更多的功能，但是冗余的東西也比較多，因?yàn)椴煌扑]直接使用Vue element admin，建議使用Vue admin template。
安裝
以下安裝方式為本地開發(fā)的安裝及啟動(dòng)方式：
1
2
3
4
5
6
7
8
9
10
11
12# 克隆項(xiàng)目，以下命令二選一
gitclonehttps://github.com/PanJiaChen/vue-admin-template.git
gitclonehttps://gitee.com/panjiachen/vue-admin-template.git # 國內(nèi)的，快，推薦
# 進(jìn)入到項(xiàng)目目錄
cdvue-admin-template
# 安裝項(xiàng)目需要的依賴
npminstall
# 啟動(dòng)開發(fā)環(huán)境
npmrundev
線上部署的話，還是需要編譯成靜態(tài)文件，然后通過nginx進(jìn)行訪問，本文不介紹如果配置部署nginx，請(qǐng)自行百度。
1
2
3
4
5# 編譯測(cè)試環(huán)境
npmrunbuild:stage
# 編譯線上環(huán)境
npmrunbuild:prod
更多高級(jí)的用法如下：
1
2
3
4
5
6
7
8
9
10
11# 預(yù)覽
npmrunpreview
# 預(yù)覽 + 靜態(tài)資源分析
npmrunpreview----report
# 代碼格式檢查
npmrunlint
# 代碼格式檢查并自動(dòng)修復(fù)
npmrunlint----fix
第一個(gè)頁面
依賴安裝并成功啟動(dòng)后，接下來我們就開始我們的第一個(gè)頁面的開發(fā)了。
在src/views下面創(chuàng)建我們Vue的展示頁面。
1
2
31.在src/views下面創(chuàng)建一個(gè)存放新頁面的目錄，例如是src/views/demo。
2.在src/views/demo下創(chuàng)建index.vue。
3.在src/router/index.js下創(chuàng)建對(duì)應(yīng)的訪問路由。
src/views/demo/index.vue的內(nèi)容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Index
exportdefault{
data(){
return{
}
},
methods:{
}
}
在src/router/index.js里面添加新頁面對(duì)應(yīng)的訪問路由，添加注釋的都是需要我們根據(jù)場(chǎng)景進(jìn)行調(diào)整的：
1
2
3
4
5
6
7
8
9
10{
path:'/demo',// 訪問的路由地址
component:Layout,
children:[{
path:'index',// 訪問的路由地址
name:'DemoIndex',// 路由名稱
component:()=>import('@/views/demo/index'),// 對(duì)應(yīng)的展示頁面地址，@表示src
meta:{title:'Demo',icon:'dashboard'}// title表示菜單展示的名稱，icon表示圖標(biāo)
}]
}
到此一個(gè)簡(jiǎn)單的頁面就創(chuàng)建完成了，通過 http://IP:Port/demo/index，就能訪問到對(duì)應(yīng)的頁面信息了。
Django rest_framework_jwt 登錄認(rèn)證
需要安裝的包：
1
2pipinstalldjangorestframework-jwt
pipinstalldjangorestframework
配置獲取驗(yàn)證令牌的URL
我們使用rest_framework_jwt中的JSONWebTokenAuthentication進(jìn)行簡(jiǎn)單的登錄驗(yàn)證。
在urls.py中進(jìn)行如下配置：
1
2
3
4
5
6
7
8fromdjango.contribimportadmin
fromdjango.urlsimportpath
fromrest_framework_jwt.viewsimportobtain_jwt_token
urlpatterns=[
path('admin/',admin.site.urls),
path("jwt-token",obtain_jwt_token),# 通過此接口獲取包含用戶名和密碼的令牌
]
請(qǐng)自行創(chuàng)建
通過以下命令驗(yàn)證是否成功：
1$curl-XPOST-d"username=lanyulei&password=lanyulei"http://127.0.0.1:8000/jwt-token/
通過Postman驗(yàn)證接口是否可正常訪問，返回以下內(nèi)容則為成功：
配置驗(yàn)證參數(shù)
我們配置完獲取令牌的URL后，還需要配置認(rèn)證方式，配置認(rèn)證方式有全局生效的，也有局部生效的，下面分別介紹一下。
全局生效，即在settings添加對(duì)應(yīng)的配置，如下：
1
2
3
4
5
6
7
8
9
10REST_FRAMEWORK={
# 全局配置JWT驗(yàn)證設(shè)置
'DEFAULT_AUTHENTICATION_CLASSES':(
'rest_framework_jwt.authentication.JSONWebTokenAuthentication',
),
# 身份認(rèn)證
'DEFAULT_PERMISSION_CLASSES':(
'rest_framework.permissions.IsAuthenticated',
),
}
局部生效，即在對(duì)應(yīng)的接口下面進(jìn)行配置，僅對(duì)這個(gè)接口生效，如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15fromdjango.httpimportJsonResponse
fromrest_framework.viewsimportAPIView
fromrest_framework.permissionsimportIsAuthenticated
fromrest_framework_jwt.authenticationimportJSONWebTokenAuthentication
classTesting(APIView):
authentication_classes=[JSONWebTokenAuthentication]# JWT驗(yàn)證
permission_classes=[IsAuthenticated]# 身份驗(yàn)證
defget(self,request,*args,**kwargs):
returnJsonResponse({
"code":200
})
獲取當(dāng)前登陸的用戶信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19classUserInfo(APIView):
defget(self,request,*args,**kwargs):
res={
"code":20000,
"msg":"獲取用戶信息成功",
"data":[]
}
try:
userInfo=list(User.objects.filter(username=request.user.username).values())
iflen(userInfo)>0:
userInfo=userInfo[0]
else:
userInfo={}
res["data"]=userInfo
exceptExceptionase:
res["code"]=-1
res["msg"]=f"獲取用戶信息失敗, {e}"
returnJsonResponse(res)
Vue admin template配置登錄
進(jìn)行到這里，我們的后端就基本完事了，剩下的就是前端的配置了。
配置開發(fā)環(huán)境的跨域問題
在vue.config.js中的devServer里面加入以下內(nèi)容：
1
2
3
4
5
6
7
8
9
10
11
12proxy:{
// change xxx-api/login => mock/login
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]:{
// target: `http://127.0.0.1:${port}`,
target:`http://localhost:8000`,
changeOrigin:true,
pathRewrite:{
['^'+process.env.VUE_APP_BASE_API]:''
}
}
}
注釋mock，找到下面的代碼，注釋掉。
1// before: require('./mock/mock-server.js')
調(diào)整API請(qǐng)求
修改src/api/user.js為以下內(nèi)容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16importrequestfrom'@/utils/request'
exportfunctionlogin(data){
returnrequest({
url:'/api/v1/jwt-token',
method:'post',
data
})
}
exportfunctiongetInfo(){
returnrequest({
url:'/api/v1/userinfo',
method:'get'
})
}
調(diào)整login函數(shù)
vue admin template是的登錄是使用vuex來處理的，我們需調(diào)整src/store/modules/user.js下的login動(dòng)作。
1
2
3
4
5
6
7
8
9
10
11
12
13// user login
login({commit},userInfo){
const{username,password}=userInfo
returnnewPromise((resolve,reject)=>{
login({username:username.trim(),password:password}).then(response=>{
commit('SET_TOKEN',response.token)
setToken(response.token)
resolve()
}).catch(error=>{
reject(error)
})
})
},
設(shè)置身份驗(yàn)證Header參數(shù)
在src/utils/requests.js文件中配置驗(yàn)證參數(shù)Authorization
1
2
3config.headers['X-Token']=getToken()
將上面替換為如下：
config.headers['Authorization']='JWT '+getToken()
修改請(qǐng)求狀態(tài)碼驗(yàn)證
1
2
3res.code!==20000
替換為：
res.code!==20000&&res.token===undefined
修改Login頁面，移除測(cè)試相關(guān)數(shù)據(jù)
文件位置：src/views/login/index.vue
刪除關(guān)于用戶名和密碼無意義的驗(yàn)證。
刪除自定義校驗(yàn)函數(shù)，搜索一下內(nèi)容刪除掉。
1
2
3
4
5
6
7
8
9
10
11
12
13
14constvalidateUsername=(rule,value,callback)=>{
if(!validUsername(value)){
callback(newError('Please enter the correct user name'))
}else{
callback()
}
}
constvalidatePassword=(rule,value,callback)=>{
if(value.length<6){
callback(newError('The password can not be less than 6 digits'))
}else{
callback()
}
}
刪除自定義外部引入函數(shù)，搜索一下內(nèi)容刪除。
1import{validUsername}from'@/utils/validate'
在rules中移除validUsername和validatePassword的觸發(fā)函數(shù)。
1
2
3
4
5
6
7
8
9loginRules:{
username:[{required:true,trigger:'blur',validator:validateUsername}],
password:[{required:true,trigger:'blur',validator:validatePassword}]
},
替換為：
loginRules:{
username:[{required:true,message:'請(qǐng)輸入用戶名',trigger:'blur'}],
password:[{required:true,message:'請(qǐng)輸入密碼',trigger:'blur'}]
},
獲取當(dāng)前用戶信息
修改src/store/modules/user.js里面的getInfo函數(shù)。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20// get user info
getInfo({commit,state}){
returnnewPromise((resolve,reject)=>{
getInfo().then(response=>{
const{data}=response
if(!data){
returnreject('Verification failed, please Login again.')
}
const{username,avatar}=data
commit('SET_NAME',username)
commit('SET_AVATAR',avatar)
resolve(data)
}).catch(error=>{
reject(error)
})
})
},
用戶退出函數(shù)調(diào)整
修改src/store/modules/user.js里面的logout函數(shù)。
1
2
3
4
5
6
7
8
9// user logout
logout({commit,state}){
returnnewPromise((resolve,reject)=>{
removeToken()// must remove??token??first
resetRouter()
commit('RESET_STATE')
resolve()
})
}
本文為原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載本站文章。
原文出處：蘭玉磊的個(gè)人博客
原文鏈接：https://www.fdevops.com/2020/09/09/vue-django-5171
版權(quán)：本文采用「署名-非商業(yè)性使用-相同方式共享 4.0 國際」知識(shí)共享許可協(xié)議進(jìn)行許可。
總結(jié)
以上是生活随笔為你收集整理的django 套vue 模板_Vue admin template + Django 快速进行Web开发的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： laravel mysql视图_php-
- 下一篇： vue理由设置_在你的下一个Web应用中