目录

  • 一、数据字典介绍
    • 1、什么是数据字典
    • 2、页面展示效果
    • 3、数据字典表设计
    • 4、数据分析
    • 5、根据页面效果分析数据接口
  • 二、搭建数据字典模块
  • 三、数据字典列表接口
    • 1、model模块添加数据字典实体
    • 2、添加数据字典mapper
    • 3、添加数据字典service
    • 4、添加数据字典controller
  • 四、数据字典列表前端
    • 1、添加数据字典路由
    • 2、定义数据字典列表接口
    • 3、在dict/list.vue调用
    • 4、页面数据渲染
  • 五、EasyExcel
    • 1、EasyExcel介绍
    • 2、EasyExcel特点
  • 六、EasyExcel写操作
    • 1、在service_cmn模块的pom中引入xml相关依赖
    • 2、创建实体类
    • 3 、实现写操作
  • 七、EasyExcel读操作
    • 1、创建实体类
    • 2、创建读取操作的监听器
    • 3、调用实现最终的读取
    • 4、同时解析excel文件中多个sheet
  • 八、数据字典导出功能(前后端)
    • 1、查看model实体类
    • 2、在DictService添加方法和实现
    • 3、添加Controller方法
    • 4、数据字典导出前端
  • 九、数据字典导入功能(前后端)
    • 1、创建读取监听器
    • 2、添加controller方法
    • 3、添加service方法
    • 4、数据字典导入前端

一、数据字典介绍

1、什么是数据字典

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

2、页面展示效果

3、数据字典表设计

4、数据分析


parent_id:
上级id,通过id与parent_id构建上下级关系,例如:我们要获取所有行业数据,那么只需要查询parent_id=20000的数据
name: 名称,例如:填写用户信息,我们要select标签选择民族,“汉族”就是数据字典的名称
value: 值,例如:填写用户信息,我们要select标签选择民族,“1”(汉族的标识)就是数据字典的值
dict_code: 编码,编码是我们自定义的,全局唯一,例如:我们要获取行业数据,我们可以通过parent_id获取,但是parent_id是不确定的,所以我们可以根据编码来获取行业数据
说明:系统中会使用省市区三级联动数据,该数据我们来自“国家统计局”官方数据,地址:http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2019/index.html

5、根据页面效果分析数据接口

数据字典是树形展示,由于数据众多,我们使用“树形数据与懒加载”的方式展现数据列表,其他就是对数据的新增、修改与删除操作,因此需要提供的接口如下:
1,根据上级id获取下级数据(构造树形数据),参考文档:https://element.eleme.cn/#/zh-CN/component/table,页面搜索:树形数据与懒加载
2,导入接口
3,导出接口

二、搭建数据字典模块

1、创建service_cmn模块

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=123456#返回json的全局时间格式
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8#mybatis日志
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

3、使用代码生成器生成mapper接口,service,controller层,entity层生成之后删除!
代码生成器从yygh_hosp模块的拷贝[同时注意拷贝代码生成器的两个依赖哦]
4.创建启动类

@SpringBootApplication
@ComponentScan(basePackages = {"com.donglin"})
@MapperScan("com.donglin.yygh.cmn.mapper")
public class ServiceCmnApplication {public static void main(String[] args) {SpringApplication.run(ServiceCmnApplication.class,args);}
}

5.配置nginx反向代理并重启

三、数据字典列表接口

根据element组件要求,返回列表数据必须包含hasChildren字典,如图:

https://element.eleme.cn/#/zh-CN/component/table

1、model模块添加数据字典实体

@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 = "上级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 Map<String,Object> param = new HashMap<>();@ApiModelProperty(value = "是否包含子节点")@TableField(exist = false)private boolean hasChildren;}

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

2、添加数据字典mapper

public interface DictMapper extends BaseMapper<Dict> {}

3、添加数据字典service

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

4、添加数据字典controller

@Api(tags = "数据字典接口")
@RestController
@RequestMapping("/admin/cmn")
@CrossOrigin
public class DictController {@Autowiredprivate DictService dictService;@ApiOperation(value = "根据数据id查询子数据列表")@GetMapping("/childList/{pid}")public R getchildListById(@PathVariable Long pid){List<Dict> list = dictService.getchildListById(pid);return R.ok().data("items",list);}}

四、数据字典列表前端

1、添加数据字典路由

修改router/index.js文件

  {path: '/yygh/cmn',component: Layout,redirect: '/yygh/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' }}]},

2、定义数据字典列表接口

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

import request from '@/utils/request'const API = '/admin/cmn'
export default{getDictList(pid) {return request({url: `${API}/childList/${pid}`,method: 'get'})},
}

3、在dict/list.vue调用

<script>
import dict from '@/api/dict.js'export default{data(){return{list:[]}},methods:{//row:当前行数据//resolve:是一个函数,作用是将当前元素的子元素挂载到当前元素下边load(row, treeNode, resolve){dict.getDictList(row.id).then(res=>{resolve(res.data.items)})}},created(){dict.getDictList(1).then(res=>{this.list = res.data.items})}
}
</script>

4、页面数据渲染

修改dict/list.vue页面

<template><div class="app-container"><el-table:data="list"style="width: 100%"row-key="id"borderlazy:load="load":tree-props="{children: 'children', hasChildren: 'hasChildren'}"><el-table-columnprop="name"label="名称"width="180"></el-table-column><el-table-columnprop="dictCode"label="编码"width="180"></el-table-column><el-table-columnprop="value"label="值"width="180"></el-table-column><el-table-columnprop="createTime"label="创建时间"></el-table-column></el-table></div>
</template>

五、EasyExcel

1、EasyExcel介绍

1、数据导入:减轻录入工作量
2、数据导出:统计信息归档
3、数据传输:异构系统之间数据传输

2、EasyExcel特点

  • Java领域解析、生成Excel比较有名的框架有Apache poi、jxl等。但他们都存在一个严重的问题就是非常的耗内存。如果你的系统并发量不大的话可能还行,但是一旦并发上来后一定会OOM或者JVM频繁的full gc。
  • EasyExcel是阿里巴巴开源的一个excel处理框架,以使用简单、节省内存著称。EasyExcel能大大减少占用内存的主要原因是在解析Excel时没有将文件数据一次性全部加载到内存中,而是从磁盘上一行行读取数据,逐个解析。
  • EasyExcel采用一行一行的解析模式,并将一行的解析结果以观察者的模式通知处理(AnalysisEventListener)
    EasyExcel是一个基于Java的简单、省内存的读写Excel的开源项目。在尽可能节约内存的情况下支持读写百M的Excel。

文档地址:https://alibaba-easyexcel.github.io/index.html

github地址:https://github.com/alibaba/easyexcel
1 导出示例
示例链接:https://alibaba-easyexcel.github.io/quickstart/write.html
2 导入示例
示例链接:https://alibaba-easyexcel.github.io/quickstart/read.html
3 EasyExcel集成
在service_cmn模块添加依赖

<dependencies><!-- https://mvnrepository.com/artifact/com.alibaba/easyexcel --><dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.1.1</version></dependency>
</dependencies>

六、EasyExcel写操作

1、在service_cmn模块的pom中引入xml相关依赖

<dependencies><!-- https://mvnrepository.com/artifact/com.alibaba/easyexcel --><dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.1.1</version></dependency>
</dependencies>

2、创建实体类

@Data
public class Stu {//设置表头名称@ExcelProperty("学生编号")private int sno;//设置表头名称@ExcelProperty("学生姓名")private String sname;
}

3 、实现写操作

(1)创建方法循环设置要添加到Excel的数据

//循环设置要添加的数据,最终封装到list集合中
private static List<Stu> data() {List<Stu> list = new ArrayList<Stu>();for (int i = 0; i < 10; i++) {Stu data = new Stu();data.setSno(i);data.setSname("张三"+i);list.add(data);}return list;
}

(2)实现最终的添加操作(写法一)

public static void main(String[] args) throws Exception {// 写法1String fileName = "F:\\hosptial project\\11.xlsx";// 这里 需要指定写用哪个class去写,然后写到第一个sheet,名字为模板 然后文件流会自动关闭// 如果这里想使用03 则 传入excelType参数即可EasyExcel.write(fileName, Stu.class).sheet("写入方法一").doWrite(data());
}

(3)实现最终的添加操作(写法二)

public static void main(String[] args) throws Exception {// 写法2,方法二需要手动关闭流String fileName = "F:\\hosptial project\\11.xlsx";// 这里 需要指定写用哪个class去写ExcelWriter excelWriter = EasyExcel.write(fileName, Stu.class).build();WriteSheet writeSheet = EasyExcel.writerSheet("写入方法二").build();excelWriter.write(data(), writeSheet);/// 千万别忘记finish 会帮忙关闭流excelWriter.finish();
}

七、EasyExcel读操作

1、创建实体类

@Data
public class Stu {//设置表头名称//设置列对应的属性@ExcelProperty(value = "学生编号",index = 0)private int sno;//设置表头名称//设置列对应的属性@ExcelProperty(value = "学生姓名",index = 1)private String sname;}

2、创建读取操作的监听器

public class ExcelListener extends AnalysisEventListener<Stu> {//创建list集合封装最终的数据List<Stu> list = new ArrayList<Stu>();//一行一行去读取excle内容@Overridepublic void invoke(Stu user, AnalysisContext analysisContext) {System.out.println("***"+user);list.add(user);}//读取excel表头信息@Overridepublic void invokeHeadMap(Map<Integer, String> headMap, AnalysisContext context) {System.out.println("表头信息:"+headMap);}//读取完成后执行@Overridepublic void doAfterAllAnalysed(AnalysisContext analysisContext) {}
}

3、调用实现最终的读取

public static void main(String[] args) throws Exception {String fileName = "F:\\hosptial project\\11.xlsx";// 这里 需要指定读用哪个class去读,然后读取第一个sheet 文件流会自动关闭EasyExcel.read(fileName, Stu.class, new ExcelListener()).sheet().doRead();
}

4、同时解析excel文件中多个sheet

       ExcelReader excelReader = EasyExcel.read("F:\\hosptial project\\11.xlsx").build();ReadSheet sheet1 = EasyExcel.readSheet(0).head(Stu.class).registerReadListener(new ExcelListener()).build();ReadSheet sheet2 = EasyExcel.readSheet(1).head(Stu.class).registerReadListener(new ExcelListener()).build();excelReader.read(sheet1,sheet2);excelReader.finish();

八、数据字典导出功能(前后端)

1、查看model实体类

在model模块查看实体:com.donglin.yygh.vo.cmn.DictEeVo

@Data
public class DictEeVo {@ExcelProperty(value = "id" ,index = 0)private Long id;@ExcelProperty(value = "上级id" ,index = 1)private Long parentId;@ExcelProperty(value = "名称" ,index = 2)private String name;@ExcelProperty(value = "值" ,index = 3)private String value;@ExcelProperty(value = "编码" ,index = 4)private String dictCode;}

2、在DictService添加方法和实现

public interface DictService extends IService<Dict> {void download(HttpServletResponse response);}@Overridepublic void download(HttpServletResponse response) throws IOException {List<Dict> dictList = baseMapper.selectList(null);ArrayList<DictEeVo> dictEeVoList = new ArrayList<>(dictList.size());for (Dict dict : dictList) {DictEeVo dictEeVo = new DictEeVo();BeanUtils.copyProperties(dict,dictEeVo);dictEeVoList.add(dictEeVo);}response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");response.setCharacterEncoding("utf-8");// 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系String fileName = URLEncoder.encode("数据字典", "UTF-8");response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName + ".xlsx");EasyExcel.write(response.getOutputStream(), DictEeVo.class).sheet("模板").doWrite(dictEeVoList);}

3、添加Controller方法

    @ApiOperation(value="导出")@GetMapping(value = "/download")public void download(HttpServletResponse response){dictService.download(response);}

4、数据字典导出前端

list.vue页面添加导出按钮

<div class="el-toolbar"><div class="el-toolbar-body" style="justify-content: flex-start;"><el-button type="text" @click="exportData"><i class="fa fa-plus"/> 导出</el-button></div>
</div>

编写调用方法

       exportData(){window.open("http://localhost:9001/admin/cmn/download")},

九、数据字典导入功能(前后端)

1、创建读取监听器

public class DictListener extends AnalysisEventListener<DictEeVo> {//不交给spring容器@Component 我们使用构造器来实现@Autowireprivate DictMapper dictMapper;public DictListener(DictMapper dictMapper){this.dictMapper = dictMapper;}@Overridepublic void invoke(DictEeVo dictEeVo, AnalysisContext analysisContext) {Dict dict = new Dict();BeanUtils.copyProperties(dictEeVo,dict);QueryWrapper<Dict> queryWrapper = new QueryWrapper<>();queryWrapper.eq("id",dictEeVo.getId());Integer count = this.dictMapper.selectCount(queryWrapper);if (count>0){this.dictMapper.updateById(dict);}else {this.dictMapper.insert(dict);}}@Overridepublic void doAfterAllAnalysed(AnalysisContext analysisContext) {}
}

2、添加controller方法

    @ApiOperation(value = "导入")@PostMapping("/upload")public R upload(MultipartFile file) throws IOException {dictService.uploadFile(file);return R.ok();}

3、添加service方法

@Autowired
private DictListener dictListener;public void uploadFile(MultipartFile file) throws IOException {EasyExcel.read(file.getInputStream(),DictEeVo.class,new DictListener(baseMapper)).sheet(0).doRead();}

4、数据字典导入前端

1、在list.vue页面添加导入按钮

<el-button type="text" @click="importData"><i class="fa fa-plus"/> 导入</el-button>

2、添加导入弹出层

  <el-dialog title="导入" :visible.sync="dialogImportVisible" width="480px"><el-form label-position="right" label-width="170px"><el-form-item label="文件"><el-upload:multiple="false":on-success="onUploadSuccess":action="'http://localhost:9001/admin/cmnt/upload'"class="upload-demo"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传xls文件,且不超过500kb</div></el-upload></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogImportVisible = false">取消</el-button></div>
</el-dialog>

3、编写调用方法

   data(){return{list:[],dialogImportVisible:false}},methods:{onUploadSuccess(){this.$message.success("上传成功")dict.getDictList(1).then(res=>{this.list = res.data.items})this.dialogImportVisible=false},importData(){this.dialogImportVisible=true},
}

尚医通(九)数据字典模块前后端 | EasyExcel相关推荐

  1. 尚医通-阿里云短信服务(二十九)

    目录: (1)前台用户系统-手机登录-阿里云短信服务介绍 (2)手机登录-整合短信服务 (3)整合短信发送服务测试 (1)前台用户系统-手机登录-阿里云短信服务介绍 现在使用阿里云完成短信服务:注册登 ...

  2. 尚医通【预约挂号系统】总结

    这里写目录标题 1.项目介绍 2.技术点 3.业务流程 4.项目架构 5.项目源码(包含sql) 6.启动步骤 7.项目模块说明 8.项目功能总结 9.效果图 后台管理端 前端展示端 数据库 1.项目 ...

  3. 尚医通项目学习笔记Part1

    尚医通项目学习笔记 前言 一.目前学习进度 二.学习记录 1.项目简介 1.1 项目所会用到的技术栈 1.2 业务流程 2.项目学习笔记 2.1MyBatis-Plus相关 2.2搭建项目框架 2.3 ...

  4. 尚医通项目仿写部分技术点总结

    尚医通项目部分技术点总结 前言 技术点汇总 1.MybatisPlus 技术介绍 使用步骤 2.Excel表格的导入与导出 技术介绍 使用步骤 3.redis以注解的方式对数据字典进行缓存 技术介绍 ...

  5. 尚医通项目:项目总结

    课程链接:尚医通项目 开始时间:2022-07-09 项目总结 尚医通业务流程 项目功能总结(后台管理系统) 本地访问地址 http://localhost:9528/ 医院设置管理 (1)医院设置列 ...

  6. 尚医通项目笔记--包括每个接口对应页面的图片

    废话不多说,直接上图 博客目录结构 工程目录结构 yygh-parent根目录common公共模块父节点common-util公共工具类rabbit-util业务封装RabbitMQservice-u ...

  7. 尚医通项目101-123:前台用户系统、登录注册、邮箱登录

    开始时间:2022-05-30 课程链接:课程链接:[尚医通] 前端页面 需要完成医院等级.地区查询.医院列表.医院名称模糊查询等功能 按等级查询 按地区查询 模糊查询 并能跳转到具体详情页面 跳转到 ...

  8. 尚硅谷 尚医通学习笔记

    尚医通简介 尚医通可以网上预约挂号. 核心技术 SpringBoot : 简化新 Spring 应用的初始搭建以及开发过程 SpringCloud : 基于 Springboot 实现的云原生的开发工 ...

  9. 6.java项目-尚医通(6)

    前端代码:https://github.com/wyj41/yygh_html.git 后端代码:https://github.com/wyj41/yygh_parent.git 平台前端搭建与首页 ...

最新文章

  1. PCL:拟合平面直线和曲线以及空间曲线的原理到算法实现
  2. hdfs oiv命令查看FsImage镜像文件内容
  3. CentOs基础操作指令(进程管理)
  4. ssh整合,明明已经导入包,却总是有很多ClassNotFoundException
  5. 响应式图片(srcset属性和picture元素)
  6. 对于一万条数据量使用Oracle游标,存储过程,一般查询的速度的对比
  7. 时隔二十年,《程序员修炼之道》出第二版了!
  8. 待续--著名软件公司笔试算法题:122345排列组合
  9. labview打包文档_labview怎么生成exe文件
  10. 智能时代如何构建金融反欺诈体系?
  11. pcr扩增的原理和步骤
  12. 记一次在京东购买笔记本电脑的经历
  13. python程度员要学很多英语吗_为什么程序员应该学好英语?
  14. CSR867x 之充电配置开发
  15. 优维科技EasyOps®一体化运维平台入选“大信创产品目录”
  16. Android万能遥控菜单选择添加,将小米米家万能遥控器添加到Home Assistant
  17. 【读书笔记】AUTOSAR规范与车用控制器软件开发02
  18. C语言编程求fibonacci前20项,c语言,编程实现,求斐波那契数列,1,1,2,3,5,8,......的前20项及前20项和知道...
  19. Quartz教程六--CronTrigger
  20. 微信小程序全局变量注意这四点,让你轻松玩转全局变量

热门文章

  1. Java Spring中同时访问多种不同数据库
  2. OpenCV学习笔记-傅里叶变换
  3. 国外技术论坛和顶级公司技术博客汇总
  4. 云服务器、VPS、虚拟主机三者的区别(详细)
  5. linux账号与群组
  6. 【数据结构】二叉树(Binary Tree)
  7. CDN 的功能有哪些?
  8. .Net6 图片转文字PictureToTxt
  9. 电影《妖妖铃》改名为《妖铃铃》
  10. 向量检索的索引构建算法综述