SpringBoot整合SSM项目实战

该项目基于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
1
2
3
4
5
6
7

表信息如下：

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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

三.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>
1
2
3
4
5
6
7
8
9
10

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
1
2
3
4
5
6
7

3.3 创建Dao接口

@Repository
public interface UserDao extends BaseMapper<User> {
}
1
2
3

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
1
2
3
4
5
6
7

3.5 开启分页组件

定义一个配置类，将分页拦截器加入即可

 @Bean   //分页插件
    public PaginationInterceptor pageInationInterceptor(){
        return new PaginationInterceptor();
    }
1
2
3
4

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();
}
1
2
3
4
5
6
7

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;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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);  //分页
}
1
2
3

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;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12

五.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);
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

5.2 PostMan测试

编写完控制器后就可以开始运行springboot程序了，然后在postman软件中输入地址就可以看到结果了，查询结果如下：

5.3 表现层数据一致性处理

在刚刚测试时我们发现前端收到后端的消息的格式是各不相同的，例如增删改收到的消息格式如下：

查询单个收到的数据格式如下：

各种不同的数据格式会对前端工程师的数据处理造成困扰，所以要对表现层数据进行一致性处理，思想是将所有类型的数据放在一个data对象里面，以后前端取数据data对象里面取即可，同时加入一个flag标志此次操作的结果（是成功还是失败），具体操作方法如下：

1. 设计表现层返回结果的模型类，用于后端和前端进行数据格式的统一，也称为前后端数据协议

@Data
public class R {
    private Boolean flag;
    private Object data;
}
1
2
3
4
5

2. 编写控制器代码

@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;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

3. 前端结果

可以发现我们数据的格式都已经统一了

5.4 前后端调用

前后端分离结构中页面归属前端服务器
单体工程中页面放置在resources目录下的static目录中

1. 导入页面
   （链接: https://pan.baidu.com/s/1zHMRVd8NQDT6buYHK3YaJw 提取码: jack ）

2. books.html页面效果

3. axios发送异步请求访问controller

运行结果

六.项目功能开发

6.1 列表功能

代码编写

实现效果

6.2 添加人员功能实现

1. 请求方式使用Post调用后台对应操作
2. 添加操作结束后动态刷新页面加载数据
3. 根据操作结果的不同，显示对应的提示信息
4. 弹出div时清除表单数据

1. 开启弹层
   
   结果演示

点击新建出现弹窗

2. 发送axios异步请求
   

查看数据库数据是否添加成功

6.3 删除人员功能实现

1. 请求方式用Delete来调用后台对应的操作
2. 删除操作需要传递当前行数据对应的id值到后台
3. 删除操作结束后动态刷新页面加载数据
4. 根据操作结果的不同，显示对应的提示信息
5. 删除操作前弹出提示框避免误操作

删除结果展示

6.4 修改人员功能实现

1. 修改弹出窗口

1. 加载要修改数据通过传递当前行数据对应的id值到后台查询数据
2. 利用前端数据双向绑定将查询到的数据进行回显

弹出窗口效果

2. 实现修改操作

1. 请求方式使用Put调用后台对应的操作
2. 修改操作结束后动态刷新页面加载数据
3. 根据操作结果的不同，显示对应的提示信息

修改结果

6.5 异常消息处理

1. 在控制器中模拟手动抛出异常
   
   postman测试

所以业务在处理时可能因为后台代码的BUG导致数据的格式不统一，所以重点是前端如何处理这些后台抛出的异常进行处理

2. 编写异常处理类
   
   Postman解决异常拦截效果
   
3. 前端展示错误信息
   修改前端代码
   

前端展示错误信息结果

6.7 分页操作

1. 使用el分页
2. 定义分页组件绑定的数据模型
3. 异步调用获取分页数据
4. 分页数据页面回显

1. 重写getAll方法实现分页
   

效果展示

2. 实现响应换页

换页效果

3. 分页bug解决（当某一页只有一条数据，删除这条数据后，页面数量不减少）

修改控制器代码即可

6.8 条件查询

1. 给条件查询定义数据

2. 输入框绑定数据模型

3. 修改getAll方法

4. 修改controller代码

5. 修改Service代码

6. 修改Service实现类代码

7. 查询效果

项目地址