使用VbenAdmin实现前端登录

svbadmin学习日志

本学习日志是使用Springboot和Vue来搭建的后台管理系统：
演示地址：http://118.31.68.110:8081/index.html
账号：root
密码：123
所有代码可以在gitbub上找到，切换到相应分支即可。【代码传送门】

正篇

第一节 spring boot 模块化构建项目
第二节 整合mybatisplus完成用户增删改查
第三节 整合springsecurity实现基于RBAC的用户登录
第四节 springsecurity结合jwt实现前后端分离开发
第五节 使用ResponseBodyAdvice格式化接口输出
第六节 springboot结合redis实现缓存策略
第七节 springboot结合rabbitmq实现队列消息
第八节 springboot结合rabbitmq实现异步邮件发送
第九节 利用springboot的aop实现行为日志管理
第十节 利用Quartz实现数据库定时备份
第十一节 springboot配置log输出到本地文件
第十二节 使用flyway对数据库进行版本管理
第十三节 springboot配合VbenAdmin实现前端登录
第十四节 springboot配合VbenAdmin实现用户CURD
第十五节 基于RBAC的权限管理VbenAdmin前端实现
第十六节 springboot 打包vue代码实现前后端统一部署

番外

2.1 数据库设计原则
3.1 配置apifox自动获取登录的token
13.1 springboot 全局捕捉filter中的异常
14.1 springsecurity整合mybatisplus出现isEnable的问题和解决方案

---

前言

前十二节课基本上把后端结构搭建了一遍，当然还有很多知识点没涉及，不过我已经想去写前端界面，至于其他知识点，在实战中再慢慢学习。前端脚手架我选了一款叫Vben Admin的开箱即用框架。
官方地址：Vben Admin

---

一、初始化Vben

1. 克隆

这里可以参考官方文档来做，我这边先fork了https://github.com/vbenjs/vue-vben-admin，然后克隆到本地

 git clone git@github.com:billyshen26/svbadmin-vben.git

2. 安装依赖

然后执行yarn安装依赖，这也是官方推荐的，安装速度还是比较快的。比当年用npm install快的多啊

3.启动

yarn serve

启动也比较快，然后访问，一起顺利。

二、使用/login 接口进行登录

1.跨域

本地测试用的都是localhost，端口不一样后会引起跨域问题，导致请求不可达。这里需要修改下配置

VITE_PROXY = [["/api","http://localhost:8080/api"],
VITE_GLOB_API_URL=/api

2.请求接口/api/login

这里简单改了下返回结构，url等，为了和vben脚手架匹配。

3.请求接口/api/users/getUserInfo

调用完login接口之后，紧接着又调用了getUserInfo，这种设计是比较好的。而且getUserInfo每次刷新页面都会调用，这样设计可以这么理解：当某个已登录用户权限有问题时，管理员对其修正权限后，该用户不用登出再登录直接刷新页面就可以获得到新的权限。
看下结果：
我们使用admin/123 登录后，已经获得到数据库中的名称了

---

总结

1. 这节对之前的spring security的部分内容做了些改动，可以对UsernamePasswordAuthenticationToken做更深入的了解
2. login 和getUserInfo 的设计还是比较普遍，大家得理解这种设计思路

---

问题

1. No content to map due to end-of-input
   
   如果post中body里没有任何数据就会报这个错，而这有可能是跨域问题导致的。

---

代码地址

代码
前端代码改动不大，这里只改了个代理，和请求路径加了users，所以这里的代码还是java后端代码

---

参考文档：