Java 大牛带你 4 小时开发一个 SpringBoot+vue 前后端分离博客项目
mysql
jdk 8
maven3.3.9
新建好的项目结构如下，SpringBoot 版本使用的目前最新的 2.2.6.RELEASE 版本
pom 的 jar 包导入如下：
devtools：项目的热加载重启插件
lombok：简化代码的工具
3、整合 mybatis plus
================
接下来，我们来整合 mybatis plus，让项目能完成基本的增删改查操作。步骤很简单
第一步：导入 jar 包
pom 中导入 mybatis plus 的 jar 包，因为后面会涉及到代码生成，所以我们还需要导入页面模板引擎，这里我们用的是 freemarker。
第二步：然后去写配置文件
上面除了配置数据库的信息，还配置了 myabtis plus 的 mapper 的 xml 文件的扫描路径，这一步不要忘记了。?第三步：开启 mapper 接口扫描，添加分页插件
新建一个包：通过 @mapperScan 注解指定要变成实现类的接口所在的包，然后包下面的所有接口在编译之后都会生成相应的实现类。PaginationInterceptor 是一个分页插件。
com.markerhub.config.MybatisPlusConfig
第四步：代码生成
如果你没再用其他插件，那么现在就已经可以使用 mybatis plus 了，官方给我们提供了一个代码生成器，然后我写上自己的参数之后，就可以直接根据数据库表信息生成 entity、service、mapper 等接口和实现类。
com.markerhub.CodeGenerator
因为代码比较长，就不贴出来了，在代码仓库上看哈！
首先我在数据库中新建了一个 user 表：
运行 CodeGenerator 的 main 方法，输入表名：m_user，生成结果如下：
得到：
简洁！方便！经过上面的步骤，基本上我们已经把 mybatis plus 框架集成到项目中了。
ps：额，注意一下 m_blog 表的代码也生成一下哈。
在 UserController 中写个测试：
访问：
http://localhost:8080/user/1 获得结果如下，整合成功！
3、统一结果封装
========
这里我们用到了一个 Result 的类，这个用于我们的异步统一返回的结果封装。一般来说，结果里面有几个要素必要的
是否成功，可用 code 表示（如 200 表示成功，400 表示异常）
结果消息
结果数据
所以可得到封装如下：
com.markerhub.common.lang.Result
4、整合 shiro+jwt，并会话共享
===================
考虑到后面可能需要做集群、负载均衡等，所以就需要会话共享，而 shiro 的缓存和会话信息，我们一般考虑使用 redis 来存储这些数据，所以，我们不仅仅需要整合 shiro，同时也需要整合 redis。在开源的项目中，我们找到了一个 starter 可以快速整合 shiro-redis，配置简单，这里也推荐大家使用。
而因为我们需要做的是前后端分离项目的骨架，所以一般我们会采用 token 或者 jwt 作为跨域身份验证解决方案。所以整合 shiro 的过程中，我们需要引入 jwt 的身份验证过程。
那么我们就开始整合：
我们使用一个
shiro-redis-spring-boot-starter 的 jar 包，具体教程可以看官方文档：
https://github.com/alexxiyang/shiro-redis/blob/master/docs/README.md#spring-boot-starter
第一步：导入 shiro-redis 的 starter 包：还有 jwt 的工具包，以及为了简化开发，我引入了 hutool 工具包。
第二步：编写配置：
ShiroConfig
===========
com.markerhub.config.ShiroConfig
上面 ShiroConfig，我们主要做了几件事情：
引入 RedisSessionDAO 和 RedisCacheManager，为了解决 shiro 的权限数据和会话信息能保存到 redis 中，实现会话共享。
重写了 SessionManager 和 DefaultWebSecurityManager，同时在 DefaultWebSecurityManager 中为了关闭 shiro 自带的 session 方式，我们需要设置为 false，这样用户就不再能通过 session 方式登录 shiro。后面将采用 jwt 凭证登录。
在 ShiroFilterChainDefinition 中，我们不再通过编码形式拦截 Controller 访问路径，而是所有的路由都需要经过 JwtFilter 这个过滤器，然后判断请求头中是否含有 jwt 的信息，有就登录，没有就跳过。跳过之后，有 Controller 中的 shiro 注解进行再次拦截，比如 @RequiresAuthentication，这样控制权限访问。
那么，接下来，我们聊聊 ShiroConfig 中出现的 AccountRealm，还有 JwtFilter。
AccountRealm
AccountRealm 是 shiro 进行登录或者权限校验的逻辑所在，算是核心了，我们需要重写 3 个方法，分别是
supports：为了让 realm 支持 jwt 的凭证校验
doGetAuthorizationInfo：权限校验
doGetAuthenticationInfo：登录认证校验
我们先来总体看看 AccountRealm 的代码，然后逐个分析：
com.markerhub.shiro.AccountRealm
其实主要就是 doGetAuthenticationInfo 登录认证这个方法，可以看到我们通过 jwt 获取到用户信息，判断用户的状态，最后异常就抛出对应的异常信息，否者封装成 SimpleAuthenticationInfo 返回给 shiro。接下来我们逐步分析里面出现的新类：
1、shiro 默认 supports 的是 UsernamePasswordToken，而我们现在采用了 jwt 的方式，所以这里我们自定义一个 JwtToken，来完成 shiro 的 supports 方法。
JwtToken
com.markerhub.shiro.JwtToken
2、JwtUtils 是个生成和校验 jwt 的工具类，其中有些 jwt 相关的密钥信息是从项目配置文件中配置的：
3、而在 AccountRealm 我们还用到了 AccountProfile，这是为了登录成功之后返回的一个用户信息的载体，
AccountProfile
==============
com.markerhub.shiro.AccountProfile
第三步，ok，基本的校验的路线完成之后，我们需要少量的基本信息配置：
第四步：另外，如果你项目有使用 spring-boot-devtools，需要添加一个配置文件，在 resources 目录下新建文件夹 META-INF，然后新建文件
spring-devtools.properties，这样热重启时候才不会报错。
resources/META-INF/spring-devtools.properties
JwtFilter
第五步：定义 jwt 的过滤器 JwtFilter。
这个过滤器是我们的重点，这里我们继承的是 Shiro 内置的 AuthenticatingFilter，一个可以内置了可以自动登录方法的的过滤器，有些同学继承
BasicHttpAuthenticationFilter 也是可以的。
我们需要重写几个方法：
createToken：实现登录，我们需要生成我们自定义支持的 JwtToken
onAccessDenied：拦截校验，当头部没有 Authorization 时候，我们直接通过，不需要自动登录；当带有的时候，首先我们校验 jwt 的有效性，没问题我们就直接执行 executeLogin 方法实现自动登录
onLoginFailure：登录异常时候进入的方法，我们直接把异常信息封装然后抛出
preHandle：拦截器的前置拦截，因为我们是前后端分析项目，项目中除了需要跨域全局配置之外，我们在拦截器中也需要提供跨域支持。这样，拦截器才不会在进入 Controller 之前就被限制了。
下面我们看看总体的代码：
com.markerhub.shiro.JwtFilter
那么到这里，我们的 shiro 就已经完成整合进来了，并且使用了 jwt 进行身份校验。
5、异常处理
======
有时候不可避免服务器报错的情况，如果不配置异常处理机制，就会默认返回 tomcat 或者 nginx 的 5XX 页面，对普通用户来说，不太友好，用户也不懂什么情况。这时候需要我们程序员设计返回一个友好简单的格式给前端。
处理办法如下：通过使用 @ControllerAdvice 来进行统一异常处理，@ExceptionHandler(value = RuntimeException.class)来指定捕获的 Exception 各个类型异常 ，这个异常的处理，是全局的，所有类似的异常，都会跑到这个地方处理。
com.markerhub.common.exception.GlobalExceptionHandler
步骤二、定义全局异常处理，@ControllerAdvice 表示定义全局控制器异常处理，@ExceptionHandler 表示针对性异常处理，可对每种异常针对性处理。
上面我们捕捉了几个异常：
ShiroException：shiro 抛出的异常，比如没有权限，用户登录异常
IllegalArgumentException：处理 Assert 的异常
MethodArgumentNotValidException：处理实体校验的异常
RuntimeException：捕捉其他异常
6、实体校验
======
当我们表单数据提交的时候，前端的校验我们可以使用一些类似于 jQuery Validate 等 js 插件实现，而后端我们可以使用 Hibernate validatior 来做校验。
我们使用 springboot 框架作为基础，那么就已经自动集成了 Hibernate validatior。
那么用起来啥样子的呢？
第一步：首先在实体的属性上添加对应的校验规则，比如：
第二步 ：这里我们使用 @Validated 注解方式，如果实体不符合要求，系统会抛出异常，那么我们的异常处理中就捕获到
MethodArgumentNotValidException。
com.markerhub.controller.UserController
7、跨域问题
======
因为是前后端分析，所以跨域问题是避免不了的，我们直接在后台进行全局跨域处理：
com.markerhub.config.CorsConfig
ok，因为我们系统开发的接口比较简单，所以我就不集成 swagger2 了，也比较简单而已。下面我们就直接进入我们的正题，进行编写登录接口。
8、登录接口开发
========
登录的逻辑其实很简答，只需要接受账号密码，然后把用户的 id 生成 jwt，返回给前段，为了后续的 jwt 的延期，所以我们把 jwt 放在 header 上。具体代码如下：
com.markerhub.controller.AccountController
接口测试：
9、博客接口开发
========
我们的骨架已经完成，接下来，我们就可以添加我们的业务接口了，下面我以一个简单的博客列表、博客详情页为例子开发：
com.markerhub.controller.BlogController
注意 @RequiresAuthentication 说明需要登录之后才能访问的接口，其他需要权限的接口可以添加 shiro 的相关注解。接口比较简单，我们就不多说了，基本增删改查而已。注意的是 edit 方法是需要登录才能操作的受限资源。
接口测试：
10、后端总结
=======
好了，一篇文章搞定一个基本骨架，好像有点赶，但是基本的东西这里已经有了。后面我们就要去开发我们的前端接口了。
项目代码和项目视频请转发+关注，然后私信回复我“项目”即可获得免费领取方式！
Vue 前端页面开发
=========
1、前言
====
接下来，我们来完成 vueblog 前端的部分功能。可能会使用的到技术如下：
vue
element-ui
axios
mavon-editor
markdown-it
github-markdown-css
本项目实践需要一点点 vue 的基础，希望你对 vue 的一些指令有所了解，这样我们讲解起来就简单多了哈。
2、项目演示
======
我们先来看下我们需要完成的项目长什么样子，考虑到很多同学的样式的掌握程度不够，所以我尽量使用了 element-ui 的原生组件的样式来完成整个博客的界面。不多说，直接上图：
3、环境准备
======
万丈高楼平地起，我们下面一步一步来完成，首先我们安装 vue 的环境，我实践的环境是 windows 10 哈。
1、首先我们上 node.js 官网(https://nodejs.org/zh-cn/)，下载最新的长期版本，直接运行安装完成之后，我们就已经具备了 node 和 npm 的环境了。
安装完成之后检查下版本信息：
2、接下来，我们安装 vue 的环境
4、新建项目
======
上面我们分别安装了淘宝 npm，cnpm 是为了提高我们安装依赖的速度。vue ui 是 @vue/cli3.0 增加一个可视化项目管理工具，可以运行项目、打包项目，检查等操作。对于初学者来说，可以少记一些命令，哈哈。3、创建 vueblog-vue 项目
运行 vue ui 之后，会为我们打开一个 http://localhost:8080 的页面：
然后切换到【创建】，注意创建的目录最好是和你运行 vue ui 同一级。这样方便管理和切换。然后点击按钮【在此创建新项目】
下一步中，项目文件夹中输入项目名称“vueblog-vue”，其他不用改，点击下一步，选择【手动】，再点击下一步，如图点击按钮，勾选上路由 Router、状态管理 Vuex，去掉 js 的校验。
下一步中，也选上【Use history mode for router】，点击创建项目，然后弹窗中选择按钮【创建项目，不保存预设】，就进入项目创建啦。
稍等片刻之后，项目就初始化完成了。上面的步骤中，我们创建了一个 vue 项目，并且安装了 Router、Vuex。这样我们后面就可以直接使用。
我们来看下整个 vueblog-vue 的项目结构
5、安装 element-ui
==============
接下来我们引入 element-ui 组件（https://element.eleme.cn），这样我们就可以获得好看的 vue 组件，开发好看的博客界面。
命令很简单：
然后我们打开项目 src 目录下的 main.js，引入 element-ui 依赖。
这样我们就可以愉快得在官网上选择组件复制代码到我们项目中直接使用啦。
6、安装 axios
=========
接下来，我们来安装 axios（http://www.axios-js.com/），axios 是一个基于 promise 的 HTTP 库，这样我们进行前后端对接的时候，使用这个工具可以提高我们的开发效率。
安装命令：
然后同样我们在 main.js 中全局引入 axios。
组件中，我们就可以通过 this.$axios.get()来发起我们的请求了哈。
7、页面路由
======
接下来，我们先定义好路由和页面，因为我们只是做一个简单的博客项目，页面比较少，所以我们可以直接先定义好，然后在慢慢开发，这样需要用到链接的地方我们就可以直接可以使用：
我们在 views 文件夹下定义几个页面：
BlogDetail.vue（博客详情页）
BlogEdit.vue（编辑博客）
Blogs.vue（博客列表）
Login.vue（登录页面）
然后再路由中心配置：
router\index.js
接下来我们去开发我们的页面。其中，带有 meta：requireAuth: true 说明是需要登录字后才能访问的受限资源，后面我们路由权限拦截时候会用到。
8、登录页面
======
接下来，我们来搞一个登陆页面，表单组件我们直接在 element-ui 的官网上找就行了，登陆页面就两个输入框和一个提交按钮，相对简单，然后我们最好带页面的 js 校验。emmm，我直接贴代码了~~
views/Login.vue
找不到啥好的方式讲解了，之后先贴代码，然后再讲解。上面代码中，其实主要做了两件事情
1、表单校验
2、登录按钮的点击登录事件
表单校验规则还好，比较固定写法，查一下 element-ui 的组件就知道了，我们来分析一下发起登录之后的代码：
还未添加个人签名 2021.11.08 加入
还未添加个人简介
评论