数据字典介绍

一、数据字典介绍

  何为数据字典？数据字典就是管理系统常用的分类数据或者一些固定数据，例如：省市区三级联动数
据、民族数据、行业数据、学历数据等，由于该系统大量使用这种数据，所以我们要做一个数据管理
方便管理系统数据，一般系统基本都会做数据管理。

1.页面效果

2.表设计

3.数据分析

parent_id：
上级id，通过id与parent_id构建上下级关系，例如：我们要获取所有行业数据，那么只需要查询
parent_id=20000的数据
name：名称，例如：填写用户信息，我们要select标签选择民族，“汉族”就是数据字典的名称
value：值，例如：填写用户信息，我们要select标签选择民族，“1”（汉族的标识）就是数据字
典的值
dict_code：编码，编码是我们自定义的，全局唯一，例如：我们要获取行业数据，我们可以通过
parent_id获取，但是parent_id是不确定的，所以我们可以根据编码来获取行业数据

说明：系统中会使用省市区三级联动数据，该数据我们来自“国家统计局”官方数据

4.根据页面效果分析数据接口

  数据字典是树形展示，由于数据众多，我们使用“树形数据与懒加载”的方式展现数据列表，
其他就是对数据的新增、修改与删除操作，因此需要提供的接口如下

4.1.根据上级id获取下级数据（构造树形数据），参考文档：

页面搜索：树形数据与懒加载

4.2.导入接口

4.3.导出接口

接下来我们封装服务器端数据接口，接口测试通过后再做页面渲染

二、数据字典开发

1.搭建service-cmn模块

1.1 搭建service-cmn模块

1.2 修改配置

修改pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0modelVersion>
<parent>
<groupId>com.atguigu.yyghgroupId>
<artifactId>serviceartifactId>
<version>1.0version>
parent>

<version>1.0version>
<artifactId>service-cmnartifactId>
<packaging>jarpackaging>
<name>service-cmnname>
<description>service-cmndescription>

<dependencies>
dependencies>

<build>
<finalName>service-cmnfinalName>
<plugins>
<plugin>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-maven-pluginartifactId>
plugin>
plugins>
build>

project>

添加配置文件application.properties

# 服务端口
server.port=8202
# 服务名
spring.application.name=service-cmn

# 环境设置：dev、test、prod
spring.profiles.active=dev

# mysql数据库连接
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://192.168.44.165:3306/yygh_cmn?characterEncoding=utf-8&useSSL=false
spring.datasource.username=root
spring.datasource.password=root123

#返回json的全局时间格式
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8

1.3启动类

package com.atguigu.yygh;

@SpringBootApplication
public class ServiceCmnApplication {
public static void main(String[] args) {
      SpringApplication.run(ServiceCmnApplication.class, args);
   }
}

2.数字字典列表

table
根据element组件要求，返回列表数据必须包含hasChildren字典

数据字典列表接口

model模块添加数据字典实体

在model模块查看实体：com.atguigu.yygh.model.cmn.Dict

@Data
@ApiModel(description = "数据字典")
@TableName("dict")
public class Dict extends BaseEntity {

    private static final long serialVersionUID = 1L;

    @ApiModelProperty(value = "上级id")
    @TableField("parent_id")
    private Long parentId;

    @ApiModelProperty(value = "名称")
    @TableField("name")
    private String name;

    @ApiModelProperty(value = "值")
    @TableField("value")
    private String value;

    @ApiModelProperty(value = "编码")
    @TableField("dict_code")
    private String dictCode;

    @ApiModelProperty(value = "是否包含子节点")
    @TableField(exist = false)
    private boolean hasChildren;
}

说明：hasChildren为树形组件所需字典，标识为数据库表不存在该字段

2.1.2 添加数据字典mapper

添加com.atguigu.yygh.cmn.mapper.DictMapper

public interface DictMapper extends BaseMapper<Dict> {
}

2.1.3 添加数据字典service

1、添加com.atguigu.yygh.cmn.service.DictService

public interface DictService extends IService<Dict> {
    //根据数据id查询子数据列表
    List<Dict> findChlidData(Long id);
}

2、添加com.atguigu.yygh.cmn.service.impl.DictServiceImpl接口实现

@Service
public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictService {
    //根据数据id查询子数据列表
    @Override
    public List<Dict> findChlidData(Long id) {
        QueryWrapper<Dict> wrapper = new QueryWrapper<>();
        wrapper.eq("parent_id",id);
        List<Dict> dictList = baseMapper.selectList(wrapper);
        //向list集合每个dict对象中设置hasChildren
        for (Dict dict:dictList) {
            Long dictId = dict.getId();
            boolean isChild = this.isChildren(dictId);
            dict.setHasChildren(isChild);
        }
        return dictList;
    }
    //判断id下面是否有子节点
    private boolean isChildren(Long id) {
        QueryWrapper<Dict> wrapper = new QueryWrapper<>();
        wrapper.eq("parent_id",id);
        Integer count = baseMapper.selectCount(wrapper);
        // 0>0    1>0
        return count>0;
    }
}

2.1.4 添加数据字典controller
添加com.atguigu.yygh.cmn.controller.DictController

@Api(description = "数据字典接口")
@RestController
@RequestMapping("/admin/cmn/dict")
public class DictController {

    @Autowired
    private DictService dictService;

    //根据数据id查询子数据列表
    @ApiOperation(value = "根据数据id查询子数据列表")
    @GetMapping("findChildData/{id}")
    public Result findChildData(@PathVariable Long id) {
        List<Dict> list = dictService.findChlidData(id);
        return Result.ok(list);
    }
}

2.2 数据字典列表前端

2.2.1 添加路由

在 src/router/index.js 文件添加路由

  {
    path: '/cmn',
    component: Layout,
    redirect: '/cmn/list',
    name: '数据管理',
    alwaysShow: true,
    meta: { title: '数据管理', icon: 'example' },
    children: [
      {
        path: 'list',
        name: '数据字典',
        component: () => import('@/views/dict/list'),
        meta: { title: '数据字典', icon: 'table' }
      }
    ]
  },

说明：列表与查看都添加了

2.2.2 定义api

创建文件 src/api/cmn/dict.js

export default {
  dictList(id) {//数据字典列表
    return request ({
      url: `/admin/cmn/dict/findChildData/${id}`,
      method: 'get'
    })
  }
}

2.2.2 方法调用

<script>
import dict from '@/api/dict'
export default {
    data() {
        return {
            list:[] //数据字典列表数组
        }
    },
    created() {
        this.getDictList(1)
    },
    methods: {
        //数据字典列表
        getDictList(id) {
            dict.dictList(id)
                .then(response => {
                    this.list = response.data
                })
        },
        getChildrens(tree, treeNode, resolve) {
            dict.dictList(tree.id).then(response => {
                resolve(response.data)
            })
        }
    }
}
</script>

2.2.3 表格渲染

<template>
    <div class="app-container">
        <el-table
        :data="list"
        style="width: 100%"
        row-key="id"
        border
        lazy
        :load="getChildrens"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column label="名称" width="230" align="left">
            <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
            </template>
            </el-table-column>

            <el-table-column label="编码" width="220">
            <template slot-scope="{row}">
                    {{ row.dictCode }}
            </template>
            </el-table-column>
            <el-table-column label="值" width="230" align="left">
            <template slot-scope="scope">
            <span>{{ scope.row.value }}</span>
            </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center">
            <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
            </template>
            </el-table-column>
        </el-table>
    </div>
</template>