医院信息化与智能化系统(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
,不然前端显示不出来