怎么实现前后端分离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.*;
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);
    }
    /*
     @author 代码写作时间:2021-5-17
    *添加项配置(标题、默认值、描述、配置的值)
    * */
    @PostMapping("/addConfig")
    public Result addConfig(@RequestBody Config config)
    {
        configService.save(config);
        return Result.success("添加成功");
    }
}

六、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">
    <div>
        <button @click="addConfig">添加配置</button>
    </div>
    <div v-if="showAdd">
        <table>
            <tr>
                <td>
                    标题:<input ref="title" v-model.trim="curConfig.title" type="text">
                    <span>{{error.title}}</span>
                </td>
            </tr>
            <tr>
                <td>
                    配置项的值:<input ref="value" v-model.trim="curConfig.value" type="text">
                    <span>{{error.value}}</span>
                </td>
            </tr>
            <tr>
                <td>
                    默认值:<input ref="defaultValue" v-model.trim="curConfig.defaultValue" 
                    type="text" >
                    <span>{{error.defaultValue}}</span>
                </td>
            </tr>
            <tr>
                <td>
                    描述:<textarea ref="description" v-model.trim="curConfig.description"
                                 style="height: 150px;width: 200px" rows=”25” cols=”75”>        
                                 </textarea>
                    <span>{{error.description}}</span>
                </td>
            </tr>
            <tr>
                <td>
                    <input value="提交" @click="save" type="button">
                    <input @click="backTab" value="返回" type="button">
                </td>
            </tr>

        </table>
    </div>

    <table border="1px" v-if="showTab">
        <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:[],//存放后端的数据
            showTab:true,//显示所有数据表格
            showAdd:false,//是否显示添加或者修改输入框
            curConfig:{},//存放新增加的数据
            error:{
                title:"",
                value:"",
                defaultValue:"",
                description:""
                }
        },
        //created 创建
        created: function(){
            //initData  初始化数据
            this.initData();
        },
        //methods 方法
        methods: {
            //查询所有的配置的方法
            initData:function(){
                this.showTab = true;//显示所有数据表格
                this.showAdd = false;//是否显示添加或者修改输入框
                axios.post("http://localhost:8080/manage/findConfig")
                    .then(res => {
                        console.log(res.data);
                         /*res.data.data   res.第一个data代表的是从后台返回的一个整体数据;
                         第二个data代表的是从后台返回的那个整体数据里的一个数据。*/
                        this.configs = res.data.data;
                    })//请求成功
                },
            //添加类型按钮
            addConfig:function(){
                this.showAdd=true;//是否显示添加或者修改输入框
                this.showTab=false;//显示所有数据表格
            },
            //返回类型按钮
            backTab:function(){
                this.showAdd=false;//是否显示添加或者修改输入框
                this.showTab=true;//显示所有数据表格
                this.curConfig={};//清空存放新增加的数据
            },
            //提交保存
            save:function(){
                var te=/^[\u4E00-\u9FA5\b0-9]{0,100}$/;//0~100位汉字或者数字(正则表达式)
                var tes=/^[\u4E00-\u9FA5]{2,50}$/;//判断2~50为汉字(正则表达式)
                //标题格式验证
                if (this.curConfig.title==undefined||this.curConfig.title=="") {
                    this.error.title="标题不能为空";
                    //标题输入框获得焦点
                    this.$refs.title.focus();
                    return;
                }
                else if (!tes.test(this.curConfig.title)) {
                    this.error.title="请输入2~50为汉字";
                    //标题输入框获得焦点
                    this.$refs.title.focus();
                    return;
                }
                else {
                    this.error.title="";
                }
                //配置项的值格式判断
                if (this.curConfig.value==undefined||this.curConfig.value=="") {
                    this.error.value="配置项的值不能为空";
                    //排序输入框获得焦点
                    this.$refs.value.focus();
                    return;
                }
                else if (!te.test(this.curConfig.value)) {
                    this.error.value="请输入0~100位汉字或者数字";
                    //排序输入框获得焦点
                    this.$refs.value.focus();
                    return;
                }else {
                    this.error.value="";
                }
                //默认值格式判断
                if (this.curConfig.defaultValue==undefined||this.curConfig.defaultValue=="") {
                    this.error.defaultValue="默认值不能为空";
                    //排序输入框获得焦点
                    this.$refs.defaultValue.focus();
                    return;
                }
                else if (!te.test(this.curConfig.defaultValue)) {
                    this.error.defaultValue="请输入0~100位汉字或者数字";
                    //排序输入框获得焦点
                    this.$refs.defaultValue.focus();
                    return;
                } else {
                    this.error.defaultValue="";
                }
                //描述的格式判断
                if (this.curConfig.description==undefined||this.curConfig.description=="") {
                    this.error.description="描述内容不能为空";
                    //排序输入框获得焦点
                    this.$refs.description.select();
                    return;
                }
                else if(!te.test(this.curConfig.description)){
                    this.error.description="请输入0~100位汉字或者数字";
                    //排序输入框获得焦点
                    this.$refs.description.select();
                    return;
                }
                else {
                    this.error.description="";
                }
                axios.post("http://localhost:8080/manage/addConfig",this.curConfig)
                    .then(res => {
                        this.backTab();
                        //添加
                        if (!this.curConfig.id) {
                            this.initData();
                        }
                        this.curConfig={};//清空存放新增加的数据
                    });//请求成功
            }
        }
    });
</script>