SpringBoot+Jwt+Vue的前后端分离后台管理系统

项目来源：
视频：手把手教你开发SpringBoot+Jwt+Vue的前后端分离后台管理系统
开发SpringBoot+Jwt+Vue的前后端分离后台管理系统VueAdmin - 后端笔记
开发SpringBoot+Jwt+Vue的前后端分离后台管理系统VueAdmin - 前端笔记

用了总共不到一周的时间，跟着视频的讲解一步一步把项目实现，从中收获很多知识，因此想要总结记录下以备后用。首先这个项目需要较高的前后端基础，vue、springboot能基本看明白代码在干什么。

1.Mybatis-Plus的代码生成器
配置之后可以一键生成entity、service、mapper等接口和实现类。
代码生成器（旧）
Mybatis-Plus现在出新的代码生成器了，条件是mybatis-plus-generator >= 3.5.1

2.全局异常处理
通过使用**@ControllerAdvice**来进行统一异常处理，@ExceptionHandler(value = RuntimeException.class)来指定捕获的Exception各个类型异常，这个异常的处理是全局的，所有类似的异常都会跑到这个地方处理。

3.整合Spring Security
学习Spring Security也是我起初想要做这个项目的目的。
Spring Security 工作原理概览
并能根据需求，在过滤器链中添加自己的过滤器
Spring Security 实战干货：必须掌握的一些内置 Filter
解决授权问题，相应的权限注解需知道。权限的获取涉及多张表的查询，因此需要缓存，权限更新后缓存也需要改变。解决权限问题是这个项目的核心点。

4.JWT
JWT是什么？SpringBoot整合JWT
如何编写jwtconfig类，与Security整合在一起

5.google的验证码生成器
验证码放在了redis中，使用一个随机字符串作为key，并传送到前端，前端再把随机字符串和用户输入的验证码提交上来，这样我们就可以通过随机字符串获取到保存的验证码和用户的验证码进行比较了是否正确了。

 
            com.github.axet
            kaptcha
            0.0.9

前端菜鸡，感觉学到了好多
1.vue ui 命令，可以新建vue项目，可视化操作很方便。

2.自定义全局axios拦截器
那么如果接口请求失败，我们是需要弹窗显示错误的，比如验证码错误，用户名或密码不正确等，所有的接口调用都会有这个情况，所以做个拦截器，对返回的结果进行分析，如果是异常就直接弹窗显示错误，这样我们就省得每个接口都写一遍了。

import axios from "axios";
import Element from 'element-ui'
import router from "./router";
axios.defaults.baseURL = "http://localhost:8081"
const request = axios.create({
   timeout: 5000,
   headers: {
      'Content-Type': 'application/json; charset=utf-8'
   }
})
request.interceptors.request.use(config => {
   config.headers['Authorization'] = localStorage.getItem("token") // 请求头带上token
   return config
})
request.interceptors.response.use(response => {
      let res = response.data;
      console.log("response")
      console.log(res)
      if (res.code === 200) {
         return response
      } else {
         Element.Message.error(res.msg? res.msg : '系统异常！', {duration: 3 * 1000})
         return Promise.reject(response.data.msg)
      }
   },
   error => {
      console.log(error)
      if(error.response.data) {
         error.message = error.response.data.msg
      }
      if(error.response.status === 401) {
         router.push("/login")
      }
      Element.Message.error(error.message, {duration: 3 * 1000})
      return Promise.reject(error)
   }
)
export default request

3.动态导航菜单（路由）
在实际场景中我们写死，因为菜单是需要根据登录用户的权限动态显示菜单的，也就是用户看到的菜单栏可能是不一样的，这些数据需要去后端访问获取。这也是本项目设计的核心

4.按钮权限的控制
这里用到了Vue.mixin。mixin的作用是多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用，在已有的组件数据和方法进行了扩充。引入mixin分全局引用和局部引用。

5.vuex的使用