怎么实现前后端分离mybatisPlus的添加功能？

2024-02-23 14:17:34

一、添加依赖

 <!--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>

二、ConfigController的代码：

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

@RestController//前后端分离的注解(@Controller+@ResponseBody)
@RequestMapping("/manage")
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>

码农公寓

相关文章