尚医通（九）数据字典模块前后端 | EasyExcel

超、凢脫俗 2024-03-30 14:16 89阅读 0赞

#### 目录 ####

*  一、数据字典介绍
 *   *  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、页面展示效果 ###

![在这里插入图片描述][64a662bb99e5475aa78a451378da2c9a.png]

### 3、数据字典表设计 ###

![在这里插入图片描述][be87a8479c924f5eb79f0966ced6c20f.png]

### 4、数据分析 ###

![在这里插入图片描述][af1110ac3f2c4af8be0f0dd8524fc4c3.png]  
**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][http_www.stats.gov.cn_tjsj_tjbz_tjyqhdmhcxhfdm_2019_index.html]

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

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

## 二、搭建数据字典模块 ##

1、创建service\_cmn模块  
![在这里插入图片描述][9c98260ca8fe48318e04f74544fc0d8f.png]  
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反向代理并重启  
![在这里插入图片描述][5f945d60e4bc4fd091a97f0800585245.png]

## 三、数据字典列表接口 ##

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

[https://element.eleme.cn/\#/zh-CN/component/table][https_element.eleme.cn_zh-CN_component_table]  
![在这里插入图片描述][bc09b6187a394aa2a63b881caae65c31.png]  
![在这里插入图片描述][2db343ed4fd74466a9f566df0f40c4cc.png]

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

![在这里插入图片描述][486ed2df208149f39522aca53d82688b.png]

@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查询子数据列表
        @Override
        public List<Dict> getchildListById(Long pid) {
        
            QueryWrapper<Dict> wrapper = new QueryWrapper<>();
            wrapper.eq("parent_id",pid);
            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 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 {
        
    
        @Autowired
        private 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调用 ###

### 4、页面数据渲染 ###

修改dict/list.vue页面

## 五、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][https_alibaba-easyexcel.github.io_index.html]

github地址：[https://github.com/alibaba/easyexcel][https_github.com_alibaba_easyexcel]  
1 导出示例  
示例链接：[https://alibaba-easyexcel.github.io/quickstart/write.html][https_alibaba-easyexcel.github.io_quickstart_write.html]  
2 导入示例  
示例链接：[https://alibaba-easyexcel.github.io/quickstart/read.html][https_alibaba-easyexcel.github.io_quickstart_read.html]  
3 EasyExcel集成  
在service\_cmn模块添加依赖

<dependencies>
        
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>easyexcel</artifactId>
            <version>2.1.1</version>
        </dependency>
    </dependencies>

## 六、EasyExcel写操作 ##

### 1、在service\_cmn模块的pom中引入xml相关依赖 ###

### 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 {
        
        // 写法1
        String 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内容
        @Override
        public void invoke(Stu user, AnalysisContext analysisContext) {
        
            System.out.println("***"+user);
            list.add(user);
        }
    
        //读取excel表头信息
        @Override
        public void invokeHeadMap(Map<Integer, String> headMap, AnalysisContext context) {
        
            System.out.println("表头信息："+headMap);
        }
    
        //读取完成后执行
        @Override
        public 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  
![在这里插入图片描述][1d325a0f1992455c86618a8c864e72c2.png]

@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);
    
    }
    
         @Override
        public 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页面添加导出按钮

编写调用方法

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

## 九、数据字典导入功能（前后端） ##

### 1、创建读取监听器 ###

public class DictListener extends AnalysisEventListener<DictEeVo> {
        
    
       //不交给spring容器@Component 我们使用构造器来实现@Autowire
       private DictMapper dictMapper;
    
       public DictListener(DictMapper dictMapper){
        
           this.dictMapper = dictMapper;
       }
    
        @Override
        public 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);
            }
    
    
        }
    
        @Override
        public 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
            },
    }

[64a662bb99e5475aa78a451378da2c9a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b0b4ee21b7c64889831701265f5ced01.png
[be87a8479c924f5eb79f0966ced6c20f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/1e4cef4b85f5411b8d5acb172bd1689b.png
[af1110ac3f2c4af8be0f0dd8524fc4c3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a4b7c5894fac46fc8ec02014a22ef03b.png
[http_www.stats.gov.cn_tjsj_tjbz_tjyqhdmhcxhfdm_2019_index.html]: http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2019/index.html
[https_element.eleme.cn_zh-CN_component_table]: https://element.eleme.cn/#/zh-CN/component/table
[9c98260ca8fe48318e04f74544fc0d8f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/f23d3e5d7579401bbbb375cb8238e353.png
[5f945d60e4bc4fd091a97f0800585245.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e7b1d774f16b47dc951e55355ec94807.png
[bc09b6187a394aa2a63b881caae65c31.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/d93798e5af6c49a18f2a2f44e9ee094c.png
[2db343ed4fd74466a9f566df0f40c4cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e19af3cd1c684d6c8b79a06852c69dd6.png
[486ed2df208149f39522aca53d82688b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/1dfcfa8b9b0143a0b5ddc698d02d93f1.png
[https_alibaba-easyexcel.github.io_index.html]: https://alibaba-easyexcel.github.io/index.html
[https_github.com_alibaba_easyexcel]: https://github.com/alibaba/easyexcel
[https_alibaba-easyexcel.github.io_quickstart_write.html]: https://alibaba-easyexcel.github.io/quickstart/write.html
[https_alibaba-easyexcel.github.io_quickstart_read.html]: https://alibaba-easyexcel.github.io/quickstart/read.html
[1d325a0f1992455c86618a8c864e72c2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/898e267990bf4e649cf41299fc297032.png