springboot+vue模糊查询功能实现

步骤：

一：

创建实体类，如下：

package com.example.manageserve.entity;

import com.fasterxml.jackson.annotation.JsonIgnore;
import lombok.Data;

@Data
public class User {
    private Integer id;
    private String username;
    @JsonIgnore
    private String password;
    private String nickname;
    private String email;
    private String phone;
    private String address;


}

二、

在业务层编写逻辑代码（本人传入的参数是username和phone）

@GetMapping("/page")
    public Map<String, Object> findPage(@RequestParam Integer pageNum,
                                        @RequestParam Integer pageSize,
                                        @RequestParam String username,
                                        @RequestParam String phone) {

        pageNum = (pageNum - 1) * pageSize;
        username = "%" + username + "%"; //前端数据交互拼写
        phone = "%" + phone + "%";//前端数据交互拼写
        List<User> data = userMapper.selectPage(pageNum, pageSize, username, phone);
        Integer total = userMapper.selectTotal(username, phone);
        Map<String, Object> res = new HashMap<>();
        res.put("data", data);
        res.put("total", total);
        return res;
    }

三、

通过mapper层向数据库发送sql语句，将这些结果通过接口传给service层，对数据库进行数据持久化操作

//多条件模糊查询
    @Select("select * from  user where username like #{username} and phone like #{phone} limit #{pageNum} , #{pageSize}")
     List<User> selectPage(Integer pageNum, Integer pageSize, String username,String phone);
    //多条件模糊查询总条数
    @Select("select count(*) from  user where username like #{username} and phone like #{phone}")
      Integer  selectTotal(String username, String phone);

四、
使用postman调试接口（附上postman入门介绍以及使用方法）

https://blog.csdn.net/lzp_88/article/details/115552991?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167271089916800211599226%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=167271089916800211599226&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-115552991-null-null.142^v68^pc_rank_34_queryrelevant25,201^v4^add_ask,213^v2^t3_control1&utm_term=postman%E5%8A%9F%E8%83%BD&spm=1018.2226.3001.4187https://blog.csdn.net/lzp_88/article/details/115552991?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167271089916800211599226%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=167271089916800211599226&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-115552991-null-null.142^v68^pc_rank_34_queryrelevant25,201^v4^add_ask,213^v2^t3_control1&utm_term=postman%E5%8A%9F%E8%83%BD&spm=1018.2226.3001.4187设置好参数，点击send在下方能显示数据库的数据说明模糊查询接口编写成功，接下来再去前端编写代码

 

五、

找到搜索框，在搜索框中绑定v-model

 设置点击事件，此图为点击按钮加载load函数

 load函数如下：
其中的url端口号为后端设置的端口号，如前后端端口不一致导致跨域问题在博主的其他文章中已有解决方案。

load(){
      fetch("http://localhost:9090/user/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize + "&username="+this.username
      +"&phone="+this.phone)
          .then(res => res.json()).then(res =>{
        console.log(res)
        this.tableData = res.data
        this.total = res.total
      })
    }

在data中附上初始值可以为空。