关于前端:超保姆级根据数据动态生成CheckBox复选框antVue

27次阅读

共计 1598 个字符,预计需要花费 4 分钟才能阅读完成。

前言

一、后盾

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>

总结

干饭人永不言败

正文完
 0