django 套vue 模板_Vue admin template + Django 快速进行Web开发
本文教大家如何使用Vue admin template和Django快速進行Web開發，旨在幫助我們使用現有的工具、框架及開源UI，讓我們在基礎較為薄弱的情況下，能進行Web開發。本文不會介紹過多的原理，實踐為主。
Vue admin template的簡單使用
Vue admin template是PanJiaChen開源的UI腳手架，通過它我們可以快速開發我們的系統，不必在考慮一個通用功能的封裝問題。
Vue admin template是Vue element admin的一個純凈版本，Vue element admin繼承了更多的功能，但是冗余的東西也比較多，因為不推薦直接使用Vue element admin，建議使用Vue admin template。
安裝
以下安裝方式為本地開發的安裝及啟動方式：
1
2
3
4
5
6
7
8
9
10
11
12# 克隆項目，以下命令二選一
gitclonehttps://github.com/PanJiaChen/vue-admin-template.git
gitclonehttps://gitee.com/panjiachen/vue-admin-template.git # 國內的，快，推薦
# 進入到項目目錄
cdvue-admin-template
# 安裝項目需要的依賴
npminstall
# 啟動開發環境
npmrundev
線上部署的話，還是需要編譯成靜態文件，然后通過nginx進行訪問，本文不介紹如果配置部署nginx，請自行百度。
1
2
3
4
5# 編譯測試環境
npmrunbuild:stage
# 編譯線上環境
npmrunbuild:prod
更多高級的用法如下：
1
2
3
4
5
6
7
8
9
10
11# 預覽
npmrunpreview
# 預覽 + 靜態資源分析
npmrunpreview----report
# 代碼格式檢查
npmrunlint
# 代碼格式檢查并自動修復
npmrunlint----fix
第一個頁面
依賴安裝并成功啟動后，接下來我們就開始我們的第一個頁面的開發了。
在src/views下面創建我們Vue的展示頁面。
1
2
31.在src/views下面創建一個存放新頁面的目錄，例如是src/views/demo。
2.在src/views/demo下創建index.vue。
3.在src/router/index.js下創建對應的訪問路由。
src/views/demo/index.vue的內容如下：
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里面添加新頁面對應的訪問路由，添加注釋的都是需要我們根據場景進行調整的：
1
2
3
4
5
6
7
8
9
10{
path:'/demo',// 訪問的路由地址
component:Layout,
children:[{
path:'index',// 訪問的路由地址
name:'DemoIndex',// 路由名稱
component:()=>import('@/views/demo/index'),// 對應的展示頁面地址，@表示src
meta:{title:'Demo',icon:'dashboard'}// title表示菜單展示的名稱，icon表示圖標
}]
}
到此一個簡單的頁面就創建完成了，通過 http://IP:Port/demo/index，就能訪問到對應的頁面信息了。
Django rest_framework_jwt 登錄認證
需要安裝的包：
1
2pipinstalldjangorestframework-jwt
pipinstalldjangorestframework
配置獲取驗證令牌的URL
我們使用rest_framework_jwt中的JSONWebTokenAuthentication進行簡單的登錄驗證。
在urls.py中進行如下配置：
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),# 通過此接口獲取包含用戶名和密碼的令牌
]
請自行創建
通過以下命令驗證是否成功：
1$curl-XPOST-d"username=lanyulei&password=lanyulei"http://127.0.0.1:8000/jwt-token/
通過Postman驗證接口是否可正常訪問，返回以下內容則為成功：
配置驗證參數
我們配置完獲取令牌的URL后，還需要配置認證方式，配置認證方式有全局生效的，也有局部生效的，下面分別介紹一下。
全局生效，即在settings添加對應的配置，如下：
1
2
3
4
5
6
7
8
9
10REST_FRAMEWORK={
# 全局配置JWT驗證設置
'DEFAULT_AUTHENTICATION_CLASSES':(
'rest_framework_jwt.authentication.JSONWebTokenAuthentication',
),
# 身份認證
'DEFAULT_PERMISSION_CLASSES':(
'rest_framework.permissions.IsAuthenticated',
),
}
局部生效，即在對應的接口下面進行配置，僅對這個接口生效，如下：
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驗證
permission_classes=[IsAuthenticated]# 身份驗證
defget(self,request,*args,**kwargs):
returnJsonResponse({
"code":200
})
獲取當前登陸的用戶信息
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配置登錄
進行到這里，我們的后端就基本完事了，剩下的就是前端的配置了。
配置開發環境的跨域問題
在vue.config.js中的devServer里面加入以下內容：
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')
調整API請求
修改src/api/user.js為以下內容：
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'
})
}
調整login函數
vue admin template是的登錄是使用vuex來處理的，我們需調整src/store/modules/user.js下的login動作。
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)
})
})
},
設置身份驗證Header參數
在src/utils/requests.js文件中配置驗證參數Authorization
1
2
3config.headers['X-Token']=getToken()
將上面替換為如下：
config.headers['Authorization']='JWT '+getToken()
修改請求狀態碼驗證
1
2
3res.code!==20000
替換為：
res.code!==20000&&res.token===undefined
修改Login頁面，移除測試相關數據
文件位置：src/views/login/index.vue
刪除關于用戶名和密碼無意義的驗證。
刪除自定義校驗函數，搜索一下內容刪除掉。
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()
}
}
刪除自定義外部引入函數，搜索一下內容刪除。
1import{validUsername}from'@/utils/validate'
在rules中移除validUsername和validatePassword的觸發函數。
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:'請輸入用戶名',trigger:'blur'}],
password:[{required:true,message:'請輸入密碼',trigger:'blur'}]
},
獲取當前用戶信息
修改src/store/modules/user.js里面的getInfo函數。
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)
})
})
},
用戶退出函數調整
修改src/store/modules/user.js里面的logout函數。
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()
})
}
本文為原創文章，未經授權禁止轉載本站文章。
原文出處：蘭玉磊的個人博客
原文鏈接：https://www.fdevops.com/2020/09/09/vue-django-5171
版權：本文采用「署名-非商業性使用-相同方式共享 4.0 國際」知識共享許可協議進行許可。
總結
以上是生活随笔為你收集整理的django 套vue 模板_Vue admin template + Django 快速进行Web开发的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： laravel mysql视图_php-
- 下一篇： 强化学习原理与python实现原理pdf