天天看點

【前後端分離系列】 Spring Boot + Vue 實作 EasyPOI 導入導出

文章目錄

  • ​​⚡前言​​
  • ​​一、為什麼做導入導出?​​
  • ​​二、什麼是 EasyPOI?​​
  • ​​三、項目簡介​​
  • ​​⛄項目需求​​
  • ​​⏰效果圖​​
  • ​​✒️開發環境​​
  • ​​四、實戰開發 核心源碼​​
  • ​​♻️前端頁面​​
  • ​​♨️後端核心實作​​
  • ​​五、項目源碼​​
  • ​​⛵小結​​

⚡前言

Hello~ ,前後端分離系列和大家見面了,秉着能夠學到知識,學會知識,學懂知識的理念去學習,深入了解技術!

項目開發過程中,很大的需求都有 導入導出功能,我們依照此功能,來實作并還原真實企業開發中的實作思路

一、為什麼做導入導出?

為什麼做導入導出

導入

在項目開發過程中,總會有一些統一的操作,例如插入資料,系統支援單個插入資料效率太慢了,為此,我們可以将資料寫入Excel中,系統提供導入功能進行批量添加資料,實作了資料的統一覆寫,快捷操作!

導出

導出功能,實作了我們的Excel表資料檢視,輸出為Excel表格後,我們可以很友善快捷的檢視資料,以及随時修改資料,達到了可視化的效果!

總之,導入導出是為了友善系統的操作,提升使用者體驗而開發的一個功能,​

​目前絕大項目中,均會有導入導出的身影存在,可見導入導出的重要性!​

二、什麼是 EasyPOI?

EasyPoi功能如同名字easy,主打的功能就是容易,讓一個沒見接觸過poi的人員就可以友善的寫出Excel導出,Excel模闆導出,Excel導入,Word模闆導出,通過簡單的注解和模闆語言(熟悉的表達式文法),完成以前複雜的寫法。

EasyPOI 官方最新 文檔:​​http://easypoi.mydoc.io/​​

EasyPOI 主要功能
  • 基于注解的導入導出,修改注解就可以修改Excel
  • 支援常用的樣式自定義
  • 基于map可以靈活定義的表頭字段
  • 支援一對多的導出,導入
  • 支援模闆的導出,一些常見的标簽,自定義标簽
  • 支援HTML/Excel轉換,如果模闆還不能滿足使用者的變态需求,請用這個功能
  • 支援word的導出,支援圖檔,Excel

EasyPOI 的特點

  • 設計精巧,使用簡單
  • 接口豐富,擴充簡單
  • 預設值多,write less do more
  • spring mvc支援,web導出可以簡單明了

總而言之:EasyPOI 一個字 ​

​Easy ​

​!

三、項目簡介

⛄項目需求

本項目要求使用 Spring Boot + Vue 完成前後端分離開發,具體需求如下:

  • 元件庫采用 ElementUI、持久化層 MyBatis、資料庫 采用 MySQL8.0
  • 完成使用者清單的 增加,多條件查詢、分頁
  • 提供使用者清單的導入功能,要求導入成功後 持久化到資料庫
  • 提供使用者清單的導出功能,要求前端可下載下傳導出的Excel清單
  • 具體導入導出 使用 EasyPOI實作,完成開發
  • 整體編碼規範采用 Alibaba 開發手冊規範

嚴格根據需求進行功能開發!

⏰效果圖

【前後端分離系列】 Spring Boot + Vue 實作 EasyPOI 導入導出

✒️開發環境

項目結構
【前後端分離系列】 Spring Boot + Vue 實作 EasyPOI 導入導出

目錄介紹:

  • common: 公共類層,主要放置共有的類,提高開發效率,減少不必要的重複性開發
  • config:配置中心層,主要放置 全局的配置資訊等
  • dto:前端頁面展示對象,傳輸對象層
  • entity:實體類層,與資料庫一 一對應

其它為MVC三層架構層。

核心Pom 依賴
<!--        Easy POI-->
<dependency>
    <groupId>cn.afterturn</groupId>
    <artifactId>easypoi-base</artifactId>
    <version>3.2.0</version>
</dependency>
<dependency>
    <groupId>cn.afterturn</groupId>
    <artifactId>easypoi-web</artifactId>
    <version>3.2.0</version>
</dependency>
<dependency>
    <groupId>cn.afterturn</groupId>
    <artifactId>easypoi-annotation</artifactId>
    <version>3.2.0</version>
</dependency>      

重新加載Maven 依賴即可。

四、實戰開發 核心源碼

需求分析

項目已經搭建完畢,接下來進入開發,主要的就是導入導出具體功能的實作

思路:

  • 導入功能,首先建立Excel對應實體類,映射具體列,controller層編寫具體映射檔案類,調用内置方法完成讀取 Excel檔案并映射為具體類集合,再将該集合轉為DTO,批量存入資料庫,完成導入操作
  • 導出功能,controller層編寫方法并聲明reponse響應類,調用内置方法完成檔案的讀取并存入 對應集合,浏覽器即可得到響應消息,完成下載下傳檔案。(浏覽器通路通過window.open或者Nginx轉發實作下載下傳功能)

直接上代碼!

♻️前端頁面

導入具體實作
<template>
  <div class="el-form-item__label">
            <el-upload
              class="upload-demo"
              :action="importUrl"
              :on-success="uploadSuccess"
              accept=".xlsx"
              :show-file-list="false"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
            >
              <el-button type="success" plain icon="el-icon-download" size="small">導入</el-button>
            </el-upload>
        </div>
</template>

data() {
    return {
      importUrl: this.settings.apiUrl+'/sys/user/import_excel',
    };
  },      
導出具體實作
<template>
    <div class="el-form-item__label">
            <el-button type="warning" size="small" plain icon="el-icon-upload2" @click="exportExcel">導出</el-button>
        </div>
</template>

methods: {
    exportExcel() {
        window.open(this.settings.apiUrl + "/sys/user/export_excel")
    }
}      

前端代碼完成編寫,全部源碼 請看文末,源碼位址

♨️後端核心實作

實體類 SysUserExcel

package com.chen.excel;

import cn.afterturn.easypoi.excel.annotation.Excel;
import lombok.Data;

import java.util.Date;

/**
 * Excel 類,主要用于映射excel表
 * @author whc
 */
@Data
public class SysUserExcel {

    @Excel(name = "序号", orderNum = "0", format = "isAddIndex")
    private Integer index = 1;

    @Excel(name = "使用者賬号")
    private String username;

    @Excel(name = "真實姓名")
    private String realName;

    @Excel(name = "性别", replace = {"男_1", "女_2"})
    private Integer gender;

    @Excel(name = "電子郵箱", width = 25)
    private String email;

    @Excel(name = "手機号碼")
    private String mobile;

    @Excel(name = "建立時間", format = "yyyy-MM-dd", width = 15)
    private Date createTime;
}      
導入功能具體實作

導入功能 contorller 層

@PostMapping("import_excel")
    public ResultBean<Integer> import_excel(MultipartFile file) {
        ResultBean<Integer> res = sysUserService.importExcel(file);
        return res;
    }      

導入功能 service 層

@Override
public ResultBean<Integer> importExcel(MultipartFile file) {
    ImportParams importParams = new ImportParams();
    //标題行設定為1行,預設是0,可以不設定;依實際情況設定。
    importParams.setTitleRows(1);
    // 表頭設定為1行
    importParams.setHeadRows(1);
    try {
        //讀取excel
        List<SysUserExcel> sysUserExcelList = ExcelImportUtil.importExcel(file.getInputStream(), SysUserExcel.class, importParams);

        batchInsert(sysUserExcelList);
        return ResultBean.create(0, "success");
    } catch (Exception e) {
        log.error("導入 Excel 異常! e ==> {}", e);
        return ResultBean.create(10, "導入excel 異常!"+e.getMessage());
    }
}


public void batchInsert(List<SysUserExcel> param) throws Exception{
    //轉換為dto集合
    List<SysUserDTO> sysUserDTOList = BeanUtil.copyToList(param, SysUserDTO.class);

    //轉換集合
    List<SysUserDTO> userDTOList = new ArrayList<>();
    for (SysUserDTO sysUserDTO : sysUserDTOList) {
        if (!StringUtils.isEmpty(sysUserDTO.getUsername())) {
            sysUserDTO.setPassword("123");
            userDTOList.add(sysUserDTO);
        }
    }
    //批量插入資料庫
    sysUserMapper.batchInsert(userDTOList);

}      

導入功能 mapper層

Integer batchInsert(@Param("list") List<SysUserDTO> param);      

導入功能 mapper 對應 xml,批量插入操作,采用forEach 循環完成

<insert id="batchInsert">
    insert sys_user (username, password, real_name, gender, email, mobile, create_time)
    values
    <foreach collection="list" index="index" item="item" separator=",">
        (#{item.username}, #{item.password}, #{item.realName}, #{item.gender}, #{item.email}, #{item.mobile}, now())
    </foreach>
</insert>      
導出功能實作

導出 controller層

@GetMapping("export_excel")
public void export_excel(Map<String, Object> param, HttpServletResponse response) {
    sysUserService.exportExcel(param, response);
}      

導出 service 層

@Override
public void exportExcel(Map<String, Object> param, HttpServletResponse response) {
    try {
        List<SysUserDTO> res = sysUserMapper.list(null);
        List<SysUserExcel> sysUserExcelList = BeanUtil.copyToList(res, SysUserExcel.class);
        //設定資訊頭,告訴浏覽器内容為excel類型
        response.setHeader("content-Type", "application/vnd.ms-excel");
        //設定下載下傳名稱
        response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("使用者清單.xls", StandardCharsets.UTF_8.name()));

        //位元組流輸出
        ServletOutputStream out = response.getOutputStream();
        //設定excel參數
        ExportParams params = new ExportParams();
        //設定sheet名名稱
        params.setSheetName("使用者清單");
        //設定标題
        params.setTitle("使用者資訊表");

        Workbook workbook = ExcelExportUtil.exportExcel(params, SysUserExcel.class, sysUserExcelList);
        workbook.write(out);
    } catch (Exception e) {
        log.error("導出失敗! e ==> {}", e);
    }
}      

全部源碼,可在下方擷取~

五、項目源碼

GitHub: ​​GitHub 開源位址​​

GitCode: ​​GitCode 開源位址​​

⛵小結