(十一)Hutool插件实现文件导入导出--基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建

写在前面的话:

这里是为2023届本专科学生完成一个管理系统(主要是后台)的连续更新博客。持续时间为20天,每日练习时间约2-3小时。默认已有系统开发的基础知识,如SpringBoot、数据库、HTML、CSS、JavaScript等。

任务十 VUE侧边菜单栏导航https://blog.csdn.net/wdyan297/article/details/128749326?spm=1001.2014.3001.5501

任务十一 应用Hutool插件实现文件导入导出

任务十 进行了侧边菜单导航栏的维护,整个项目的结构和菜单导航的逻辑全部理顺了,一个后台管理系统的框架全部搭好了,后续就是继续添加页面,维护角色权限等内容了。本次任务我们作为一个拓展训练,使用Hutool插件实现文件导入导出。文件导入导出有的网站有需求,有的小型网站没有需求。通过本次任务,大家能够:
(1)基本学会使用Hutool插件实现文件导入导出。

Hutool是一个小而全的Java工具类库,通过静态方法封装,降低相关API的学习成本,提高工作效率,使Java拥有函数式语言般的优雅,让Java语言也可以“甜甜的”。
官方网址:https://hutool.cn/docs/#/poi/Excel%E7%94%9F%E6%88%90-ExcelWriter

1. 添加依赖,并更新maven。

<!--导出 导入-->
    <dependency>
        <groupId>cn.hutool</groupId>
        <artifactId>hutool-all</artifactId>
        <version>5.7.20</version>
    </dependency>
    <dependency>
         <groupId>org.apache.poi</groupId>
         <artifactId>poi-ooxml</artifactId>
         <version>5.1.0</version>
     </dependency>

注意: 如果在运行的时候出现依赖相关的错误,注意修改以下版本就可以。

2. UserContrller中添加一个导出接口

在UserContrller中添加一个导出接口。

 /*导出接口*/
    @GetMapping("/export")
    public void export(HttpServletResponse response) throws Exception{
        //从数据库查询出所有数据,如果需要获取其他的数据,就调用其他的方法
        List<User> list=userService.list();
        //通过工具类创建write 写出磁盘路径
        //ExcelWriter writer= ExcelUtil.getWriter(filesUpLoadPth + "/用户信息.xlsx");
        //这里的参数也可以设置绝对路径,本项目实现网页的下载,省略下载路径
        ExcelWriter writer= ExcelUtil.getWriter(true);
        writer.addHeaderAlias("username","用户名");//用别名的方法,实现Excel文件的标题是中文的
        writer.addHeaderAlias("password","密码");
        writer.addHeaderAlias("nickname","昵称");
        writer.addHeaderAlias("email","邮箱");
        writer.addHeaderAlias("phone","电话");
        writer.addHeaderAlias("address","地址");
        writer.addHeaderAlias("created_time","创建时间");
        //一次性写出list内部的对象到excel,强制输出标题
        writer.write(list,true);
        String filename= URLEncoder.encode("用户信息","UTF-8");
        //设置浏览器弹出响应格式,输出xlsx格式,官网也可以查看输出xls格式的方法
        response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");
        response.setHeader("Content-Disposition","attachment;filename="+ filename+".xlsx");
        ServletOutputStream out=response.getOutputStream();
        writer.flush(out, true);
        out.close();
        writer.close();
    }

3.运行项目

运行IDEA之后,直接到网页中输入地址:http://localhost:8084/user/export/,就可以出现“用户信息.xlsx”文件下载。
在这里插入图片描述
打开已经下载的“用户信息.xlsx”文件,可以看到数据表中的所有数据都已经完成下载,如果需要根据选择条目、分页下载等,只要修改接口中的查询数据接口即可。

4. UserContrller中添加一个导入接口

继续在UserContrller中添加一个导入接口。

/*excel导入*/
    @PostMapping("/import")
    public Boolean imp(MultipartFile file) throws Exception{  //注意方法名不能是import,这是一个关键字
        InputStream inputStream=file.getInputStream();
        ExcelReader reader=ExcelUtil.getReader(inputStream);
        List<User> list=reader.readAll(User.class);
        System.out.println(list);
        userService.saveBatch(list);//save是单条插入,saveBatch批量导入
        return true;
    }

5.使用postman进行测试

注意: KEY选择“file”文件。
在这里插入图片描述
另外:这里的导入模板文件,没有做特殊设置,直接可以使用前面导出的那个“用户信息.xlsx”,将里面的内容清空,然后填写或者复制上自己需要的内容即可。但是:这里暂时设置的为英文标题,如果需要中文字段名称,可以参考官网,改成能识别中文标题的模板文件。

6.为导出按钮添加事件exp

(1)为“导出"按钮添加事件exp。

<el-button type="primary" @click="exp">导出<i class="el-icon-top"></i></el-button>

(2) 编写exp方法。

exp(){
    window.open("http://localhost:8084/user/export");
},

(3)运行项目,实现所有数据的导出。
在这里插入图片描述

7. 为导入按钮添加事件

(1)在elementUI中找到upload组件。
在这里插入图片描述
(2)升级导入按钮。

<el-upload
      action="http://localhost:8084/user/import" :show-file-list="false" accept="xlsx" :on-success="handleExcelImportSuccess" style="display: inline-block">
      <el-button type="primary" style="margin-left:5px">导入<i class="el-icon-bottom"></i>       </el-button>
 </el-upload>

(3)编写钩子函数handleExcelImportSuccess。

handleExcelImportSuccess(){ //实现导入
         this.$message.success("导入成功");
         this.load();
  },

8. 运行项目

运行项目实现数据导出导入。
在这里插入图片描述

注意: 导入个模板页标头应该是英文与表中字段相对应。

任务总结:

本次任务,主要完成并掌握以下内容:
(1)Hutool插件实现文件导入导出。

猜你喜欢

转载自blog.csdn.net/wdyan297/article/details/128751723
今日推荐