微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用VbenAdmin实现前端登录

svbadmin学习日志

本学习日志所有代码可以在gitbub上找到,切换到相应分支即可。【代码传送门

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


前言

前十二节课基本上把后端结构搭建了一遍,当然还有很多知识点没涉及,不过我已经想去写前端界面,至于其他知识点,在实战中再慢慢学习。前端脚手架我选了一款叫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后端代码


参考文档:

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐