数据字典整合vue

创建数据库，表中包含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 list = dictService.findChlidData(id);
 return R.ok().data("list",list);
 }

service层

 //根据数据id查询子数据列表
    @Override
    public List findChlidData(Long id) {
        QueryWrapper wrapper = new QueryWrapper<>();
        wrapper.eq("parent_id",id);
        List 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 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'
    })
    }
}

页面

因为是新启动的模块，与之前端口不一样，使用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