使用VUE+SpringBoot+EasyExcel 整合导入导出数据的教程详解

简介

数据的导入导出是一个web应用中很重要的功能，在开发中，往往需要对数据进行批量导入和导出。本文将介绍如何使用Vue+SpringBoot+EasyExcel进行数据的导入导出。

技术栈

前端：Vue.js
后端：SpringBoot
数据导入导出库：EasyExcel

准备工作

首先，需要安装并配置好Vue.js和SpringBoot。如果还没有安装的话，可以去官网查看详细的安装教程。

在此之上，我们还需要安装EasyExcel。EasyExcel 是阿里巴巴的开源 Java 项目，它实现了对 Excel 的读写操作，并提供了非常便捷的 API。我们可以通过引入依赖来使用 EasyExcel。

在SpringBoot中，可以使用以下方式引入 EasyExcel 的依赖：

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>easyexcel</artifactId>
    <version>2.2.6</version>
</dependency>

具体步骤

导入数据

1.编写数据模型

首先，需要定义一个与 Excel 文件中的数据对应的数据模型。可以通过以下代码定义一个用户模型：

@Data
public class User {
    @ExcelProperty("姓名")
    private String name;

    @ExcelProperty("年龄")
    private Integer age;

    @ExcelProperty("性别")
    private String gender;

    @ExcelProperty("手机号")
    private String phone;
}

在这个模型中，@ExcelProperty 注解表示该属性与 Excel 文件的某个单元格对应。

2.编写导入逻辑

接下来，可以编写一个上传 Excel 文件并导入数据的接口。可以使用 SpringMVC 提供的 @RequestParam 注解来接收上传的文件。接着，通过EasyExcel的ReadExcel类，将上传的 Excel 文件解析成数据模型，然后保存到数据库中。

以下是一个简单的导入数据的代码示例：

@PostMapping("/import")
public ResultVO importUser(@RequestParam("file") MultipartFile file) {
    String filename = file.getOriginalFilename();
    try {
        List<User> userList = EasyExcel.read(file.getInputStream(), User.class, new UserListener()).sheet().doReadSync();
        userService.insertBatch(userList);
        return ResultVO.success();
    } catch (IOException e) {
        e.printStackTrace();
        return ResultVO.fail("上传失败，请重试。");
    }
}

在这个代码片段中，UserService 是一个服务类，insertBatch 方法将批量插入数据到数据库中。UserListener 是继承分析头和分析行监听器的类，用于校验数据。在实际应用中，可以根据需要编写自定义的监听器。

3.编写前端页面

最后一步是编写一个前端页面，用于上传 Excel 文件并将数据导入到后台。

以下是一个简单的实现示例：

<template>
  <div>
    <input type="file" @change="importData"/>
  </div>
</template>

<script>
export default{
  methods: {
    importData(e){
      const file = e.target.files[0];
      if(!file){
        return;
      }
      const formData = new FormData();
      formData.append('file', file);
      axios.post('/import', formData)
      .then(res => {
        if(res.data.code === 200){
          alert('导入成功');
        } else {
          alert('导入失败');
        }
      })
      .catch(err => {
        console.error(err);
      });
    }
  }
}
</script>

在这个实现中，我们通过 file 类型的 input 元素来选择 Excel 文件。在选择上传的 Excel 文件后，通过 FormData 将文件上传到后台，然后调用后台提供的接口来导入数据。

导出数据

导出数据和导入数据很类似，只是操作的反过来了。下面我们详细解释一下如何导出数据。

1.编写导出逻辑

首先，需要编写一个查询数据的接口，然后将查询到的数据返回给前端。

然后通过EasyExcel的WriteExcel类，将数据写入Excel文件，并把excel文件返回给用户。

以下是一个简单的导出数据的代码示例：

@GetMapping("/export")
public void exportUser(HttpServletResponse response){
    String name = "用户信息.xlsx";
    try {
        List<User> userList = userService.selectAll();
        response.setContentType("application/vnd.ms-excel;charset=UTF-8");
        response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(name, "UTF-8"));
        EasyExcel.write(response.getOutputStream(), User.class).sheet("用户信息").doWrite(userList);
    } catch (IOException e) {
        e.printStackTrace();
    }
}

在这个代码中，selectAll() 方法是从数据库中查询数据的。然后，通过设置响应的 ContentType 和 Content-Disposition 把 Excel 文件输出到前端。

2.编写前端页面

最后一步是编写一个前端页面，用于触发导出数据的接口。

以下是一个简单的实现示例：

<template>
  <div>
    <button type="button" @click="exportData">导出数据</button>
  </div>
</template>

<script>
export default{
  methods: {
    exportData(){
      axios.get('/export', {responseType: 'blob'})
      .then(res => {
        const url = window.URL.createObjectURL(res.data);
        const link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', '用户信息.xlsx');
        document.body.appendChild(link);
        link.click();
      })
      .catch(err => {
        console.error(err);
        alert('导出失败');
      });
    }
  }
}
</script>

在这个实现中，我们通过一个按钮来触发导出数据。在按钮的点击事件中，我们使用 axios.get 请求后端的导出接口，并设置响应的 responseType 为 blob，然后在成功响应时，将接收到的 blob 数据转为 blob URL，并创建一个 a 标签，设置 href 和 download 属性，模拟用户点击 a 标签来触发下载。