Bootstrap

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

医院信息化与智能化系统(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接口,并实现invokedoAfterAllAnalysedinvokeHeadMap等方法。

  • 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,不然前端显示不出来

;