企业网站改版新闻电脑零基础培训班
医院信息化与智能化系统(10)
这里只描述对应过程，和可能遇到的问题及解决办法以及对应的参考链接，并不会直接每一步详细配置
如果你想通过文字描述或代码画流程图，可以试试PlantUML，告诉GPT你的文件结构，让他给你对应的代码
预约挂号微服务模块搭建
前端知识点补充，此章节不会详细讲具体前端的每个知识点
1、EasyExcel-写操作
首先是在后端service-cmn引入相应依赖，接着创建实体类，并在对应属性上添加注解，设置表头内容
@Data
public class UserData {@ExcelProperty("用户编号")private int uid;@ExcelProperty("用户名称")private String username;
}
最终实现写操作代码
public static void main(String[] args) {//构建数据list集合List<UserData> list = new ArrayList<>();for (int i = 0; i < 10; i++) {UserData data = new UserData();data.setUid(i);data.setUsername("lucy" + i);list.add(data);}//设置excel文件路径和文件名称String fileName = "C:\\Users\\666\\Desktop\\新建文件夹\\excel\\01.xlsx";//调用方法实现写操作EasyExcel.write(fileName, UserData.class).sheet("用户信息").doWrite(list);}
最终效果
2、EasyExcel-读操作
首先需要创建ExcelListener类，其继承AnalysisEventListener接口，并实现invoke、doAfterAllAnalysed、invokeHeadMap等方法。
- invoke：一行一行读取数据，从第二行读取数据
- doAfterAllAnalysed：读取后执行
- invokeHeadMap：当你读取 Excel 文件时， 可以提供
表头的名称和对应的列索引映射
在测试类使用下行代码进行excel文件读取
EasyExcel.read(fileName, UserData.class,new ExcelListener()).sheet().doRead();
3、EasyExcel-导出操作
目的：在前端导出数据，并导出到excel
在DictController里添加方法importData,输入参数为HttpServletResponse response，进行导出数据字典操作。
其中在DictService接口中声明并在DictServiceImpl实现exportDictData方法，实现具体逻辑功能。
依靠传递的repsonse对象，可以实现下载设置：
Content-disposition 头部用于指示浏览器处理响应内容的方式。attachment 表示内容应该被当作附件下载
response.setContentType("application/vnd.ms-excel");response.setCharacterEncoding("utf-8");// 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系String fileName = "dict";response.setHeader("Content-disposition", "attachment;filename="+ fileName + ".xlsx");
写操作传递的类是DictEeVo.class，它与Dict的区别是仅包含必要的字段，专注于数据的展示，去掉了与数据库操作无关的字段（如时间和删除标记），而通过baseMapper返回的是Dict类型的List，所以要进行循环赋值。
BeanUtils 提供了一个简单的方式来复制对象的属性。这个方法会将 dictEeVo 对象的属性值复制到 dict 对象中，前提是这两个对象具有相同名称和兼容类型的属性。
for(Dict dict : dictList) {DictEeVo dictEeVo = new DictEeVo();BeanUtils.copyProperties((dict, dictEeVo);dictVoList.add(dictEeVo);}
最后在EasyExcel中写入dictVoList即可。
EasyExcel.write(response.getOutputStream(), DictEeVo.class).sheet("dict").doWrite(dictVoList);
前端操作
在list.vue放置element-ui按钮标签，其绑定方法exportData
在mehtods编写该方法
它会通过将浏览器的当前地址 (window.location.href) 设置为指定的 URL 来发起请求。
exportData(){//调用导出接口window.location.href="http://localhost:8202/admin/cmn/dict/exportData"}
4、EasyExcel-导入操作
目的：在excel中写入数据，并导入到数据库
在DictController里添加方法importData,输入参数为MultipartFile file，进行导入数据字典操作。
其中在DictService接口中声明并在DictServiceImpl实现importDictData方法，实现具体逻辑功能。
MultipartFile 是 Spring Framework 中的一个接口，用于处理上传的文件。它提供了对上传文件的抽象，允许开发者在控制器中轻松地处理文件上传的操作。
创建DictListener，并构造器传参basemapper，其中basemapper用来执行数据库添加操作，而操作对象只能是Dict，所以调用方法对dict进行复制操作
public DictListener(DictSetMapper dictSetMapper) {this.dictSetMapper = dictSetMapper;}...@Overridepublic void invoke(DictEeVo dictEeVo, AnalysisContext analysisContext) {//调用方法添加数据库Dict dict = new Dict();BeanUtils.copyProperties(dictEeVo,dict);dictSetMapper.insert(dict);}
前端处理
在导出的element-ui代码下面添加一行导入标签代码，其绑定方法importData
还希望在导入时，能出现一个弹窗，还是需要在<temple>中添加相关代码（放在table标签后）
dialogImportVisible在默认值设置为false，当其为true时，弹窗出现
:multiple是否上传多个组件
:on-success="onUploadSuccess"上传成功调用该方法，该方法设置执行关闭弹窗及刷新页面(自己编写的)
:action="'http://localhost:8202/admin/cmn/dict/importData'"点击上传时调用该方法，附url路径
<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:8202/admin/cmn/dict/importData'"
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>
在数据库中，需要把is_deleted字段默认值从1改为0，不然前端显示不出来