后端-数据字典模块开发

1、需求和准备

1.1、创建service_cmn模块

1.2、新建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://localhost:3306/yygh_cmn?characterEncoding=utf-8&useSSL=false
spring.datasource.username=root
spring.datasource.password=root

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

#配置mapper xml文件的路径
mybatis-plus.mapper-locations=classpath:com/study/yygh/hosp/mapper/xml/*.xml
#mybatis-plus.mapper-locations=classpath:com/atguigu/yygh/mapper/xml/*.xml
# nacos服务地址
#spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848

#开启sentinel
#feign.sentinel.enabled=true
#设置sentinel地址
#spring.cloud.sentinel.transport.dashboard=http://127.0.0.1:8858

#mongodb地址
#spring.data.mongodb.host=192.168.44.163
#spring.data.mongodb.port=27017
#spring.data.mongodb.database=yygh_hosp

#rabbitmq地址
#spring.rabbitmq.host=127.0.0.1
#spring.rabbitmq.port=5672
#spring.rabbitmq.username=guest
#spring.rabbitmq.password=guest

1.3、准备实体类

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

    private static final long serialVersionUID = 1L;

    @ApiModelProperty(value = "id")
    private Long id;

    @ApiModelProperty(value = "创建时间")
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    @TableField("create_time")
    private Date createTime;

    @ApiModelProperty(value = "更新时间")
    @TableField("update_time")
    private Date updateTime;

    @ApiModelProperty(value = "逻辑删除(1:已删除，0:未删除)")
    @TableLogic
    @TableField("is_deleted")
    private Integer isDeleted;

    @ApiModelProperty(value = "其他参数")
    @TableField(exist = false)
    private Map<String,Object> param = new HashMap<>();

    @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;
}

1.4、配置类

@Configuration
@MapperScan(basePackages = "com.study.yygh.cmn.mapper")
public class CmnConfig {

    //分页插件
    @Bean
    public PaginationInterceptor paginationInterceptor() {
        PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
        // 设置请求的页面大于最大页后操作， true调回到首页，false 继续请求  默认false
        // paginationInterceptor.setOverflow(false);
        // 设置最大单页限制数量，默认 500 条，-1 不受限制
        // paginationInterceptor.setLimit(500);
        // 开启 count 的 join 优化,只针对部分 left join
        paginationInterceptor.setCountSqlParser(new JsqlParserCountOptimize(true));
        return paginationInterceptor;
    }
}

1.5、持久层

mapper:

public interface DictMapper extends BaseMapper<Dict> {
}

mapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.study.yygh.cmn.mapper.DictMapper">

</mapper>

1.6、业务层

接口

public interface DictService extends IService<Dict> {
}

实现类：

@Service
public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictService {
}

1.7、控制层

@ApiModel("数据字典管理")
@RestController
@RequestMapping("admin/cmn/dict")
@CrossOrigin
public class DictController {

    @Autowired
    private DictService dictService;
}

1.8、启动类

@SpringBootApplication
@ComponentScan(basePackages = {"com.study"})
public class ServiceCmnApplication {

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

2、数据字典列表功能

2.1、接口开发

1、控制层方法

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

2、业务层

@Service
public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictService {

    //根据数据id查询子数据列表
    @Override
    public List<Dict> findChildData(Long id) {
        QueryWrapper<Dict> query = new QueryWrapper<>();
        query.eq("parent_id",id);
        List<Dict> dictList = baseMapper.selectList(query);//查询父节点为id的所有子数据对象
        //遍历集合中的每一个对象，并调用方法，判断该对象是否有子数据
        for(Dict dict:dictList){
            Long dictId = dict.getId();
            boolean flag = this.isChildren(dictId);//如果对象是否有子数据，返回true
            dict.setHasChildren(flag);//将hasChildren属性设置为flag的值
        }
        return dictList;
    }

    //判断该id是否有子数据
    private boolean isChildren(Long id){
        //封装查询条件
        QueryWrapper<Dict> query = new QueryWrapper<>();
        query.eq("parent_id",id);
        Integer count = baseMapper.selectCount(query);//如果有数据，会返回查询出的记录条数
        return count > 0;//如果查询出数据，返回true
    }
}

2.2、前端开发

2.2.1、添加路由

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

//数据字典设置
{
  path: '/cmn',
  component: Layout,
  redirect: '/cmn/list',
  name: '数据管理',
  alwaysShow: true,//由于该模块下只有一个数据字典子节点，所以在页面上只会展示数据字典节点，而不会展示数据管理功能，而使用了alwaysShow: true,即便该模块只有一个功能点，也会展示数据管理按钮的
  meta: { title: '数据管理', icon: 'example' },
  children: [
    {
      path: 'list',
      name: '数据字典',
      component: () => import('@/views/dict/list'),
      meta: { title: '数据字典', icon: 'table' }
    }
  ]
},

不使用alwaysShow:true时，只显示数据字典
使用了alwaysShow:true。可以下拉，同时显示数据管理和数据字典

2.2.2、新建js文件，调用后端接口

import request from '@/utils/request'

export default{
    //编写方法，调用后端接口
    //根据id查询子数据列表
    dictList(id){
        return request({
            url:`/admin/cmn/dict/findChildData/${id}`,
            method:'get'
        })
    }

}

2.2.3、编辑vue页面

<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>


<script>
//引入js文件
import dict from '@/api/dict.js'

export default {
    data() {
        return {
            list:[],//初始化数据,数据字典列表数组
            
        }
    },
    created() {
        this.getDictList(1)
    },
    methods:{
        //数据字典列表
        getDictList(id){
            dict.dictList(id)
                .then(response=>{
                    // console.log(response)
                    this.list = response.data
                })
        },
        getChildrens(tree,treeNode,resolve){
            dict.dictList(tree.id)
                .then(response=>{
                    resolve(response.data)
            })
        }
    }

}
</script>

2.2.3.1、vue页面代码解释

1、:data=“list” 要显示测数据

2、lazy：懒加载。即页面的下拉列表中要显示的数据，只有点击下拉列表时才进行数据渲染。

3、load
我们点击页面上的箭头时，会显示箭头下边的数据，而箭头下边的数据也要调用方法进行查询。使用load的意思时当我们点击箭头时执行下方数据的查询的方法。

getChildrens函数：

element-ui官方解释：

4、:tree-props
根据hasChildren的值做判断，如果hasChildren值为true,才展示下拉列表。否则不展示下拉列表。
所以在返回的数据对象中要包含hasChildren属性。

4、slot-scope=“scope”

5、getChildrens方法表示可以查询第一级下边的第二级数据，可以查询第二级下边的第三级数据。实际上做了个递归操作。

• 通过tree.id查询里边的内容的。
• resolve(response.data)将查询出来的内容做显示
  

2.3、测试

测试后我们发现表格下拉功能没有成功。这是因为我们使用的element-ui代码版本较高，而项目中使用的element-ui版本较低，即两者版本不一致导致的。
我们只需在package.json中修改element-ui版本即可。
如下图所示，element-ui版本原来是2.4.6，修改额lelement-ui版本为2.12.0
再次测试，下拉列表功能成功展示：