本文教大家如何使用
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。
安装
以下安装方式为本地开发的安装及启动方式:
# 克隆项目,以下命令二选一
git clone https://github.com/PanJiaChen/vue-admin-template.git
git clone https://gitee.com/panjiachen/vue-admin-template.git # 国内的,快,推荐
# 进入到项目目录
cd vue-admin-template
# 安装项目需要的依赖
npm install
# 启动开发环境
npm run dev
线上部署的话,还是需要编译成静态文件,然后通过nginx进行访问,本文不介绍如果配置部署nginx,请自行百度。
# 编译测试环境
npm run build:stage
# 编译线上环境
npm run build:prod
更多高级的用法如下:
# 预览
npm run preview
# 预览 + 静态资源分析
npm run preview -- --report
# 代码格式检查
npm run lint
# 代码格式检查并自动修复
npm run lint -- --fix
第一个页面
依赖安装并成功启动后,接下来我们就开始我们的第一个页面的开发了。
在src/views下面创建我们Vue的展示页面。
1. 在src/views下面创建一个存放新页面的目录,例如是src/views/demo。
2. 在src/views/demo下创建index.vue。
3. 在src/router/index.js下创建对应的访问路由。
src/views/demo/index.vue的内容如下:
<!-- HTML -->
<template>
<div>
<h1>Index</h1>
</div>
</template>
<!-- Vue -->
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<!-- CSS样式 -->
<style scoped>
</style>
在src/router/index.js里面添加新页面对应的访问路由,添加注释的都是需要我们根据场景进行调整的:
{
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 登录认证
需要安装的包:
pip install djangorestframework-jwt
pip install djangorestframework
配置获取验证令牌的URL
我们使用rest_framework_jwt中的JSONWebTokenAuthentication进行简单的登录验证。
在urls.py中进行如下配置:
from django.contrib import admin
from django.urls import path
from rest_framework_jwt.views import obtain_jwt_token
urlpatterns = [
path('admin/', admin.site.urls),
path("jwt-token", obtain_jwt_token), # 通过此接口获取包含用户名和密码的令牌
]
请自行创建django的用户名密码。再此就不多介绍了。
通过以下命令验证是否成功:
$ curl -X POST -d "username=lanyulei&password=lanyulei" http://127.0.0.1:8000/jwt-token/
通过Postman验证接口是否可正常访问,返回以下内容则为成功:
配置验证参数
我们配置完获取令牌的URL后,还需要配置认证方式,配置认证方式有全局生效的,也有局部生效的,下面分别介绍一下。
全局生效,即在settings添加对应的配置,如下:
REST_FRAMEWORK = {
# 全局配置JWT验证设置
'DEFAULT_AUTHENTICATION_CLASSES': (
'rest_framework_jwt.authentication.JSONWebTokenAuthentication',
),
# 身份认证
'DEFAULT_PERMISSION_CLASSES': (
'rest_framework.permissions.IsAuthenticated',
),
}
局部生效,即在对应的接口下面进行配置,仅对这个接口生效,如下:
from django.http import JsonResponse
from rest_framework.views import APIView
from rest_framework.permissions import IsAuthenticated
from rest_framework_jwt.authentication import JSONWebTokenAuthentication
class Testing(APIView):
authentication_classes = [JSONWebTokenAuthentication] # JWT验证
permission_classes = [IsAuthenticated] # 身份验证
def get(self, request, *args, **kwargs):
return JsonResponse({
"code": 200
})
获取当前登陆的用户信息
class UserInfo(APIView):
def get(self, request, *args, **kwargs):
res = {
"code": 20000,
"msg": "获取用户信息成功",
"data": []
}
try:
userInfo = list(User.objects.filter(username=request.user.username).values())
if len(userInfo) > 0:
userInfo = userInfo[0]
else:
userInfo = {}
res["data"] = userInfo
except Exception as e:
res["code"] = -1
res["msg"] = f"获取用户信息失败, {e}"
return JsonResponse(res)
Vue admin template配置登录
进行到这里,我们的后端就基本完事了,剩下的就是前端的配置了。
配置开发环境的跨域问题
在vue.config.js中的devServer里面加入以下内容:
proxy: {
// 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,找到下面的代码,注释掉。
// before: require('./mock/mock-server.js')
调整API请求
修改src/api/user.js为以下内容:
import request from '@/utils/request'
export function login(data) {
return request({
url: '/api/v1/jwt-token',
method: 'post',
data
})
}
export function getInfo() {
return request({
url: '/api/v1/userinfo',
method: 'get'
})
}
调整login函数
vue admin template是的登录是使用vuex来处理的,我们需调整src/store/modules/user.js下的login动作。
// user login
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((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
config.headers['X-Token'] = getToken()
将上面替换为如下:
config.headers['Authorization'] = 'JWT ' + getToken()
修改请求状态码验证
res.code !== 20000
替换为:
res.code !== 20000 && res.token === undefined
修改Login页面,移除测试相关数据
文件位置:src/views/login/index.vue
删除关于用户名和密码无意义的验证。
删除自定义校验函数,搜索一下内容删除掉。
const validateUsername = (rule, value, callback) => {
if (!validUsername(value)) {
callback(new Error('Please enter the correct user name'))
} else {
callback()
}
}
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error('The password can not be less than 6 digits'))
} else {
callback()
}
}
删除自定义外部引入函数,搜索一下内容删除。
import { validUsername } from '@/utils/validate'
在rules中移除validUsername和validatePassword的触发函数。
loginRules: {
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函数。
// get user info
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo().then(response => {
const { data } = response
if (!data) {
return reject('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函数。
// user logout
logout({ commit, state }) {
return new Promise((resolve, reject) => {
removeToken() // must remove token first
resetRouter()
commit('RESET_STATE')
resolve()
})
}
本文为原创文章,未经授权禁止转载本站文章。
原文出处:兰玉磊的个人博客
原文链接:https://www.fdevops.com/2020/09/09/vue-django-5171
版权:本文采用「署名-非商业性使用-相同方式共享 4.0 国际」知识共享许可协议进行许可。
评论列表(4条)
谢谢分析.学习学习
你好,按照流程操作后,后端api总是报错__init__() takes 1 positional argument but 2 were given,请问是啥情况呀~
@tod521:加群 @ 群主,或者加微信聊发下截图看下呢?
你好,请问下后端和前端都返回正常,但是没有跳转到系统内部是怎么回事