标签：mybatisPlus title defaultValue 分离 value 输入框 添加 error curConfig
一、添加依赖
<!--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>
标签：mybatisPlus,title,defaultValue,分离,value,输入框,添加,error,curConfig 来源： https://blog.csdn.net/zongshao9/article/details/117024474
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。