超保姆级根据数据动态生成CheckBox复选框（vue+springboot其中vue使用Ant Design Vue）
前言
淦
一、后台
1.实体
应该不用我多说
@Table(name = "表名")
public class 实体名{
@Column(name = "字段名")
private 类型 字段名;
......
同上
} 2.接口
就是定义一个要干什么的方法
public interface 接口名 extends Mapper<实体名> {
List<实体名> 方法名(Map<String,Object> params);
} 3.XML
方法怎么干的具体实现（增删改查-又名:CRUD）
别到时面试官问你CRUD，你说你没听过哦
接口和实体的路径知道吧，右键接口或者实体，选择copy reference
<mapper namespace="接口的路径">
<resultMap type="实体的路径" id="起个id名">
<result property="字段名" column="字段名"/>
......
同上
</resultMap>
<select id="接口里的方法名" resultMap="上边的id名">
SELECT * FROM 表名 WHERE 条件
</select>
</mapper> 4.接口实现类
TableResultResponse 是分页的东西
public class 接口实现类名{
@Autowired
private 接口名 接口名小写;
public TableResultResponse 接口实现类方法名(Query query){
Page<Object> result = PageHelper.startPage(query.getPageNo(),query.getPageSize());
List<实体名> list = 接口名小写.方法名(query);//这应该是主要一行代码的前后是分页的对象
return new TableResultResponse(
result.getPageSize(),result.getPageNum(),result.getPages(),result.getTotal(),list
);
}
} 5.控制层
@RestController
@RequestMapping("起个路径名")
public class 控制层名 extends{
@Autowired
private 接口实现类名 接口实现类名小写;
@RequestMapping(value = "再起个路径名",method = RequestMethod.GET)
public TableResultResponse 方法名(@RequestParam Map<String,Object> params){
Query query = new Query(params);
return 接口实现类名小写.接口实现类方法名(query);
}
} 前台
1.JS
const api = {
方法名: '路径'//后台的路径
}
export function 再起个方法名(parameter) {
return axios({
url: api.上边的方法名,
method: 'get',
params: parameter
})
} 2.VUE
<template>
<a-checkbox v-for="(item,index) in list" :key="item.key">{{item.title}}</a-checkbox>
<script>
import {上边函数的方法名} from '@/api/admin'
export default {
data() {
return {
list:[],//后台返回的多选项
created() {
this.方法名()
},
methods: {
方法名(item){
上边函数的方法名().then(res => {
const result = res.result.data
result.forEach((res) => {
this.list.push({ 'key': res.id, 'title': res.字段名})
})
})
}
</script>
总结
干饭人永不言败
