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验证接口是否可正常访问,返回以下内容则为成功:

Vue admin template + Django 快速进行Web开发

配置验证参数

我们配置完获取令牌的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 国际」知识共享许可协议进行许可。

(22)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2020年9月9日 16:23
下一篇 2020年9月12日 09:27

相关推荐

发表评论

您的电子邮箱地址不会被公开。

评论列表(3条)

  • wennjoe
    wennjoe 2020年9月16日 09:58

    谢谢分析.学习学习

  • tod521
    tod521 2022年1月5日 16:23

    你好,按照流程操作后,后端api总是报错__init__() takes 1 positional argument but 2 were given,请问是啥情况呀~

    • 兰玉磊
      兰玉磊 2022年1月10日 11:50

      @tod521加群 @ 群主,或者加微信聊发下截图看下呢?

    本人在 B 站正在录制一套 Client-Go 的教程视频,免费观看。B 站搜索 ”兰三石“ 即可。欢迎并感谢一键三连。