怎么实现前后端分离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://rm-2zevgnldc285bbw9f1250108m.mysql.rds.aliyuncs.com:3306/wanmait1017db1?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai
spring.datasource.username=wanmait1017db1
spring.datasource.password=wanmait@2021

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

package com.wanmait.springbootdemo1.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.springbootdemo1.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;
    }
}

四、Springbootdemo1Application(启动类):

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

五、ConfigController的代码：

package com.wanmait.springbootdemo1.controller;
import com.wanmait.springbootdemo1.pojo.Config;
import com.wanmait.springbootdemo1.service.ConfigService;
import com.wanmait.springbootdemo1.util.Result;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import java.util.List;

@RestController//前后端分离的注解(@[email protected])
@RequestMapping("/manage")
@CrossOrigin//前后端分离的注解
public class ConfigController {
    @Resource//spring的注解
    private ConfigService configService;
    /*
     @author  代码写作时间:2021-5-17
    *查询所有项配置(标题、默认值、描述、配置的值)
    * */
    @PostMapping("/findConfig")
    public Result findConfig() {
        List<Config> configs = configService.list();
        return Result.success("查找成功", configs);
    }
}

六、VUE(config.html)的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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">
    <table border="1px">
        <tr>
            <td>序号</td>
            <td>标题</td>
            <td>配置的值</td>
            <td>默认值</td>
            <td>描述</td>
            <td>操作</td>
        </tr>
        <tr v-for="config,index in configs">
            <td>{{index+1}}</td>
            <td>{{config.title}}</td>
            <td>{{config.value}}</td>
            <td>{{config.defaultValue}}</td>
            <td>{{config.description}}</td>
            <td><input type="button" value="修改"><input type="button" value="设为默认值"></td>
        </tr>
    </table>
</div>

</body>
</html>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            configs:[],//存放后端的数据
        },
        //created 创建
        created: function(){
            //initData  初始化数据
            this.initData();
        },
        //methods 方法
        methods: {
            //查询所有的配置的方法
            initData:function(){
                axios.post("http://localhost:8080/manage/findConfig")
                    .then(res => {
                        console.log(res.data);
                         /*res.data.data   res.第一个data代表的是从后台返回的一个整体数据;
                         第二个data代表的是从后台返回的那个整体数据里的一个数据。*/
                        this.configs = res.data.data;
                    })//请求成功
            }
        }
    });
</script>