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

本文教大家如何使用Vue admin templateDjango快速进行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。

安装

以下安装方式为本地开发的安装及启动方式:

线上部署的话,还是需要编译成静态文件,然后通过nginx进行访问,本文不介绍如果配置部署nginx,请自行百度。

更多高级的用法如下:

第一个页面

依赖安装并成功启动后,接下来我们就开始我们的第一个页面的开发了。

在src/views下面创建我们Vue的展示页面。

src/views/demo/index.vue的内容如下:

在src/router/index.js里面添加新页面对应的访问路由,添加注释的都是需要我们根据场景进行调整的:

到此一个简单的页面就创建完成了,通过 http://IP:Port/demo/index,就能访问到对应的页面信息了。

Django rest_framework_jwt 登录认证

需要安装的包:

配置获取验证令牌的URL

我们使用rest_framework_jwt中的JSONWebTokenAuthentication进行简单的登录验证。

在urls.py中进行如下配置:

请自行创建django的用户名密码。再此就不多介绍了。

通过以下命令验证是否成功:

通过Postman验证接口是否可正常访问,返回以下内容则为成功:

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

配置验证参数

我们配置完获取令牌的URL后,还需要配置认证方式,配置认证方式有全局生效的,也有局部生效的,下面分别介绍一下。

全局生效,即在settings添加对应的配置,如下:

局部生效,即在对应的接口下面进行配置,仅对这个接口生效,如下:

获取当前登陆的用户信息

Vue admin template配置登录

进行到这里,我们的后端就基本完事了,剩下的就是前端的配置了。

配置开发环境的跨域问题

在vue.config.js中的devServer里面加入以下内容:

注释mock,找到下面的代码,注释掉。

调整API请求

修改src/api/user.js为以下内容:

调整login函数

vue admin template是的登录是使用vuex来处理的,我们需调整src/store/modules/user.js下的login动作。

设置身份验证Header参数

在src/utils/requests.js文件中配置验证参数Authorization

修改请求状态码验证

修改Login页面,移除测试相关数据

文件位置:src/views/login/index.vue

删除关于用户名和密码无意义的验证。

删除自定义校验函数,搜索一下内容删除掉。

删除自定义外部引入函数,搜索一下内容删除。

在rules中移除validUsername和validatePassword的触发函数。

获取当前用户信息

修改src/store/modules/user.js里面的getInfo函数。

用户退出函数调整

修改src/store/modules/user.js里面的logout函数。

本文为原创文章,未经授权禁止转载本站文章。
原文出处:兰玉磊的个人博客
原文链接:https://www.fdevops.com/2020/09/09/vue-django-5171
版权:本文采用「署名-非商业性使用-相同方式共享 4.0 国际」知识共享许可协议进行许可。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论列表(1条)