SpringBoot整合SSM项目实战

拼搏现实的明天。 2024-04-01 13:09 85阅读 0赞

#### 文章目录 ####

*  一.模块创建
 *  二. 实体类开发
 *   *  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坐标

![在这里插入图片描述][2a9df0dfdc5747cdb16bad4790880811.png]

## 二. 实体类开发 ##

### 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

表信息如下：  
![在这里插入图片描述][324a7ea214594b468e574371ebccd0d6.png]

### 2.2 使用Lombok定义实体类 ###

> 涉及到mybatisplus看[这篇博客][Link 1]  
> 涉及到Lombok看[这篇博客][Link 2]

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.baomidou</groupId>
              <artifactId>mybatis-plus-boot-starter</artifactId>
              <version>3.0.5</version>
    </dependency>
    <dependency>
    	<groupId>com.alibaba</groupId>
        <artifactId>druid-spring-boot-starter</artifactId>
        <version>1.2.9</version>
    </dependency>

### 3.2 配置文件内配置Druid数据源 ###

### 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();
        }

![在这里插入图片描述][df84e13e50ca4f1cb3529bdc7ea2113b.png]

### 3.6 目前项目结构 ###

![在这里插入图片描述][d943cb7a051346faaa82c6cd60a9c8c9.png]

## 四. 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 当前目录结构 ####

![在这里插入图片描述][ed60208666fc472fae2f10a6187d3f7f.png]

### 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软件中输入地址就可以看到结果了，查询结果如下：

![在这里插入图片描述][996aca9999694e4886cf525efd651784.png]

### 5.3 表现层数据一致性处理 ###

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

![在这里插入图片描述][a6af282caa404e2f8c0b7e9089f6353a.png]

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

![在这里插入图片描述][5e46c2f1643140e9bb3afedc0a159ade.png]

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

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

@Data
    public class R {
        
        private Boolean flag;
        private Object data;
    }

1.  编写控制器代码

@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.  前端结果

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

![在这里插入图片描述][a259afb287a54c6eb9e5b2164a2c70de.png]

### 5.4 前后端调用 ###

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

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

![在这里插入图片描述][486c632b0a89489bae7b3bb7bfedd042.png]  
2. books.html页面效果  
![在这里插入图片描述][0c7aa36b2a544fb6b6209e9499d991b2.png]  
3. axios发送异步请求访问controller  
![在这里插入图片描述][20486cc38f6b4de2afc286cd6c46ec7a.png]  
运行结果

![在这里插入图片描述][7e978c17d4554d4aa204e26d571c8de7.png]

## 六.项目功能开发 ##

### 6.1 列表功能 ###

代码编写  
![在这里插入图片描述][3e46e8bb60674f5099dde4e3304c4810.png]

实现效果  
![在这里插入图片描述][e837ff41c97d444980fb374ad634cc6b.png]

### 6.2 添加人员功能实现 ###

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

1.  开启弹层  
    ![在这里插入图片描述][2c134f7eb2f847bc98baaad3eb1d2e05.png]  
    结果演示

> 点击新建出现弹窗

![在这里插入图片描述][f738e616d3974e3ea117766cc899487f.png]

1.  发送axios异步请求  
    ![在这里插入图片描述][df5b3c8df2e44377a85cb9df089e32ad.png]

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

![在这里插入图片描述][3a24b1f498a5440d8fecc9b6830d94b2.png]

### 6.3 删除人员功能实现 ###

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

![在这里插入图片描述][5d326f548233432a8fbd84d9e8174842.png]

删除结果展示  
![在这里插入图片描述][287670324fe94734b5759456baf944e4.png]

### 6.4 修改人员功能实现 ###

1.  修改弹出窗口

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

![在这里插入图片描述][3445db6f7b9c4718b5c2d665c541752b.png]

弹出窗口效果  
![在这里插入图片描述][79849ada6ff2448fb5617203642b34c1.png]  
2. 实现修改操作

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

![在这里插入图片描述][3e35f70086f2477f934ac15b818f2a5b.png]

修改结果  
![在这里插入图片描述][86408ab09c654ffc89269862e9c7f644.png]

### 6.5 异常消息处理 ###

1.  在控制器中模拟手动抛出异常  
    ![在这里插入图片描述][c86e9ae1974f4a67bbe5db0c3a7b4ef6.png]  
    postman测试

![在这里插入图片描述][7e842fb0f52444e6a827c41989145d30.png]

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

1.  编写异常处理类  
    ![在这里插入图片描述][82a13f2f12b34434827de6a26046e571.png]  
    Postman解决异常拦截效果  
    ![在这里插入图片描述][62e38dc4dbd244ca8ab8053da5c9de71.png]
2.  前端展示错误信息  
    修改前端代码  
    ![在这里插入图片描述][0b4db5b0ffb44d27ad845f9a414cd7ff.png]

前端展示错误信息结果  
![在这里插入图片描述][2478ba2db8af4d068f7ad190eed98453.png]

### 6.7 分页操作 ###

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

1.  重写getAll方法实现分页  
    ![在这里插入图片描述][6282e21703594715bacaf0084bca8f14.png]

效果展示  
![在这里插入图片描述][71273a5072ff49aaa35475749b1a7148.png]  
2. 实现响应换页

![在这里插入图片描述][21cc8614d3f84f2a9857bf99f9f98a02.png]

换页效果  
![在这里插入图片描述][a6cb06956d9f456985a7391c88765c42.png]  
3. 分页bug解决（当某一页只有一条数据，删除这条数据后，页面数量不减少）

> 修改控制器代码即可

![在这里插入图片描述][2561495fbc124dc5a9517fcc4add612d.png]

### 6.8 条件查询 ###

1.  给条件查询定义数据

![在这里插入图片描述][81d957a68ce843b7a1efe097366db649.png]  
2. 输入框绑定数据模型

![在这里插入图片描述][a9eb2d4c1cf44808bb6ba98a42844420.png]

1.  修改getAll方法

![在这里插入图片描述][57be64beb13142b89e8f800f98794aa3.png]  
4. 修改controller代码  
![在这里插入图片描述][a6f7a45346184f08a1cdc9013e621364.png]  
5. 修改Service代码

![在这里插入图片描述][0164218aeaaa4a0f87da157657e22fd2.png]  
6. 修改Service实现类代码  
![在这里插入图片描述][8d6325b9a8d54dd7a296884292f77965.png]  
7. 查询效果  
![在这里插入图片描述][57849a88d4f74ff0990f8fe1a1f79ce8.png]

[项目地址][Link 3]

[2a9df0dfdc5747cdb16bad4790880811.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3e2086d96cb04026b6e50102965d5098.png
[324a7ea214594b468e574371ebccd0d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c2885478f3c349589cb1514493323ddc.png
[Link 1]: https://blog.csdn.net/qq_43456605/article/details/127454229?spm=1001.2014.3001.5501
[Link 2]: https://blog.csdn.net/qq_43456605/article/details/127511847?spm=1001.2014.3001.5501
[df84e13e50ca4f1cb3529bdc7ea2113b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ad6ed90d48ef4c4a9f6b8a2cf9bde302.png
[d943cb7a051346faaa82c6cd60a9c8c9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/fb63571a21664deb82a3123ed34fa764.png
[ed60208666fc472fae2f10a6187d3f7f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8f962e5f202141ce84e26390d84a6af2.png
[996aca9999694e4886cf525efd651784.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b6183f09429447eaacf5c905972ee03c.png
[a6af282caa404e2f8c0b7e9089f6353a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e2aa5252aab74c80a06811670e5af605.png
[5e46c2f1643140e9bb3afedc0a159ade.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e6212ccd85a448979872991a6c7a6bec.png
[a259afb287a54c6eb9e5b2164a2c70de.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2748daa9b5a34705b13995ab04d068e9.png
[486c632b0a89489bae7b3bb7bfedd042.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b1c8d7d50068485bbf061041831cf03c.png
[0c7aa36b2a544fb6b6209e9499d991b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/40760fad71114a55a5607e0713a8f96d.png
[20486cc38f6b4de2afc286cd6c46ec7a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/77b0a4eb3b5b4756b78f5bfbd0522611.png
[7e978c17d4554d4aa204e26d571c8de7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/fff2e6582f114f7196bc5fe91edb53c8.png
[3e46e8bb60674f5099dde4e3304c4810.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/de1879f61b4442a5bfd6cf91ad5c5d68.png
[e837ff41c97d444980fb374ad634cc6b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/fd70cdf329eb4bb6b4b41e326880d5df.png
[2c134f7eb2f847bc98baaad3eb1d2e05.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/cf74c5e51bc442ac91f5d6deaf2a69fc.png
[f738e616d3974e3ea117766cc899487f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/543649e5728c4e85a9a4810a6c02e3fd.png
[df5b3c8df2e44377a85cb9df089e32ad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b910affa2e924e61872a62aa160ec081.png
[3a24b1f498a5440d8fecc9b6830d94b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bd2652cc49894aec815bae40b8cd9841.png
[5d326f548233432a8fbd84d9e8174842.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/76979ed9413148b0b2d3408b8c6c555d.png
[287670324fe94734b5759456baf944e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5c5137d309c64292a83f044b21b2763b.png
[3445db6f7b9c4718b5c2d665c541752b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5b9fa77be49047478b5f7f668a382ec3.png
[79849ada6ff2448fb5617203642b34c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/590cf726e7494d80ba7aa7436e6a6a02.png
[3e35f70086f2477f934ac15b818f2a5b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/388ac8378251482aa64ee76e23e24d3f.png
[86408ab09c654ffc89269862e9c7f644.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/57aa1c3fac1d4f5ea6a6f0e2873dad7d.png
[c86e9ae1974f4a67bbe5db0c3a7b4ef6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d92e805b3fd043789f04fb4d589bd1af.png
[7e842fb0f52444e6a827c41989145d30.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/700d53140fbc4a1ab0178e8e702c159e.png
[82a13f2f12b34434827de6a26046e571.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/cdd7eb7e8543461c82f6582c03484717.png
[62e38dc4dbd244ca8ab8053da5c9de71.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1bbc1d33a4fa4a7bae722d264a2e9392.png
[0b4db5b0ffb44d27ad845f9a414cd7ff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/dd431e3890614967a720b98c05c3eefc.png
[2478ba2db8af4d068f7ad190eed98453.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/dcda950857d243fabba52a60c4735527.png
[6282e21703594715bacaf0084bca8f14.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5c4f4efb5c40413f9c4af0efa380cf14.png
[71273a5072ff49aaa35475749b1a7148.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3f7644cc91854628b6d677c8f88ad2bb.png
[21cc8614d3f84f2a9857bf99f9f98a02.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/94102702b5004881be12dbe37dd7363a.png
[a6cb06956d9f456985a7391c88765c42.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3472ecde8ad6454ea7b43b17e7987184.png
[2561495fbc124dc5a9517fcc4add612d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0adfe09f120f4ca4a657c32168d6eaa9.png
[81d957a68ce843b7a1efe097366db649.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e0beabfcda2c44a38472d95af395f08b.png
[a9eb2d4c1cf44808bb6ba98a42844420.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/54ede3b4f30845d6bfc3bfad4556643d.png
[57be64beb13142b89e8f800f98794aa3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/faab5cc54a184b388d19d28faa91b2b7.png
[a6f7a45346184f08a1cdc9013e621364.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3d0aba6959e9451fb164f1ef202b9218.png
[0164218aeaaa4a0f87da157657e22fd2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5737c13e060d448c941c9a4371756ce1.png
[8d6325b9a8d54dd7a296884292f77965.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/da011ea872ad4a22ad09d6878e5de45e.png
[57849a88d4f74ff0990f8fe1a1f79ce8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/84dbad3f940e43f2ac205597dbaa22a6.png
[Link 3]: https://gitee.com/jackchai7/test2