怎么实现前后端分离mybatisPlus(多条件查询、分页、重置)的功能？

一、添加依赖

 <!--mybatisPlus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.2</version>
        </dependency>
        <!--lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <!--代码生成器开始-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.4.1</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
            <version>2.4.5</version>
        </dependency>
        <!--代码生成器结束-->
        <!--pagehelper分页插件-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.3.0</version>
        </dependency>
        <!--jwt-->
        <dependency>
            <groupId>com.auth0</groupId>
            <artifactId>java-jwt</artifactId>
            <version>3.14.0</version>
        </dependency>
        <!--fastjson-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.75</version>
        </dependency>

二、application.properties(热部署器)的代码:

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/mait1017db1demo?useUnicode=true&characterEncoding=UTF8&useSSL=false&serverTimezone=Asia/Shanghai
spring.datasource.username=mysql
spring.datasource.password=0629
#指定映射文件的位置
mybatis-plus.mapper-locations=classpath:/mapping/*.xml

#0表示逻辑删除，1表示可用
mybatis-plus.global-config.db-config.logic-not-delete-value=1
mybatis-plus.global-config.db-config.logic-delete-value=0

三、com.wanmait.springbootdemo4.util(导入两个Result工具类)
(1)Result[工具类]的代码:

package com.wanmait.springbootdemo4.util;

import java.io.Serializable;

public class Result implements Serializable {
    private Boolean success;
    private Integer code;
    private String message;
    private Object data;


    public Result(ResultCode resultCode)
    {
        this.success = resultCode.success;
        this.code = resultCode.code;
        this.message = resultCode.message;
    }
    public Result(ResultCode resultCode,Object data){
        this(resultCode);
        this.data = data;
    }
    public Result(Boolean success,Integer code,String message){
        this.success = success;
        this.code = code;
        this.message = message;
    }

    public static Result success(){
        return new Result(ResultCode.SUCCESS);
    }
    public static Result success(Object data){
        return new Result(ResultCode.SUCCESS,data);
    }
    public static Result success(String message){
        ResultCode.SUCCESS.message = message;
        return new Result(ResultCode.SUCCESS);
    }
    public static Result success(String message,Object data){
        ResultCode.SUCCESS.message=message;
        return new Result(ResultCode.SUCCESS,data);
    }
    public static Result error(){
        return new Result(ResultCode.ERROR);
    }
    public static Result error(Object data){
        return new Result(ResultCode.ERROR,data);
    }
    public static Result error(String message)
    {
        ResultCode.ERROR.message = message;
        return new Result(ResultCode.ERROR);
    }

    public static Result fail(){
        return new Result(ResultCode.FAIL);
    }
    public static Result fail(Object data){
        return new Result(ResultCode.FAIL,data);
    }

    public static Result fail(String message)
    {
        ResultCode.FAIL.message=message;
        return new Result(ResultCode.FAIL);
    }

    public Boolean getSuccess() {
        return success;
    }

    public void setSuccess(Boolean success) {
        this.success = success;
    }

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}

(2)ResultCode[工具类]的代码:

package com.wanmait.springbootdemo4.util;

/*
返回码code：
成功：10000
失败：10001
未登录:10002
未授权:10003
用户名或者密码错误:20001
抛出异常:99999
*/
public enum ResultCode {

    SUCCESS(true,10000,"success"),
    //系统错误返回码1xxxx
    FAIL(false,10001,"fail"),
    UNAUTHENTICATED(false,10002,"not login"),
    UNAUTHORIZED(false,10003,"no auth"),
    ERROR(false,99999,"server internal error"),
    //用户操作返回码为2xxxx
    USERNAME_OR_PASSWORD_ERROR(false,20001,"error username or password");
    //企业操作返回码3xxxx
    //权限操作返回码4xxxx
    //其它操作返回码5xxxx
    //......
    boolean success;
    int code;
    String message;

    ResultCode(boolean success,int code,String message){
        this.success = success;
        this.code = code;
        this.message = message;
    }
}

四、Springbootdemo4Application(启动类)的代码:

@MapperScan("com.wanmait.springbootdemo4.mapper")//mapper接口的自动扫描

五、数据访问层(mapper)接口的代码:

package com.wanmait.springbootdemo4.mapper;
import com.wanmait.springbootdemo4.pojo.HeatingNumber;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import java.util.List;

/**
 * <p>
 * 供暖号码表 Mapper 接口
 * </p>
 *
 * @author wanmait
 * @since 2021-06-14
 */
public interface HeatingNumberMapper extends BaseMapper<HeatingNumber> {
    List<HeatingNumber> findSelectList(HeatingNumber heatingNumber);//数据访问层查询所有供暖号码方法的接口
}

六、数据访问层(mapper.xml)映射文件的代码:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.wanmait.springbootdemo4.mapper.HeatingNumberMapper">

    <!-- 通用查询映射结果 -->
    <resultMap id="BaseResultMap" type="com.wanmait.springbootdemo4.pojo.HeatingNumber">
        <id column="id" property="id" />
        <result column="address" property="address" />
        <result column="number" property="number" />
        <result column="household_name" property="householdName" />
        <result column="household_idcard" property="householdIdcard" />
        <result column="input_time" property="inputTime" />
        <result column="update_time" property="updateTime" />
        <result column="enable" property="enable" />
    </resultMap>

    <!-- 通用查询结果列 -->
    <sql id="Base_Column_List">
        id, address, number, household_name, household_idcard, input_time, update_time, enable
    </sql>

    <!--
     数据访问层查询所有供暖号码的方法
    -->
    <select id="findSelectList" resultMap="BaseResultMap">
        select id, address,number,household_name, household_idcard, input_time, update_time, `enable`
        from heating_number
        where enable=1
        <if test="number != null">
            and heating_number.number=#{number}
        </if>
        <if test="householdIdcard != null">
            and heating_number.household_idcard=#{householdIdcard}
        </if>
        <if test="householdName != null">
            and heating_number.household_name=#{householdName}
        </if>
        <if test="address != null">
            and heating_number.address=#{address}
        </if>
    </select>

</mapper>

七、业务逻辑层(service)接口的代码:

package com.wanmait.springbootdemo4.service;

import com.github.pagehelper.PageInfo;
import com.wanmait.springbootdemo4.pojo.HeatingNumber;
import com.baomidou.mybatisplus.extension.service.IService;

/**
 * <p>
 * 供暖号码表 服务类
 * </p>
 *
 * @author wanmait
 * @since 2021-06-14
 */
public interface HeatingNumberService extends IService<HeatingNumber> {
    PageInfo<HeatingNumber> findPage(int pageNum, HeatingNumber heatingNumber);//业务逻辑层查询所有供暖号码并且分页的方法的接口
}

八、业务逻辑层(service)的代码:

package com.wanmait.springbootdemo4.service.impl;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.wanmait.springbootdemo4.pojo.HeatingNumber;
import com.wanmait.springbootdemo4.mapper.HeatingNumberMapper;
import com.wanmait.springbootdemo4.service.HeatingNumberService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;

/**
 * <p>
 * 供暖号码表 服务实现类
 * </p>
 *
 * @author wanmait
 * @since 2021-06-14
 */
@Service
public class HeatingNumberServiceImpl extends ServiceImpl<HeatingNumberMapper, HeatingNumber> implements HeatingNumberService {
    @Resource
    private HeatingNumberMapper heatingNumberMapper;

    /**
     *
     *业务逻辑层查询所有供暖号码并且分页的方法
     *
     * @param pageNum
     * @param heatingNumber
     * @return
     */
    @Override
    public PageInfo<HeatingNumber> findPage(int pageNum, HeatingNumber heatingNumber) {
        //设置分页的当前页和每页条数
        PageHelper.startPage(pageNum, 2);
        //数据访问层查询所有供暖号码的方法
        List<HeatingNumber> heatingNumbers = heatingNumberMapper.findSelectList(heatingNumber);
        //实例化PageInfo
        PageInfo<HeatingNumber> pageInfo = new PageInfo<>(heatingNumbers, 5);
        return pageInfo;
    }
}

九、HeatingNumberController的代码:

package com.wanmait.springbootdemo4.controller;

import com.github.pagehelper.PageInfo;
import com.wanmait.springbootdemo4.pojo.HeatingNumber;
import com.wanmait.springbootdemo4.service.HeatingNumberService;
import com.wanmait.springbootdemo4.util.Result;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;

/**
 * <p>
 * 供暖号码表 前端控制器
 * </p>
 *
 * @author wanmait
 * @since 2021-06-14
 */

/**
 * 前后端分离注解
 */
@RestController
/**
 * 前后端分离的注解
 */
@CrossOrigin
public class HeatingNumberController {
    @Resource
    private HeatingNumberService heatingNumberService;

    /**
     *
     * Controller的供暖号码表查询并且分页的方法
     *
     * @param
     * @param pageNum
     * @return
     */
    @PostMapping("heatingNumber")
    public Result heatingNumber(@RequestBody HeatingNumber heatingNumber, Integer pageNum) {
        //供暖号码id为0时,设置供暖号码id为null
        if (heatingNumber.getId() == 0) {
            heatingNumber.setId(null);
        }
        //第几页为null时,显示第一页
        if (pageNum == null) {
            pageNum = 1;
        }
        //调用业务逻辑层的查询所有供暖号码并且分页的方法
        PageInfo<HeatingNumber> pageInfo = heatingNumberService.findPage(pageNum, heatingNumber);
        return Result.success(pageInfo);
    }

}

十、VUE(heatingNumber.html)的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>供暖号码</title>
</head>
<!--前后端分离必须导入的两个js开始-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<!--前后端分离必须导入的两个js结束-->
<body>
<div id="app">
    <div>
        查找:<input id="sel" placeholder="关键字" type="text">
        <input value="供暖号码查询" type="button" @click="search">
        <input value="身份证号查询" type="button" @click="search1">
        <input value="户主名查询" type="button" @click="search2">
        <input value="地址查询" type="button" @click="search3">
        <input value="重置" type="button" @click="reset">
    </div>

    <table border="1px" v-if="showTab">
        <tr>
            <td>序号</td>
            <td>供暖号码的地址</td>
            <td>供暖号码</td>
            <td>户主名</td>
            <td>户主身份证号</td>
            <td>添加时间</td>
            <td>更新时间</td>
            <td>操作</td>
        </tr>
        <tr v-for="heatingNumber,index in heatingNumbers">
            <td>{{index+1}}</td>
            <td>{{heatingNumber.address}}</td>
            <td>{{heatingNumber.number}}</td>
            <td>{{heatingNumber.householdName}}</td>
            <td>{{heatingNumber.householdIdcard}}</td>
            <!-- heatingNumber.inputTime+.substring(0,10)截取时间格式   例如:2021-05-13-->
            <td>{{heatingNumber.inputTime.substring(0,10)}}</td>
            <td>{{heatingNumber.updateTime.substring(0,10)}}</td>
            <td><input @click="update(index)" type="button" value="修改"><input @click="del(index)" type="button" value="删除"></td>
        </tr>
    </table>

    <div class="list-page"> {{pageInfo.total}} 条
        <a v-for="i in pageInfo.pages" @click.prevent="initData(i)"
           :class="{'current':pageInfo.pageNum==i}"
        >{{i}}</a>
        {{pageInfo.pageNum}}/{{pageInfo.pages}} 页
    </div>
</div>

</body>
</html>

<script>
    var app = new Vue({
        el: "#app",
        //数据
        data: {
            //存放后端的数据
            heatingNumbers: [],
            //分页数据
            pageInfo: {},
            //显示所有数据
            showTab: true,
            //供暖号码表的数据(初始值)
            searchHeatingNumber: {
                id: 0,
            }
        },
        //created 创建
        created: function () {
            this.initData(1);
        },
        //方法
        methods: {
            //查询所有的供暖号码并且分页的方法(初始化)
            initData: function (pageNum) {
                this.showTab = true;//显示所有数据
                axios.post("http://localhost:8080/heatingNumber?pageNum=" + pageNum, this.searchHeatingNumber)
                    .then(res => {
                        /*res.data.data   res.第一个data代表的是从后台返回的一个整体数据;
                        第二个data代表的是从后台返回的那个整体数据里的一个数据。*/
                        this.heatingNumbers = res.data.data.list;
                        this.pageInfo = res.data.data;

                    });//请求成功
                this.searchHeatingNumber = {id: 0};//清空供暖号码表的数据
            },
            //根据供暖号码进行查询的方法
            search: function () {
                this.searchHeatingNumber.number = document.getElementById("sel").value;
                this.initData(1);

            },
            //根据户主身份证号进行查询的方法
            search1: function () {
                this.searchHeatingNumber.householdIdcard = document.getElementById("sel").value;
                this.initData(1);

            },
            //根据户主名进行查询的方法
            search2: function () {
                this.searchHeatingNumber.householdName = document.getElementById("sel").value;
                this.initData(1);

            },
            //根据供暖号码绑定的地址进行查询的方法
            search3: function () {
                this.searchHeatingNumber.address = document.getElementById("sel").value;
                this.initData(1);

            },
            //重置功能的方法
            reset: function () {
                this.searchHeatingNumber.id = 0;
                this.initData(1);
            }
        }
    });
</script>