创建数据库，表中包含id，与parent_id，parent_id表示属于哪个id下的层级关系

代码中实体类添加字段

@ApiModelProperty(value = "是否包含子节点")
 @TableField(exist = false)  //表中不包含的列
 private boolean hasChildren;

控制层添加查询请求

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

service层

 //根据数据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);
        return count>0;
    }

编写前端，添加路由

{
        path: '/cmn',
        component: Layout,
        redirect: '/cmn/list',
        name: '数据管理',
        alwaysShow: true,
        meta: { title: '数据管理', icon: 'el-icon-s-help'},
        children: [
        {
        path: 'list',
        name: '数据字典',
        component: () => import('@/views/yygh/cmn/list'),
        meta: { title: '数据字典列表', icon: 'table' }
    }
    ]
    },

数据字典列表接口，api下创建dict.js

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

页面

<template>
 <div class="app-container">
 <el-table
        :data="list"
        style="width: 100%"
        row-key="id"
        border
        lazy
        :load="load"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
        prop="name"
        label="名称"
        width="150">
        </el-table-column>
        <el-table-column
        prop="dictCode"
        label="编码"
        width="150">
        </el-table-column>
        <el-table-column
        prop="value"
        label="值"
        width="150">
        </el-table-column>
        <el-table-column
        prop="createTime"
        label="创建时间">
        </el-table-column>
 </el-table>
 </div>
</template>
<script>
import dict from '@/api/yygh/dict'
export default {
    data() {
    return {
    list:[] //数据字典列表数组
    }
 },
 created() {
    this.getDictList(1)
 },
 methods: {
 //数据字典列表
        getDictList(id) {
        dict.dictList(id)
        .then(response => {
        this.list = response.data.list
        })
        },
        load(tree, treeNode, resolve) {
        dict.dictList(tree.id).then(response => {
            resolve(response.data.list)
        })
    }
 }
}
</script>

因为是新启动的模块，与之前端口不一样，使用nginx

修改.evn文件

VUE_APP_BASE_API = 'http://localhost:9001/'

打开nginx修改配置文件conf，添加

 server{
	listen	9001;
	server_name	localhost;
	location ~/hosp/{
	       proxy_pass  http://localhost:8201;
	}
	location ~/userlogin/{
	       proxy_pass  http://localhost:8201;
	}
	location ~/cmn/{
	       proxy_pass  http://localhost:8202;
	}
   }

停止ngix

nginx.exe -s stop