目录
一、两表的增删改查
1、配置文件
1.1 pom文件
1.2 properties文件
1.3 根据数据库表生成代码
1.4 启动类代码
2、简单查询
2.1 后端代码
2.2 前端代码
3、分页查询
3.1 后端代码
3.2 前端代码
4、模糊查询
4.1 后端代码
4.2 前端代码
5、删除
5.1 后端代码
5.2 前端代码
6、添加
6.1后端代码
6.2 前端代码
7、表单验证（含复选框）
7.1 前端代码
8、修改
8.1 后端代码
8.2 前端代码
9、总结
9.1 单表和多表的异同
9.2 以实体类接收数据和以Map接收数据的异同
9.3 注意
一、两表的增删改查
1、配置文件
1.1 pom文件
<dependency><groupId>org.apache.tomcat.embed</groupId><artifactId>tomcat-embed-jasper</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!--连接mysql--><dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!--mybatis-plus持久层操作--><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.1</version></dependency><!-- MybatisPlus根据数据库表生成文件 --><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-generator</artifactId><version>3.4.1</version></dependency><dependency><groupId>org.apache.velocity</groupId><artifactId>velocity-engine-core</artifactId><version>2.2</version></dependency><!--实体类注解--><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.24</version></dependency>1.2 properties文件
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/vuetest?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=lwl@123
# ??
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8
spring.jackson.serialization.write-date-keys-as-timestamps=false
#logging.level.com.baomidou.ant.test.dao=debug
#mybatis-plus _ U
mybatis-plus.configuration.map-underscore-to-camel-case=true
# ?????
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
# ??mapper?????
mybatis-plus.mapper-locations=classpath:/mapper/*.xml
#MybatisPlus????
# 1 1??????????
mybatis-plus.global-config.db-config.logic-not-delete-value=1
# 2 2??????????
mybatis-plus.global-config.db-config.logic-delete-value=2
server.port=8888
1.3 根据数据库表生成代码
package com.example.multablequery;
import com.baomidou.mybatisplus.core.exceptions.MybatisPlusException;
import com.baomidou.mybatisplus.core.toolkit.StringPool;
import com.baomidou.mybatisplus.generator.AutoGenerator;
import com.baomidou.mybatisplus.generator.InjectionConfig;
import com.baomidou.mybatisplus.generator.config.*;
import com.baomidou.mybatisplus.generator.config.po.TableInfo;
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;
import org.apache.commons.lang3.StringUtils;
import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;
public class GenerateTest {/*** <p>* 读取控制台内容* </p>*/public static String scanner(String tip) {Scanner scanner = new Scanner(System.in);StringBuilder help = new StringBuilder();help.append("请输入" + tip + "：");System.out.println(help.toString());if (scanner.hasNext()) {String ipt = scanner.next();if (StringUtils.isNotBlank(ipt)) {return ipt;}}throw new MybatisPlusException("请输入正确的" + tip + "！");}public static void main(String[] args) {// 代码生成器AutoGenerator mpg = new AutoGenerator();// 全局配置GlobalConfig gc = new GlobalConfig();String projectPath = System.getProperty("user.dir");gc.setOutputDir(projectPath + "/src/main/java");gc.setAuthor("L");gc.setOpen(false);// gc.setSwagger2(true); 实体属性 Swagger2 注解mpg.setGlobalConfig(gc);// 数据源配置DataSourceConfig dsc = new DataSourceConfig();dsc.setUrl("jdbc:mysql://localhost:3306/vuetest?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=true");// dsc.setSchemaName("public");dsc.setDriverName("com.mysql.cj.jdbc.Driver");dsc.setUsername("root");dsc.setPassword("密码");mpg.setDataSource(dsc);// 包配置PackageConfig pc = new PackageConfig();//pc.setModuleName(scanner("模块名"));pc.setParent("com.example.multablequery");//pc.setXml("");pc.setEntity("entity");//实体的包pc.setMapper("dao");//dao的包pc.setService("service");//service的包pc.setServiceImpl("service.impl");//实现类的包mpg.setPackageInfo(pc);// 自定义配置InjectionConfig cfg = new InjectionConfig() {@Overridepublic void initMap() {// to do nothing}};// 如果模板引擎是 freemarker// String templatePath = "/templates/mapper.xml.ftl";// 如果模板引擎是 velocityString templatePath = "/templates/mapper.xml.vm";// 自定义输出配置List<FileOutConfig> focList = new ArrayList<>();// 自定义配置会被优先输出focList.add(new FileOutConfig(templatePath) {@Overridepublic String outputFile(TableInfo tableInfo) {// 自定义输出文件名 ， 如果你 Entity 设置了前后缀、此处注意 xml 的名称会跟着发生变化！！return projectPath + "/src/main/resources/mapper/" + tableInfo.getEntityName() + "Mapper" + StringPool.DOT_XML;}});cfg.setFileOutConfigList(focList);mpg.setCfg(cfg);// 配置模板//不在java文件夹下面写入mapper文件TemplateConfig templateConfig = new TemplateConfig();templateConfig.setXml(null);mpg.setTemplate(templateConfig);// 策略配置StrategyConfig strategy = new StrategyConfig();strategy.setNaming(NamingStrategy.underline_to_camel);// _ tab_user tabUserstrategy.setColumnNaming(NamingStrategy.underline_to_camel);strategy.setEntityLombokModel(true);strategy.setRestControllerStyle(true);// 公共父类// 写于父类中的公共字段//strategy.setSuperEntityColumns("id");// id @TabIdstrategy.setInclude(scanner("表名，多个英文逗号分割").split(","));strategy.setControllerMappingHyphenStyle(true);strategy.setTablePrefix(pc.getModuleName() + "_");mpg.setStrategy(strategy);mpg.execute();}
}
1.4 启动类代码
@SpringBootApplication
@MapperScan("com.example.multablequery.dao")
public class MulTableQueryApplication {
public static void main(String[] args) {SpringApplication.run(MulTableQueryApplication.class, args);}
@Beanpublic CorsFilter corsFilter() {final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();final CorsConfiguration corsConfiguration = new CorsConfiguration();
// corsConfiguration.setAllowCredentials(true);corsConfiguration.addAllowedHeader("*");// 允许所有的头corsConfiguration.addAllowedOrigin("*");// 允许所有源发出的请求corsConfiguration.addAllowedMethod("*");// 允许所有的方法 如果不写的话默认是允许GET POSTsource.registerCorsConfiguration("/**", corsConfiguration);// 所有的路径，这里写完就不用再Controller中写跨域请求return new CorsFilter(source);}
/*** 新的分页插件,一缓和二缓遵循mybatis的规则,需要设置 MybatisConfiguration#useDeprecatedExecutor = false 避免缓存出现问题(该属性会在旧插件移除后一同移除)*/@Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));return interceptor;}@Beanpublic ConfigurationCustomizer configurationCustomizer() {return configuration -> configuration.setUseDeprecatedExecutor(false);}
}2、简单查询
查询时，可以有两种接收查询结果的格式
2.1 后端代码
controller层：
@RestController
@RequestMapping("/t-user")
public class TUserController {
@Resourceprivate ITUserService itUserService;
/*** 查询之后放在Map里面进行接收* @return*/@GetMappingpublic Result findAll(){List<Map> list = itUserService.findAll();return new Result(list);}
/*** 查询之后用实体类进行接收* @return*/@GetMapping("getAll")public Result getAll(){List<TUser> list = itUserService.getAll();return new Result(list);}
}service层：
public interface ITUserService extends IService<TUser> {
List<Map> findAll();
List<TUser> getAll();
}service实现层：
@Service
public class TUserServiceImpl extends ServiceImpl<TUserMapper, TUser> implements ITUserService {
@Resourceprivate TUserMapper tUserMapper;
/*** 查询结构用Map进行接收* @return*/@Overridepublic List<Map> findAll() {List<Map> list = tUserMapper.findAll();return list;}
/*** 查询结果用实体类进行接收* @return*/@Overridepublic List<TUser> getAll() {List<TUser> list = tUserMapper.getAll();return list;}
}dao层：
public interface TUserMapper extends BaseMapper<TUser> {
List<Map> findAll();
List<TUser> getAll();
}dao层sql：
<!-- 查询后用Map进行接收 --><select id="findAll" resultType="java.util.Map">select * from t_user u,t_role r where r.id = u.rid;</select><!-- 查询后用实体类进行接收 --><select id="getAll" resultMap="getUser">select * from t_user u,t_role r where r.id = u.rid;</select><!-- 多对一关系 --><resultMap id="getUser" type="com.example.multablequery.entity.TUser" autoMapping="true"><id column="id" property="id"></id>
<!-- 这里的property指代的是 在多的那一方创建的一的实体类 --><association property="TRole" javaType="com.example.multablequery.entity.TRole" autoMapping="true"><id column="id" property="id"></id></association></resultMap>实体类接收数据时需要改写实体类：
@Data
@EqualsAndHashCode(callSuper = false)
public class TUser implements Serializable {
private static final long serialVersionUID = 1L;
@TableId(value = "id", type = IdType.AUTO)private Integer id;
/*** 用户名*/private String username;
/*** 用户密码*/private String password;
/*** 用户生日* 转换时间格式与前台保持一致*/@DateTimeFormat(pattern = "yyyy-MM-dd")private LocalDate birthday;
/*** 用户性别*/private String sex;
private Integer rid;
/*** 状态*/
// @TableLogicprivate Integer status;
/*** 多对一的关系，放的是实体类*/@TableField(exist = false)private TRole tRole;
}Map接收数据格式：
{"code": 200,"msg": "操作成功","t": [{"birthday": "2023-01-18","password": "123456","role": "admin","sex": "男","id": 1,"rid": 1,"status": 1,"username": "zs"},{"birthday": "2023-01-18","password": "1","role": "user","sex": "男","id": 2,"rid": 2,"status": 1,"username": "1"},{"birthday": "2023-01-19","password": "2","role": "user","sex": "女","id": 2,"rid": 2,"status": 1,"username": "2"}]
}实体类接收数据格式：
{"code": 200,"msg": "操作成功","t": [{"id": 1,"username": "zs","password": "123456","birthday": "2023-01-18","sex": "男","rid": 1,"status": 1,"trole": {"id": 1,"role": "admin","status": 1}},{"id": 2,"username": "1","password": "1","birthday": "2023-01-18","sex": "男","rid": 2,"status": 1,"trole": {"id": 2,"role": "user","status": 1}}]
}2.2 前端代码
实体类接收方式：
<!-- 表格内容 --><el-table :data="tableData" border style="width: 100%"><el-table-column prop="username" label="姓名"></el-table-column><el-table-column prop="sex" label="性别"></el-table-column><!-- 因为接收的数据在对象.对象中，所以这里进行取值时要用对象.属性 --><el-table-column prop="trole.role" label="角色"></el-table-column><el-table-column fixed prop="birthday" label="生日"></el-table-column><el-table-column prop="status" label="状态"></el-table-column><el-table-column fixed="right" label="操作" width="100"><template slot-scope="scope"><el-button @click="delStu(scope.row)" type="text" size="small">删除</el-button><el-button @click="updStu(scope.row)" type="text" size="small">修改</el-button></template></el-table-column></el-table>queryData() { //初始化表格数据this.$axios.get(`t-user/getAll`).then(r=>{this.tableData=r.data.t;})
} 定义变量
return {tableData: [],}函数调用
created() {this.queryData();}Map接收方式：
<!-- 表格内容 --><el-table :data="tableData" border style="width: 100%"><el-table-column prop="username" label="姓名"></el-table-column><el-table-column prop="sex" label="性别"></el-table-column><el-table-column prop="role" label="角色"></el-table-column><el-table-column fixed prop="birthday" label="生日"></el-table-column><el-table-column prop="status" label="状态"></el-table-column><el-table-column fixed="right" label="操作" width="100"><template slot-scope="scope"><el-button @click="delStu(scope.row)" type="text" size="small">删除</el-button><el-button @click="updStu(scope.row)" type="text" size="small">修改</el-button></template></el-table-column></el-table>编写函数：
queryData() { //初始化表格数据this.$axios.get(`t-user`).then(r=>{this.tableData=r.data.t;})
} 定义变量：
return {tableData: [],}函数调用：
created() {this.queryData();}3、分页查询
3.1 后端代码
controller层：
@RestController
@RequestMapping("/t-user")
public class TUserController {@Resourceprivate ITUserService itUserService;/*** 查询之后放在Map里面进行接收* @return*/@GetMappingpublic Result findAll(Page page){Page list = itUserService.findAll(page);return new Result(list);}/*** 查询之后用实体类进行接收* @return*/@GetMapping("getAll")public Result getAll(Page page){Page list = itUserService.getAll(page);return new Result(list);}
}service层：
public interface ITUserService extends IService<TUser> {Page findAll(Page page);Page getAll(Page page);
}service实现层：
@Service
public class TUserServiceImpl extends ServiceImpl<TUserMapper, TUser> implements ITUserService {@Resourceprivate TUserMapper tUserMapper;/*** 查询结构用Map进行接收* @return* @param page*/@Overridepublic Page findAll(Page page) {Page list = tUserMapper.findAll(page);return list;}/*** 查询结果用实体类进行接收* @return* @param page*/@Overridepublic Page getAll(Page page) {Page list = tUserMapper.getAll(page);return list;}
}dao层：
/*** @SuppressWarnings("all") 抑制左右警告*/
@SuppressWarnings("all")
public interface TUserMapper extends BaseMapper<TUser> {Page findAll(Page page);Page getAll(Page page);
}dao层代码：（和简单查询比没有变化）
<!-- 查询后用Map进行接收 --><select id="findAll" resultType="java.util.Map">select * from t_user u,t_role r where r.id = u.rid</select><!-- 查询后用实体类进行接收 --><select id="getAll" resultMap="getUser">select * from t_user u,t_role r where r.id = u.rid</select><!-- 多对一关系 --><resultMap id="getUser" type="com.example.multablequery.entity.TUser" autoMapping="true"><id column="id" property="id"></id>
<!-- 这里的property指代的是 在多的那一方创建的一的实体类 --><association property="TRole" javaType="com.example.multablequery.entity.TRole" autoMapping="true"><id column="id" property="id"></id></association></resultMap>3.2 前端代码
前端代码：与简单查询相比变化的只有编写的函数和定义的变量
实体类格式接收：
分页组件：
<!-- 分页组件 --><div class="block"><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange":current-page="page.current" :page-sizes="[2, 4, 6, 8]" :page-size="page.size"layout="total, sizes, prev, pager, next, jumper" :total="page.total"></el-pagination></div>编写函数
handleSizeChange(val) { //分页组件每页条数触发事件console.log(`每页 ${val} 条`);this.page.size = val;this.queryData();},handleCurrentChange(val) { //分页组件当前页触发事件console.log(`当前页: ${val}`);this.page.current = val;this.queryData();},
queryData() { //初始化表格数据this.$axios.get(`t-user/getAll`, {params: this.page}).then(r => {this.tableData = r.data.t.records;//把查询到的数据总条数赋值给表格的条数this.page.total = r.data.t.total;})},定义变量
return{tableData: [],page: {current: 1,size: 2,total: 10},
}Map格式接收
分页组件：
<!-- 分页组件 --><div class="block"><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange":current-page="page.current" :page-sizes="[2, 4, 6, 8]" :page-size="page.size"layout="total, sizes, prev, pager, next, jumper" :total="page.total"></el-pagination></div>编写函数：
handleSizeChange(val) { //分页组件每页条数触发事件console.log(`每页 ${val} 条`);this.page.size = val;this.queryData();},handleCurrentChange(val) { //分页组件当前页触发事件console.log(`当前页: ${val}`);this.page.current = val;this.queryData();},
queryData() { //初始化表格数据this.$axios.get(`t-user`, {params: this.page}).then(r => {this.tableData = r.data.t.records;//把查询到的数据总条数赋值给表格的条数this.page.total = r.data.t.total;})},定义变量
return{tableData: [],page: {current: 1,size: 2,total: 10},
}4、模糊查询
4.1 后端代码
controller层：
@RestController
@RequestMapping("/t-user")
public class TUserController {@Resourceprivate ITUserService itUserService;/*** 查询之后放在Map里面进行接收* @return*/@GetMappingpublic Result findAll(Page page,String username,Integer rid){Page list = itUserService.findAll(page,username,rid);return new Result(list);}/*** 查询之后用实体类进行接收* @return*/@GetMapping("getAll")public Result getAll(Page page,String username,Integer rid){Page list = itUserService.getAll(page,username,rid);return new Result(list);}
}service层：
public interface ITUserService extends IService<TUser> {Page findAll(Page page, String username, Integer rid);Page getAll(Page page, String username, Integer rid);
}service实现层：
@Service
public class TUserServiceImpl extends ServiceImpl<TUserMapper, TUser> implements ITUserService {@Resourceprivate TUserMapper tUserMapper;/*** 查询结构用Map进行接收* @return*/@Overridepublic Page findAll(Page page, String username, Integer rid) {Page list = tUserMapper.findAll(page,username,rid);return list;}/*** 查询结果用实体类进行接收* @return*/@Overridepublic Page getAll(Page page, String username, Integer rid) {Page list = tUserMapper.getAll(page,username,rid);return list;}
}dao层：
@SuppressWarnings("all")
public interface TUserMapper extends BaseMapper<TUser> {// 如果这里使用实体类user接收username和rid两个数据 那么在sql中进行取值时，要使用user.usernam或者是user.ridPage findAll(Page page, @Param("username") String username,@Param("rid") Integer rid);Page getAll(Page page, @Param("username") String username,@Param("rid") Integer rid);
}dao代码：
<!-- 查询后用Map进行接收 --><select id="findAll" resultType="java.util.Map">select * from t_user u,t_role r where r.id = u.rid<if test="username!=null and username!=''">and username like concat("%",#{username},"%")</if><if test="rid!=null and rid!=''">and rid like concat("%",#{rid},"%")</if></select><!-- 查询后用实体类进行接收 --><select id="getAll" resultMap="getUser">select * from t_user u,t_role r where r.id = u.rid<if test="username!=null and username!=''">and username like concat("%",#{username},"%")</if><if test="rid!=null and rid!=''">and rid like concat("%",#{rid},"%")</if></select><!-- 多对一关系 --><resultMap id="getUser" type="com.example.multablequery.entity.TUser" autoMapping="true"><id column="id" property="id"></id>
<!-- 这里的property指代的是 在多的那一方创建的一的实体类 --><association property="TRole" javaType="com.example.multablequery.entity.TRole" autoMapping="true"><id column="id" property="id"></id></association></resultMap>查询所有角色信息的后端代码
@RestController
@RequestMapping("/t-role")
public class TRoleController {@Resourceprivate ITRoleService itRoleService;/*** 查询所有角色的数据*/@GetMappingpublic Result queryAll(){List<TRole> list = itRoleService.list();return new Result(list);}
}4.2 前端代码
Map格式接收：
模糊查询组件及按钮：
<!-- 模糊查询 --><el-input v-model="search.username" placeholder="请输入名字" style="width: 100px; float: left; margin-right: 10px;"></el-input><!-- 下拉框 --><!-- v-model="search.rid" : 代表绑定的是 --><el-select v-model="search.rid" placeholder="请选择角色" style="width: 200px; float: left; margin-right: 10px;"><el-option v-for="item in roleList" :key="item.id" :label="item.role" :value="item.id"></el-option></el-select><!--<el-optionv-for="item in roleList"key：表名唯一性:key="item.value"lable:页面上显示的值:label="item.label"value：应用的值:value="item.value"></el-option>--><el-button type="primary" plain @click="hasSearchData" style="float: left;">查询</el-button><el-button type="info" plain @click="resetSearchData" style="float: left;">清空查询条件</el-button>定义变量：
// 模糊查询search: {},// 下拉框roleList: [],下拉框中的信息在另外一张表：
所以需要在页面初始化时就查询信息
created() {this.queryData();// 调用查询所有角色信息的函数this.queryRole();}编写加载角色信息函数
queryRole(){//查询所有角色信息，填充到模糊查询的下拉框中this.$axios.get(`t-role`).then(r=>{this.roleList = r.data.t;})}编写查询信息函数：
hasSearchData() { // 模糊查询:每次查询完之后返回第一页this.page.current = 1;this.queryData();},resetSearchData() { // 重置模糊查询条件this.search = {};this.queryData();},
queryData() { //初始化表格数据//扩展运算符: 拼接 let newobj = {...this.search,...this.page}this.$axios.get(`t-user`, {params: newobj}).then(r => {this.tableData = r.data.t.records;//把查询到的数据总条数赋值给表格的条数this.page.total = r.data.t.total;})},实体类格式接收：
模糊查询组件及按钮：
<!-- 模糊查询 --><el-input v-model="search.username" placeholder="请输入名字" style="width: 100px; float: left; margin-right: 10px;"></el-input><!-- 下拉框 --><!-- v-model="search.rid" : 代表绑定的是 --><el-select v-model="search.rid" placeholder="请选择角色" style="width: 200px; float: left; margin-right: 10px;"><el-optionv-for="item in roleList":key="item.id":label="item.role":value="item.id"></el-option></el-select><!--<el-optionv-for="item in roleList"key：表名唯一性:key="item.value"lable:页面上显示的值:label="item.label"value：应用的值，也就是传到后台的值:value="item.value"></el-option>--><el-button type="primary" plain @click="hasSearchData" style="float: left;">查询</el-button><el-button type="info" plain @click="resetSearchData" style="float: left;">清空查询条件</el-button>定义变量：
// 模糊查询search: {},// 下拉框roleList: [],页面初始化加载角色信息：
created() {this.queryData();// 调用查询所有角色信息的函数this.queryRole();}编写加载角色信息函数
queryRole(){//查询所有角色信息，填充到模糊查询的下拉框中this.$axios.get(`t-role`).then(r=>{this.roleList = r.data.t;})}编写角色查询信息函数:
hasSearchData() { // 模糊查询:每次查询完之后返回第一页this.page.current = 1;this.queryData();},resetSearchData() { // 重置模糊查询条件this.search = {};this.queryData();},
queryData() { //初始化表格数据//扩展运算符: 拼接 let newobj = {...this.search,...this.page}this.$axios.get(`t-user/getAll`, {params: newobj}).then(r => {this.tableData = r.data.t.records;//把查询到的数据总条数赋值给表格的条数this.page.total = r.data.t.total;})},5、删除
5.1 后端代码
controller层：
/*** 根据用户id删除用户*/@DeleteMapping("{id}")public Result delUser(@PathVariable Integer id){return new Result(itUserService.removeById(id));}5.2 前端代码
定义删除按钮及函数：
<el-table-column fixed="right" label="操作" width="100"><template slot-scope="scope"><el-button @click="delStu(scope.row)" type="text" size="small">删除</el-button><el-button @click="updStu(scope.row)" type="text" size="small">修改</el-button></template></el-table-column>编写删除函数
delStu(row) { //表格删除按钮触发事件console.log(row.id);//根绝学生的唯一属性进行删除let id = row.idthis.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => { //点击确认按钮触发的事件this.$axios.delete(`t-user/` + id).then(r => {if (r.data.t == true) {this.$message({showClose: true,type: 'success',message: '删除成功!'});this.hasSearchData();}})}).catch(() => { //点击取消按钮触发的事件this.$message({showClose: true,type: 'info',message: '已取消删除'});});},6、添加
6.1后端代码
controller层：
/*** 添加/修改用户*/@PostMappingpublic Result addOrUpd(TUser tUser){boolean b = itUserService.saveOrUpdate(tUser);return new Result(b);}6.2 前端代码
Map和实体格式一样接收数据
定义添加/修改表单
<!-- 添加/修改对话框 --><el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"><!-- :before-close="handleClose" 对话框关闭之前的操作函数--><span><!-- 添加/修改表单 --><el-form ref="form" :model="form" label-width="80px"><el-form-item label="用户名字"><el-input v-model="form.username"></el-input></el-form-item><el-form-item label="角色"><el-select v-model="form.rid" placeholder="请选择角色"style="width: 200px; float: left; margin-right: 10px;"><el-option v-for="item in roleList" :key="item.id" :label="item.role" :value="item.id"></el-option></el-select></el-form-item><el-form-item label="生日"><el-col :span="11"><!-- format:代表着前端显示时间的格式 value-format：代表的是前端向后台传递数据的格式 --><el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" style="width: 100%;"value-format="yyyy-MM-dd"></el-date-picker></el-col></el-form-item><el-form-item label="性别"><el-radio v-model="form.sex" label="男">男</el-radio><el-radio v-model="form.sex" label="女">女</el-radio></el-form-item><el-form-item label="状态"><el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949":active-value="1" :inactive-value="2" disabled></el-switch></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">确定</el-button><el-button @click="dialogVisible=false">取消</el-button></el-form-item></el-form></span></el-dialog>定义添加按钮
<!-- 添加按钮 --><el-button type="success" icon="el-icon-circle-plus" circle style="float: right;" @click="addStu"></el-button>定义对话框控制量和表单对象
// 对话框的控制值，初始为falsedialogVisible: false,form: {},编写添加按钮触发函数
addStu() { // 添加按钮触发事件// 性别初始值为 男 状态初始值为 1this.form ={sex:"男",status:1}// 打开对话框this.dialogVisible = true;},编写表单关闭按钮
handleClose(done) { // 添加/修改表单关闭按钮触发事件this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});},编写表单提交函数
onSubmit() { // 添加/修改表单提交// 添加的时候，把form里面的内容传到后台即可this.$axios.post("t-user", qs.stringify(this.form)).then(r => {if (r.data.t == true) {this.$message({showClose: true,type: 'success',message: '操作成功!'});// 关闭弹出对话框this.dialogVisible = false;// 将表单内容清空this.form = {};// 刷新表格数据this.hasSearchData();} else {this.$message({showClose: true,type: 'warning',message: '操作失败!'});}})},7、表单验证（含复选框）
7.1 前端代码
两种格式接收数据一样
定义验证规则：
<!-- 表单验证 :rules="rules" --><el-form ref="form" :rules="rules" :model="form" label-width="80px"><!-- 这里的prop属性值要和下面的v-model保持一致 --><el-form-item label="用户名字" prop="username"><el-input v-model="form.username"></el-input></el-form-item><el-form-item><!-- 提交时验证表单form --><el-button type="primary" @click="onSubmit('form')">确定</el-button><el-button @click="dialogVisible=false">取消</el-button></el-form-item><el-form-item label="兴趣爱好" prop="inter"><template><el-checkbox-group v-model="form.inter"><el-checkbox label="跑步" name="inter"></el-checkbox><el-checkbox label="唱歌" name="inter"></el-checkbox><el-checkbox label="吃饭" name="inter"></el-checkbox></el-checkbox-group></template></el-form-item></el-form>定义复选框变量：
form: {sex:'男',inter: []},编写表单验证规则（定义在data里面）
// 表单验证规则rules: {username: [{required: true,message: '请填写名称',trigger: 'blur'},{min: 1,max: 5,message: '长度在 1 到 5 个字符',trigger: 'blur'}],sex: [{required: true,message: '请选择性别',trigger: 'change'}],birthday: [{required: true,message: '请选择日期',trigger: 'change'}],rid: [{required: true,message: '请选择角色',trigger: 'change'}],status: [{required: true,message: '请选择状态',trigger: 'blur'}],inter: [{required: true,message: '请至少选择一个兴趣爱好',trigger: 'change',}]}改写表单提交函数：
onSubmit(formName) { // 添加/修改表单提交// 将数组转化为字符串，这里是将每一个数据通过,来进行拼接let inter1 = this.form.inter.join(',');//赋值给对象的inter属性，传递给后台字符串属性this.form.inter = inter1;this.$refs[formName].validate((valid) => {if (valid) {// 添加的时候，把form里面的内容传到后台即可this.$axios.post("t-user", qs.stringify(this.form)).then(r => {if (r.data.t == true) {this.$message({showClose: true,type: 'success',message: '操作成功!'});// 关闭弹出对话框this.dialogVisible = false;// 将表单内容清空this.form = {};// 刷新表格数据this.hasSearchData();} else {this.$message({showClose: true,type: 'warning',message: '操作失败!'});}})} else {console.log('error submit!!');return false;}});},8、修改
8.1 后端代码
/*** 添加/修改用户*/@PostMappingpublic Result addOrUpd(TUser tUser){boolean b = itUserService.saveOrUpdate(tUser);return new Result(b);}8.2 前端代码
定义修改按钮及函数
<el-table-column fixed="right" label="操作" width="100"><template slot-scope="scope"><el-button @click="delStu(scope.row)" type="text" size="small">删除</el-button><el-button @click="updStu(scope.row)" type="text" size="small">修改</el-button></template></el-table-column>编写修改函数
updStu(row) { //表格修改按钮触发事件if (this.$refs.form != undefined) {this.$refs.form.clearValidate();}//实体格式接收数据进行修改时 不需要另外一张表的数据 可以直接把另外一张表的数据删除即可delete this.form.trole//显示弹出对话框this.dialogVisible = true;//将当前这一行的数据赋值给表单//this.form = row 浅拷贝的形式不行//采取深克隆的形式 JSON.stringify(row):转化为json字符串 // JSON.parse():把JSON字符串转化为JSON对象this.form = JSON.parse(JSON.stringify(row));},注：
//实体格式接收数据进行修改时 不需要另外一张表的数据 可以直接把另外一张表的数据删除即可delete this.form.trole9、总结
9.1 单表和多表的异同
①单表和多表的查询实现不同，因为MybatisPlus支持单表的增删改查，多表增删改查时需要自己编写sql
②多表在进行增删改时其实是操作单表，和单表的增删改是相同的
9.2 以实体类接收数据和以Map接收数据的异同
①编写sql时，Map接收不需要实体类，以实体类接收需要改写实体类
②修改时，以实体类接收数据的后端不能接收前端传过来的另外一张表的数据，所以需要把另外一张表的数据去掉
使用 delete关键字可以
9.3 注意
在编写sql时，两张表的id可能会重复，要操作哪张表优先把哪张表放在前面，避免操作时id值错误
