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": []
        }
        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()
  })
}