本文教大家如何使用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 国际」知识共享许可协议进行许可。
![解决微信小程序 [Component] slot ““ is not found.](http://pic.xiahunao.cn/解决微信小程序 [Component] slot ““ is not found.)
