Java大牛带你4小时开发一个SpringBoot+vue前后端分离博客项目

本文介绍了如何使用Java SpringBoot、Mybatis Plus、Shiro、JWT进行后端接口开发,包括数据库操作、权限管理、异常处理、实体校验等。前端部分则讲解了Vue页面开发,涉及Vue、Element-UI、Axios的使用,以及登录、博客列表、博客详情等页面的实现。项目采用前后端分离架构,实现了登录验证、跨域处理和路由权限拦截等功能。
摘要由CSDN通过智能技术生成

 

Java后端接口开发

1、前言

从零开始搭建一个项目骨架,最好选择合适,熟悉的技术,并且在未来易拓展,适合微服务化体系等。所以一般以Springboot作为我们的框架基础,这是离不开的了。

然后数据层,我们常用的是Mybatis,易上手,方便维护。但是单表操作比较困难,特别是添加字段或减少字段的时候,比较繁琐,所以这里我推荐使用Mybatis Plus(https://mp.baomidou.com/),为简化开发而生,只需简单配置,即可快速进行 CRUD 操作,从而节省大量时间。

作为一个项目骨架,权限也是我们不能忽略的,Shiro配置简单,使用也简单,所以使用Shiro作为我们的的权限。

考虑到项目可能需要部署多台,这时候我们的会话等信息需要共享,Redis是现在主流的缓存中间件,也适合我们的项目。

然后因为前后端分离,所以我们使用jwt作为我们用户身份凭证。

ok,我们现在就开始搭建我们的项目脚手架!

技术栈:

  • SpringBoot
  • mybatis plus
  • shiro
  • lombok
  • redis
  • hibernate validatior
  • jwt

2、新建Springboot项目

这里,我们使用IDEA来开发我们项目,新建步骤比较简单,我们就不截图了。

开发工具与环境:

  • idea
  • mysql
  • jdk 8
  • maven3.3.9

新建好的项目结构如下,SpringBoot版本使用的目前最新的2.2.6.RELEASE版本

Java大牛带你4小时开发一个SpringBoot+vue前后端分离博客项目

 

pom的jar包导入如下:

Java大牛带你4小时开发一个SpringBoot+vue前后端分离博客项目

 

  • devtools:项目的热加载重启插件
  • lombok:简化代码的工具

3、整合mybatis plus

接下来,我们来整合mybatis plus,让项目能完成基本的增删改查操作。步骤很简单

第一步:导入jar包

pom中导入mybatis plus的jar包,因为后面会涉及到代码生成,所以我们还需要导入页面模板引擎,这里我们用的是freemarker。

Java大牛带你4小时开发一个SpringBoot+vue前后端分离博客项目

 

第二步:然后去写配置文件

Java大牛带你4小时开发一个SpringBoot+vue前后端分离博客项目

 

上面除了配置数据库的信息,还配置了myabtis plus的mapper的xml文件的扫描路径,这一步不要忘记了。 第三步:开启mapper接口扫描,添加分页插件

新建一个包:通过@mapperScan注解指定要变成实现类的接口所在的包,然后包下面的所有接口在编译之后都会生成相应的实现类。PaginationInterceptor是一个分页插件。

  • com.markerhub.config.MybatisPlusConfig

Java大牛带你4小时开发一个SpringBoot+vue前后端分离博客项目

 

第四步:代码生成

如果你没再用其他插件,那么现在就已经可以使用mybatis plus了,官方给我们提供了一个代码生成器,然后我写上自己的参数之后,就可以直接根据数据库表信息生成entity、service、mapper等接口和实现类。

  • com.markerhub.CodeGenerator

因为代码比较长,就不贴出来了,在代码仓库上看哈!

首先我在数据库中新建了一个user表:

Java大牛带你4小时开发一个SpringBoot+vue前后端分离博客项目

 

运行CodeGenerator的main方法,输入表名:m_user,生成结果如下:

Java大牛带你4小时开发一个SpringBoot+vue前后端分离博客项目

 

得到:

Java大牛带你4小时开发一个SpringBoot+vue前后端分离博客项目

 

简洁!方便!经过上面的步骤,基本上我们已经把mybatis plus框架集成到项目中了。

ps:额,注意一下m_blog表的代码也生成一下哈。

在UserController中写个测试:

Java大牛带你4小时开发一个SpringBoot+vue前后端分离博客项目

 

访问:
http://localhost:8080/user/1 获得结果如下,整合成功!

Java大牛带你4小时开发一个SpringBoot+vue前后端分离博客项目

 

3、统一结果封装

这里我们用到了一个Result的类,这个用于我们的异步统一返回的结果封装。一般来说,结果里面有几个要素必要的

  • 是否成功,可用code表示(如200表示成功,400表示异常)
  • 结果消息
  • 结果数据

所以可得到封装如下:

  • com.markerhub.common.lang.Result

Java大牛带你4小时开发一个SpringBoot+vue前后端分离博客项目

 

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工具包。

评论 21
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值