# rainbow_vue
## springboot+jwt+shiro+vue搭建的前端项目
### [项目后台地址](https://github.com/makePromise/rainbow_vue_java)
### 技术交流:QQ--1649471814
### 项目技术
#### 应用了vue全家桶 vue-cli3.0 +vuex axios vue-router elementUi。
### 项目部署
#### 1.首先安装node和vue的基本环境,自行上网百度。
#### 2.cd 到 rainbow_vue 更目录执行命令 npm install 然后npm run serve 命令运行,下方会出现项目的地址。
### 项目预览
![Image text](https://github.com/makePromise/rainbow_vue/blob/master/src/assets/index.png)
![Image text](https://github.com/makePromise/rainbow_vue/blob/master/src/assets/user.png)
### [更多图片](https://github.com/makePromise/rainbow_vue/tree/master/src/assets)
### 技术简单理解
#### 因为我是做后台的,所以前端学习的时候会配合后台理解一下,如果不对,请见谅。
#### 1.axios: 等同与后台的ajax 用于请求的发出。
#### 2.vuex: 你可以理解为你在系统内定义了一个唯一的变量,并且提供getset方法去更改,例如用户名之类的值,这就是vuex。
#### 3.vue-router: 前台的路由跳转,类似于后台的requestMapping.
#### 4.elementUi: 这个和舒服,不用自己写效果了,直接参考文档把需要的组件拉过来.
#### 4.vue-cli3.0: 快速构建前台项目的脚手架.
### 项目思路
![Image text](https://github.com/makePromise/rainbow_vue/blob/master/src/assets/jwt.jpg)
#### 1.首先输入用户名与密码进行登入,如果成功返回一个加密的JWT密匙(同时后台把密匙存储在redis),失败的话直接返回401错误(帐号或密码不正确)。
#### 2.以后访问都要在请求头上带上这个JWT密匙,后台鉴权重写了Shiro的入口过滤器JWTFilter(BasicHttpAuthenticationFilter),判断请求
#### Header里面是否包含Authorization字段,有就进行Shiro的Token登录认证授权(判断redis是否存在toekn密匙,不存在则失效,重新登陆),没有就无访问
### 动态路由和路由卫士
#### 路由卫士:请求发出如果是白名单直接放行,否则判断token,有token则正常登陆,请求菜单放行,否则去登陆页面。
![Image text](https://github.com/makePromise/rainbow_vue/blob/master/src/assets/router2.png)
#### 动态加载菜单: 利用递归把路由格式化,利用addRouters注册路由
![Image text](https://github.com/makePromise/rainbow_vue/blob/master/src/assets/router.png)
![Image text](https://github.com/makePromise/rainbow_vue/blob/master/src/assets/router3.png)
没有合适的资源?快使用搜索试试~ 我知道了~
springboot+shiro+jwt+vue全家桶+redis搭建的后台系统脚手架(前端部分).zip
共37个文件
vue:11个
png:10个
js:8个
需积分: 5 1 下载量 42 浏览量
2023-12-28
20:21:04
上传
评论
收藏 630KB ZIP 举报
温馨提示
springboot+shiro+jwt+vue全家桶+redis搭建的后台系统脚手架(前端部分)
资源推荐
资源详情
资源评论
收起资源包目录
springboot+shiro+jwt+vue全家桶+redis搭建的后台系统脚手架(前端部分).zip (37个子文件)
newfile
babel.config.js 73B
src
App.vue 423B
store
index.js 706B
assets
jwt.jpg 51KB
menu.png 63KB
logo.png 7KB
back.jpg 32KB
router2.png 35KB
router.png 37KB
router3.png 38KB
log.png 55KB
index.png 43KB
user.png 71KB
map.png 79KB
role.png 57KB
main.js 769B
utils
request.js 4KB
filter_utils.js 761B
menu.js 1KB
localStorage.js 312B
components
HelloWorld.vue 2KB
router
index.js 1KB
views
other
map
chinaMap.vue 3KB
worldMap.vue 0B
login.vue 2KB
layout.vue 5KB
system
role
role.vue 11KB
menu
menu.vue 15KB
user
user.vue 21KB
log
systemLog.vue 5KB
info.vue 4KB
package.json 734B
public
favicon.ico 4KB
index.html 559B
package-lock.json 391KB
.gitignore 214B
README.md 3KB
共 37 条
- 1
资源评论
Lei宝啊
- 粉丝: 1945
- 资源: 1331
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 基于matlab实现用有限元法计算电磁场的Matlab工具 .rar
- 基于matlab实现有限元算法 计算电磁场问题 边界条件包括第一类边界和第二类边界.rar
- 基于matlab实现用于计算不同车重下的电动汽车动力性和经济性.rar
- 基于matlab实现遗传算法求解多车场车辆路径问题 有多组算例可以用.rar
- 浏览器.apk
- 基于matlab实现是一个matlab中的power system 中搭建的一个模型
- 基于JSP毕业设计-教学管理系统(源代码+论文).zip
- 基于JSP毕业设计-家政管理系统-毕业设计.zip
- 基于Python实现淘宝商品评论采集(含逆向)源代码
- 基于matlab实现多目标进化算法NSGAⅡ&Matlab讲解.rar
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功