数据字典前后端代码的编写

一:什么是数据字典

        举个例子:

        性别的属性有男和女,一般用的是下拉列表的形式展示,当业务需求改变时,比如在加一个属性”未知“,就要去动前端的代码。然而数据字典就是用来解决这一问题的。

        像这种一个主体有多个属性值时,用数据字典能更加方便的存储和显示。

        因此使用数据字典的优点有:

  1. 在一定程度上,通过系统维护人员即可改变系统的行为(功能),不需要开发人员的介入。使得系统的变化更快,能及时响应客户和市场的需求。
  2. 提高了系统的灵活性、通用性,减少了主体和属性的耦合度
  3. 简化了主体类的业务逻辑
  4. 能减少对系统程序的改动,使数据库、程序和页面更稳定。特别是数据量大的时候,能大幅减少开发工作量
  5. 使数据库表结构和程序结构条理上更清楚,更容易理解,在可开发性、可扩展性、可维护性、系统强壮性上都有优势。

二:数据字典的使用

2.1:数据字典表的建立

       分别具有这几个字段。数据字典前后端代码的编写_第1张图片

  

code

字典编码      (即属性的名称如:国籍)
type

1:代码他是属性值(如:国籍)

2:代表他是属性的取值内容(如:中国...)

sort

排序

name 取值的名称(如:中国)
value 每个取值的序号是不同的(如:中国的value=1)

数据字典前后端代码的编写_第2张图片

2.2:查询属性的所有取值内容的sql

       数据字典前后端代码的编写_第3张图片

三:实战编写前后端代码

        实现的形式:

数据字典前后端代码的编写_第4张图片

3.1:前端

        获取的值用v-for循环来接收,并展示出来。

             

               

             

           

        初始化数组 chioce:[]

 

        编写方法:

mounted:模板渲染好了执行

数据字典前后端代码的编写_第5张图片

3.2:后端

        Controller层接收请求

/**
     * 获取字典列表数据
     */
    @GetMapping("/dictList")
    public R getDictList(@RequestParam Map params) {
        List list = sysDictService.getDictList(params);

        return R.ok().put("list", list);
    }

        service的实现类层,创建QueryWrapper,根据不同的code查询不同的数据。

@Override
    public List getDictList(Map params) {
        String code = (String) params.get("code");
        QueryWrapper qw = new QueryWrapper<>();
        qw.eq("type","2");
        qw.eq("code",code);
        List list = baseMapper.selectList(qw);
        return list;
    }

四:列表数据的显示

数据字典前后端代码的编写_第6张图片

        当查询全部数据进行展示时,nation字段展示的是1或者是2,可读性差,因此在数据展示的时候就需要把nation字段给替换成数据字段的name进行展示。

        查询sql如下:

数据字典前后端代码的编写_第7张图片

4.1 代码

        实体类

@Data
@TableName("tb_nation")
public class NationeEntity{
    @TableId
    private Long id;
    private int nation;
    private String name;
    private String sex;
}

        对应在建立一个vo,其他字段不变,把nation字段数据类型换成String。用于页面展示。

@Data
public class NationVO{

    private Long id;
    private String nation;
    private String name;
    private String sex;
}

controller层:

 /**
     * 分页查询信息
     */
    @GetMapping("/list")
    public R list(@RequestParam Map params) {

            PageUtils page = nationService.queryPageAM(params);
            return R.ok().put("page", page);
       
    }

service层:(拼接sql的条件)

@Override
    public PageUtils queryPageAM(Map params) {


        IPage page = nationDao.getAll(
                new Query().getPage(params),
                new QueryWrapper()
                        .eq("d.is_deleted",0)
                        .eq("sys.`code`","nation")
                        .eq("sys.`type`",2)
        );

        return new PageUtils(page);
    }

dao层:

IPage getAll(
            IPage page,
            @Param(Constants.WRAPPER) QueryWrapper queryWrapper
    );

xml:

${ew.customSqlSegment}   自动生成where条件
 

你可能感兴趣的:(vue.js,elementui,javascript)