医院信息化与智能化系统(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;
    }
    ...
    @Override
    public 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，不然前端显示不出来

秒客网

医院信息化与智能化系统(10)