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。
以下安装方式为本地开发的安装及启动方式：
# 克隆项目，以下命令二选一
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": []
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',
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 国际」知识共享许可协议进行许可。
