SpringBoot整合SSM项目实战
文章目录
- 一.模块创建
- 二. 实体类开发
-
- 2.1 配置数据库连接
- 2.2 使用Lombok定义实体类
- 三.Dao层开发
-
- 3.1 导入MybatisPlus与Druid的对应的Starter
- 3.2 配置文件内配置Druid数据源
- 3.3 创建Dao接口
- 3.4 开启MybatisPlus日志
- 3.5 开启分页组件
- 3.6 目前项目结构
- 四. Service层开发
-
- 4.1 传统开发方式
-
- 4.1.1 创建Service接口
- 4.1.2 实现Service接口
- 4.1.3 当前目录结构
- 4.2 MybatisPlus快速开发
-
- 4.2.1 定义Service接口
- 4.2.2 实现Service接口
- 五.View层开发
-
- 5.1 编写控制器代码
- 5.2 PostMan测试
- 5.3 表现层数据一致性处理
- 5.4 前后端调用
- 六.项目功能开发
-
- 6.1 列表功能
- 6.2 添加人员功能实现
- 6.3 删除人员功能实现
- 6.4 修改人员功能实现
- 6.5 异常消息处理
- 6.7 分页操作
- 6.8 条件查询
该项目基于SpringBoot+vue+elementUi+Mysql
一.模块创建
创建SpringBoot项目：创建时勾选SpringMVC和MySQL坐标
二. 实体类开发
2.1 配置数据库连接
spring: #Druid数据源
datasource:
druid:
username: root
password: 123456
url:jdbc:mysql://localhost:3306/mybatisplus?userSSL=false&useUnicode=true&characterEncoding=utf-8
driver-class-name:com.mysql.cj.jdbc.Driver
表信息如下：
2.2 使用Lombok定义实体类
涉及到mybatisplus看这篇博客
涉及到Lombok看这篇博客
package com.ssmtest.test.Pojo;
import com.baomidou.mybatisplus.annotation.*;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.util.Date;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User{
@TableId(type= IdType.AUTO) //设置主键ID自增
private long id;
private String name;
private long age;
private String email;
@TableField(fill = FieldFill.INSERT_UPDATE) //插入和更新时自动填充
private Date createTime;
@TableField(fill = FieldFill.INSERT_UPDATE) //插入和更新时自动填充
private Date updateTime;
@Version //加入乐观锁
private long version;
@TableLogic //逻辑删除
private long flage;
}
三.Dao层开发
3.1 导入MybatisPlus与Druid的对应的Starter
<dependency>
<groupId>com.baomidougroupId>
<artifactId>mybatis-plus-boot-starterartifactId>
<version>3.0.5version>
dependency>
<dependency>
<groupId>com.alibabagroupId>
<artifactId>druid-spring-boot-starterartifactId>
<version>1.2.9version>
dependency>
3.2 配置文件内配置Druid数据源
spring: #Druid数据源
datasource:
druid:
username: root
password: 123456
url:jdbc:mysql://localhost:3306/mybatisplus?userSSL=false&useUnicode=true&characterEncoding=utf-8
driver-class-name:com.mysql.cj.jdbc.Driver
3.3 创建Dao接口
@Repository
public interface UserDao extends BaseMapper<User> {
}
3.4 开启MybatisPlus日志
在配置文件中配置即可
mybatis-plus:
global-config:
db-config:
logic-delete-value: 1
logic-not-delete-value: 0
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
3.5 开启分页组件
定义一个配置类，将分页拦截器加入即可
@Bean //分页插件
public PaginationInterceptor pageInationInterceptor(){
return new PaginationInterceptor();
}
3.6 目前项目结构
四. Service层开发
4.1 传统开发方式
4.1.1 创建Service接口
public interface UserService {
Boolean save(User user);
Boolean update(User user);
Boolean delete(long id);
User getByid(long id);
List<User> getAll();
}
4.1.2 实现Service接口
@Service
public class UserServiceImpl implements UserService {
@Autowired
UserDao userDao;
@Override
public Boolean save(User user) {
return userDao.insert(user)>0;
}
@Override
public Boolean update(User user) {
return userDao.updateById(user)>0;
}
@Override
public Boolean delete(long id) {
return userDao.deleteById(id)>0;
}
@Override
public User getByid(long id) {
return userDao.selectById(id);
}
@Override
public List<User> getAll() {
return null;
}
}
4.1.3 当前目录结构
4.2 MybatisPlus快速开发
4.2.1 定义Service接口
继承Iservice类，它会自动帮我们提供一些常用的service方法
public interface UserService extends IService<User> {
IPage<User> getPage(int currentpage,int pageSize); //分页
}
4.2.2 实现Service接口
继承ServiceImpl，两个泛型分别是基于的Dao和基于的Pojo类，然后实现一下前面的Service接口即可
@Service
public class UserServiceImpl extends ServiceImpl<UserDao,User>implements UserService {
@Autowired
private UserDao userDao;
@Override
public IPage<User> getPage(int currentpage, int pageSize) {
IPage page=new Page(currentpage,pageSize);
userDao.selectPage(page,null);
return page;
}
}
五.View层开发
5.1 编写控制器代码
@RestController
@RequestMapping("/users")
public class UserController {
@Autowired
private UserService userService;
@GetMapping
public List<User> getAllUser()
{
return userService.list(null);
}
@PostMapping
public boolean save(@RequestBody User user)
{
return userService.save(user);
}
@PutMapping
public boolean updateUser(@RequestBody User user)
{
return userService.update(user,null);
}
@DeleteMapping("{id}")
public boolean updateUser(@PathVariable Long id)
{
return userService.removeById(id);
}
@GetMapping("{id}")
public User getByid(@PathVariable Long id)
{
return userService.getById(id);
}
}
5.2 PostMan测试
编写完控制器后就可以开始运行springboot程序了，然后在postman软件中输入地址就可以看到结果了，查询结果如下：
5.3 表现层数据一致性处理
在刚刚测试时我们发现前端收到后端的消息的格式是各不相同的，例如增删改收到的消息格式如下：
查询单个收到的数据格式如下：
各种不同的数据格式会对前端工程师的数据处理造成困扰，所以要对表现层数据进行一致性处理，思想是将所有类型的数据放在一个data对象里面，以后前端取数据data对象里面取即可，同时加入一个flag标志此次操作的结果（是成功还是失败），具体操作方法如下：
- 设计表现层返回结果的模型类，用于后端和前端进行数据格式的统一，也称为前后端数据协议
@Data
public class R {
private Boolean flag;
private Object data;
}
- 编写控制器代码
@RestController
@RequestMapping("/users")
public class UserController {
@Autowired
private UserService userService;
@GetMapping
public R getAllUser()
{
R r=new R();
r.setFlag(true);
r.setData(userService.list(null));
return r ;
}
@PostMapping
public R save(@RequestBody User user)
{
R r=new R();
r.setFlag(userService.save(user));
r.setData(null);
return r ;
}
@PutMapping
public R updateUser(@RequestBody User user)
{
R r=new R();
r.setFlag( userService.update(user,null));
r.setData(null);
return r;
}
@DeleteMapping("{id}")
public R deleteUser(@PathVariable Long id)
{
R r=new R();
r.setFlag(userService.removeById(id) );
r.setData(null);
return r;
}
@GetMapping("{id}")
public R getByid(@PathVariable Long id)
{
R r=new R();
r.setFlag(true);
r.setData( userService.getById(id));
return r;
}
@GetMapping("{currentPage}/{pageSize}")
public R getPage(@PathVariable int currentPage,@PathVariable int pageSize){
IPage<User> page=userService.getPage(currentPage,pageSize);
//如果当前页面值大于总页面值，重新执行查询操作，使用最大页面值
R r=new R();
r.setData(page);
r.setFlag(true);
return r;
}
}
- 前端结果
可以发现我们数据的格式都已经统一了
5.4 前后端调用
前后端分离结构中页面归属前端服务器
单体工程中页面放置在resources目录下的static目录中
- 导入页面
（链接: https://pan.baidu.com/s/1zHMRVd8NQDT6buYHK3YaJw 提取码: jack ）
2. books.html页面效果
3. axios发送异步请求访问controller
运行结果
六.项目功能开发
6.1 列表功能
代码编写
实现效果
6.2 添加人员功能实现
- 请求方式使用Post调用后台对应操作
- 添加操作结束后动态刷新页面加载数据
- 根据操作结果的不同，显示对应的提示信息
- 弹出div时清除表单数据
- 开启弹层
结果演示
点击新建出现弹窗
- 发送axios异步请求
查看数据库数据是否添加成功
6.3 删除人员功能实现
- 请求方式用Delete来调用后台对应的操作
- 删除操作需要传递当前行数据对应的id值到后台
- 删除操作结束后动态刷新页面加载数据
- 根据操作结果的不同，显示对应的提示信息
- 删除操作前弹出提示框避免误操作
删除结果展示
6.4 修改人员功能实现
- 修改弹出窗口
- 加载要修改数据通过传递当前行数据对应的id值到后台查询数据
- 利用前端数据双向绑定将查询到的数据进行回显
弹出窗口效果
2. 实现修改操作
- 请求方式使用Put调用后台对应的操作
- 修改操作结束后动态刷新页面加载数据
- 根据操作结果的不同，显示对应的提示信息
修改结果
6.5 异常消息处理
- 在控制器中模拟手动抛出异常
postman测试
所以业务在处理时可能因为后台代码的BUG导致数据的格式不统一，所以重点是前端如何处理这些后台抛出的异常进行处理
- 编写异常处理类
Postman解决异常拦截效果
- 前端展示错误信息
修改前端代码
前端展示错误信息结果
6.7 分页操作
- 使用el分页
- 定义分页组件绑定的数据模型
- 异步调用获取分页数据
- 分页数据页面回显
- 重写getAll方法实现分页
效果展示
2. 实现响应换页
换页效果
3. 分页bug解决（当某一页只有一条数据，删除这条数据后，页面数量不减少）
修改控制器代码即可
6.8 条件查询
- 给条件查询定义数据
2. 输入框绑定数据模型
- 修改getAll方法
4. 修改controller代码
5. 修改Service代码
6. 修改Service实现类代码
7. 查询效果
项目地址