文章目录

• 前言
• 统一的设置返回类型
• Vue安装axios，封装request
• 查询所有的用户
• • 前端页面请求
  • 后端接口编写
  • 条件查询
  • • 前台请求
    • 后台处理请求
    • 分页查询
    • • 前台发送请求
      • 后台接受请求
      • 新增、编辑管理员信息
      • • 前台
        • 后台
        • 删除操作
        • • 前台请求
          • 后台

            前言

            SpringBoot实现增删改查、分页查询、模糊查询。

            统一的设置返回类型

            统一的返回数据结构可以使代码更加清晰易懂，方便阅读和维护。例如，当所有接口都返回相同格式的 JSON 数据时，开发人员可以轻松地理解和使用返回的数据，而无需猜测不同接口返回的数据格式。

            public class Result {
                private static final String SUCCESS = "0";
                private static final String ERROR = "-1";
                private String code;
                private String msg;
                private Object data;
                public static Result success() {
                    Result result = new Result();
                    result.setCode(SUCCESS);
                    return result;
                }
                public static Result success(Object data) {
                    Result result = new Result();
                    result.setCode(SUCCESS);
                    result.setData(data);
                    return result;
                }
                public static Result error(String msg) {
                    Result result = new Result();
                    result.setCode(ERROR);
                    result.setMsg(msg);
                    return result;
                }
            }
            

            Vue安装axios，封装request

            npm i axios -S
            

            在src目录下，创建一个utils包，用来存放我们自己定义的工具，在utils包里创建一个request.js，来封装request请求

            import axios from 'axios'
            // 创建一个axios对象出来
            const request = axios.create({
                baseURL: 'http://localhost:8080',
                timeout: 5000
            })
            // request 拦截器
            // 可以自请求发送前对请求做一些处理
            // 比如统一加token，对请求参数统一加密
            request.interceptors.request.use(config => {
                config.headers['Content-Type'] = 'application/json;charset=utf-8';
                // config.headers['token'] = user.token;  // 设置请求头
                return config
            }, error => {
                return Promise.reject(error)
            });
            // response 拦截器
            // 可以在接口响应后统一处理结果
            request.interceptors.response.use(
                response => {
                    // response.data即为后端返回的Result
                    let res = response.data;
                    // 兼容服务端返回的字符串数据
                    if (typeof res === 'string') {
                        res = res ? JSON.parse(res) : res
                    }
                    return res;
                },
                error => {
                    console.log('err' + error) // for debug
                    return Promise.reject(error)
                }
            )
            export default request
            

            查询所有的用户

            前端页面请求

            我们前端规定要发送的请求和数据是什么。

            export default {
              name: "AdminView",
              data() {
                return {
                  tableData: []
                }
              },
              created() {
                this.load();
              },
              methods: {
                load() {
                  request.get("/admin").then(res => {
                    if (res.code === '0') {
                      this.tableData = res.data;
                    }
                  })
                },
              }
            }
            

            后端接口编写

            controller

            Service

            Mapper

            @CrossOrigin
            @RestController
            @RequestMapping("/admin")
            public class AdminController {
                AdminService adminService;
                @Autowired
                public AdminController(AdminService adminService){
                        this.adminService=adminService;
                }
                @GetMapping
                public Result getUser(){
                    List list=adminService.getUser();
                    return Result.success(list);
                }
            }
            public interface AdminService {
                public List getUser();
            }
            
            
            
                
                
                    select * from user
                
            
            

            

            如果出现了跨域问题

            在controller上加个注解：@CrossOrigin

            条件查询

            我们的条件查询就是根据电话号码和名字进行模糊查询，下面就让我们开始。

            前台请求

            按钮控件

            
            
            查询
            

            创建数据

            // data里定义一个params
            params: {
              name: '',
              phone: ''
            },
            

            发送请求

            // methods里定义一个findBySearch
            findBySearch() {
              request.get("/admin/search", {
                params: this.params
              }).then(res => {
                if (res.code === '0') {
                  this.tableData = res.data;
                } else {
                }
              })
            },
            

            后台处理请求

            定义实体类Parms接受参数

            这里是接受 前端发送的请求

            public class Params {
                private String name;
                private String phone;
            }
            

            定义Controller

             @GetMapping("/search")
                public Result findBySearch(Params params){
                    List list=adminService.finBySearch(params);
                    return Result.success(list);
                }
            

            Service层

              @Override
                public List finBySearch(Params params) {
                    return adminMapper.findBySearch(params);
                }
            

            Mapper层

              List findBySearch(@Param("params") Params params);
            

                
                    select * from admin
                    
                        
                            and name like concat('%', #{ params.name }, '%')
                        
                        
                            and phone like concat('%', #{ params.phone }, '%')
                        
                    
                
            

            加一个小功能，清空查询

            清空
            

            reset(){
              this.params={
                name:'',
                phone:''
              }
              this.findBySearch()
            }
            

            分页查询

            前台发送请求

            设置页面

            1. @size-change="handleSizeChange"
            这也是一个事件绑定，表示当用户改变每页显示的条数 (page-size) 时，会触发 handleSizeChange 方法。
            handleSizeChange 方法需要自行定义，负责处理用户改变每页显示条数的逻辑，例如更新 params.pageSize 和重新获取数据。
            2. @current-change="handleCurrentChange"
            这也是事件绑定。当用户改变当前页 (current-page) 时，会触发 handleCurrentChange 方法。
            handleCurrentChange 方法需要自行定义，负责处理用户改变当前页的逻辑，例如更新 params.pageNum 和重新获取数据。
            3. :current-page="params.pageNum"
            这是绑定，将组件属性 (current-page) 与数据对象 (params) 的属性 (pageNum) 绑定在一起。
            在这种情况下，el-pagination 组件的当前页号 (current-page) 将被设置为 params 对象的 pageNum 属性的值。
            4. :page-sizes="[5, 10, 15, 20]"
            这是使用数组指定 el-pagination 组件中显示的页面大小（每页显示的条目数）的选项。
            通过此设置，用户可以选择每页显示 5、10、15 或 20 项。
            5. :page-size="params.pageSize"
            这也是绑定，将 el-pagination 组件的 page-size 属性与 params 对象的 pageSize 属性绑定在一起。
            通过此设置，el-pagination 组件中当前选定的页面大小将被设置为 params 对象的 pageSize 属性的值。
            6. layout="total, sizes, prev, pager, next"
            这是使用字符串指定 el-pagination 组件的布局。
            "total" 显示总条目数。
            "sizes" 显示页面大小选项。
            "prev" 显示上一页按钮。
            "pager" 显示当前页号和总页数。
            "next" 显示下一页按钮。
            通过此设置，将显示总条目数、页面大小选项、上一页和下一页按钮以及当前页号和总页数。
            7. :total="total"
            这也是绑定，将 el-pagination 组件的 total 属性与变量 total 绑定在一起。
            通过此设置，总条目数将显示在 el-pagination 组件中。
            

            发送请求

            params: {
              name: '',
                phone: '',
                pageNum: 1,
                pageSize: 5
            },
            total: 0
            

            后台接受请求

            1. 在pom.xml 加载 分页插件

            
                com.github.pagehelper
                pagehelper-spring-boot-starter
                1.2.10
            
            

            2. 在application.yml拷贝好分页配置

            pagehelper:
              helper-dialect: mysql
              reasonable: true
              support-methods-arguments: true
              params: count=countSql
            

            PageHelper 配置解释

            helper-dialect: 指定数据库方言，这里设置为 mysql，表示使用 MySQL 数据库方言。

            reasonable: 开启合理化查询，可以自动优化分页查询语句，提高效率。

            support-methods-arguments: 开启对方法参数的支持，可以自动从方法参数中获取分页参数。

            params: 配置分页参数，这里配置了 count=countSql，表示使用 countSql 方法计算总记录数。

            3. 编写Controller接口

            @GetMapping("/search")
            public Result findBySearch(Params params) {
                PageInfo info = adminService.findBySearch(params);
                return Result.success(info);
            }
            

            4. Service接口

            public PageInfo findBySearch(Params params) {
                // 开启分页查询
                PageHelper.startPage(params.getPageNum(), params.getPageSize());
                // 接下来的查询会自动按照当前开启的分页设置来查询
                List list = adminDao.findBySearch(params);
                return PageInfo.of(list);
            }
            

            5. Mapper层接口

              
                    select * from admin
                    
                        
                            and name like concat('%', #{ params.name }, '%')
                        
                        
                            and phone like concat('%', #{ params.phone }, '%')
                        
                    
                
            

            新增、编辑管理员信息

            前台

            构造页面

            新增
             
                
                  
                    
                  
                  
                    男
                    女
                  
                  
                    
                  
                  
                    
                  
                
                
            
                  取 消
                  确 定
                
              
            

            构造请求

            add() {
              this.form = {};
              this.dialogFormVisible = true;
            },
            submit() {
              request.post("/admin", this.form).then(res => {
                if (res.code === '0') {
                  this.$message({
                    message: '操作成功',
                    type: 'success'
                  });
                  this.dialogFormVisible = false;
                  this.findBySearch();
                } else {
                  this.$message({
                    message: res.msg,
                    type: 'success'
                  });
                }
              })
            }
            

            后台

            controller层

             @PostMapping()
                public Result insert(@RequestBody Admin admin) {
                    adminService.add(admin);
                    return Result.success();
                }
            

            Service

            public Result add(Admin admin) {
            //        // 1. 用户名一定要有，否则不让新增（后面需要用户名登录）
                    if (admin.getName() == null || "".equals(admin.getName())) {
                        throw new CustomException("用户名不能为空");
                    }
                    // 2. 进行重复性判断，同一名字的管理员不允许重复新增：只要根据用户名去数据库查询一下就可以了
                    Admin user = adminMapper.findByName(admin.getName());
                    if (user != null) {
                        // 说明已经有了，这里我们就要提示前台不允许新增了
                        throw new CustomException("该用户名已存在，请更换用户名");
                    }
                    //初始化一个密码
                    if (admin.getPassword() == null) {
                        admin.setPassword("123456");
                    }
                    if (admin.getId() == null) {
                        adminMapper.insert(admin);
                    } else {
                        adminMapper.updateById(admin);
                    }
                    return Result.success();
                }
            

            Mapper

                int insert(Admin admin);
            

            
                    insert into admin
                    
                            id,
                            username,
                            password,
                            name,
                            phone,
                            email,
                            avatar,
                            role,
                    
                    
                            #{id},
                            #{username},
                            #{password},
                            #{name},
                            #{phone},
                            #{email},
                            #{avatar},
                            #{role},
                    
                
            

            删除操作

            前台请求

              del(id) {
              request.delete("/admin/" + id).then(res => {
                if (res.code === '0') {
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
                  this.findBySearch();
                } else {
                  this.$message({
                    message: res.msg,
                    type: 'success'
                  });
                }
              })
            },
            

            后台

            controller

              /**
                 * 删除操作
                 * @param id
                 * @return
                 */
                @DeleteMapping("/{id}")
                public Result delete(@PathVariable Integer id) {
                    adminService.delete(id);
                    return Result.success();
                }
            

            service

              public void delete(Integer id) {
                    adminMapper.deleteById(id);
                }
            

            mapper

              int deleteById(Integer id);
            

              
                    delete from admin
                    where id=#{id}