SpringBoot+Vue實現(xiàn)EasyPOI導入導出的方法詳解
前言
Hello~ ,前后端分離系列和大家見面了,秉著能夠學到知識,學會知識,學懂知識的理念去學習,深入理解技術!
項目開發(fā)過程中,很大的需求都有 導入導出功能,我們依照此功能,來實現(xiàn)并還原真實企業(yè)開發(fā)中的實現(xiàn)思路
一、為什么做導入導出
為什么做導入導出
導入
在項目開發(fā)過程中,總會有一些統(tǒng)一的操作,例如插入數(shù)據(jù),系統(tǒng)支持單個插入數(shù)據(jù)效率太慢了,為此,我們可以將數(shù)據(jù)寫入Excel中,系統(tǒng)提供導入功能進行批量添加數(shù)據(jù),實現(xiàn)了數(shù)據(jù)的統(tǒng)一覆蓋,快捷操作!
導出
導出功能,實現(xiàn)了我們的Excel表數(shù)據(jù)查看,輸出為Excel表格后,我們可以很方便快捷的查看數(shù)據(jù),以及隨時修改數(shù)據(jù),達到了可視化的效果!
總之,導入導出是為了方便系統(tǒng)的操作,提升用戶體驗而開發(fā)的一個功能,目前絕大項目中,均會有導入導出的身影存在,可見導入導出的重要性!
二、什么是 EasyPOI
EasyPoi功能如同名字easy,主打的功能就是容易,讓一個沒見接觸過poi的人員就可以方便的寫出Excel導出,Excel模板導出,Excel導入,Word模板導出,通過簡單的注解和模板語言(熟悉的表達式語法),完成以前復雜的寫法。
EasyPOI 官方最新 文檔:http://easypoi.mydoc.io/
EasyPOI 主要功能
- 基于注解的導入導出,修改注解就可以修改Excel
- 支持常用的樣式自定義
- 基于map可以靈活定義的表頭字段
- 支持一對多的導出,導入
- 支持模板的導出,一些常見的標簽,自定義標簽
- 支持HTML/Excel轉換,如果模板還不能滿足用戶的變態(tài)需求,請用這個功能
- 支持word的導出,支持圖片,Excel
EasyPOI 的特點
- 設計精巧,使用簡單
- 接口豐富,擴展簡
- 單默認值多,write less do more
- spring mvc支持,web導出可以簡單明了
總而言之:EasyPOI 一個字 Easy !
三、項目簡介
項目需求
本項目要求使用 Spring Boot + Vue 完成前后端分離開發(fā),具體需求如下:
- 組件庫采用 ElementUI、持久化層 MyBatis、數(shù)據(jù)庫 采用 MySQL8.0
- 完成用戶列表的 增加,多條件查詢、分頁
- 提供用戶列表的導入功能,要求導入成功后 持久化到數(shù)據(jù)庫
- 提供用戶列表的導出功能,要求前端可下載導出的Excel列表
- 具體導入導出 使用 EasyPOI實現(xiàn),完成開發(fā)
- 整體編碼規(guī)范采用 Alibaba 開發(fā)手冊規(guī)范
嚴格根據(jù)需求進行功能開發(fā)!
效果圖
開發(fā)環(huán)境
項目結構
目錄介紹:
common: 公共類層,主要放置共有的類,提高開發(fā)效率,減少不必要的重復性開發(fā)
config:配置中心層,主要放置 全局的配置信息等
dto:前端頁面展示對象,傳輸對象層
entity:實體類層,與數(shù)據(jù)庫一 一對應
其它為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 依賴即可。
四、實戰(zhàn)開發(fā) 核心源碼
需求分析
項目已經搭建完畢,接下來進入開發(fā),主要的就是導入導出具體功能的實現(xiàn)
思路:
導入功能,首先新建Excel對應實體類,映射具體列,controller層編寫具體映射文件類, 調用內置方法完成讀取 Excel文件并映射為具體類集合,再將該集合轉為DTO,批量存入數(shù)據(jù)庫,完成導入操作
導出功能,controller層編寫方法并聲明reponse響應類,調用內置方法完成文件的讀取并存入 對應集合,瀏覽器即可得到響應消息,完成下載文件。(瀏覽器訪問通過 window.open 或者Nginx轉發(fā) 實現(xiàn)下載功能)
直接上代碼!
前端頁面
導入具體實現(xiàn)
<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', }; },
導出具體實現(xiàn)
<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") } }
前端代碼完成編寫,全部源碼 請看文末,源碼地址
后端核心實現(xiàn)
實體類 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 = "創(chuàng)建時間", format = "yyyy-MM-dd", width = 15) private Date createTime; }
導入功能具體實現(xiàn)
導入功能 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); } } //批量插入數(shù)據(jù)庫 sysUserMapper.batchInsert(userDTOList); }
導入功能 mapper層
Integer batchInsert(@Param("list") List<SysUserDTO> param);
導入功能 mapper 對應 xml,批量插入操作,采用forEach 循環(huán)完成
<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>
導出功能實現(xiàn)
導出 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())); //字節(jié)流輸出 ServletOutputStream out = response.getOutputStream(); //設置excel參數(shù) 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 開源地址
小結
以上就是【Bug 終結者】對 【前后端分離系列】 Spring Boot + Vue 實現(xiàn) EasyPOI 導入導出 的簡單介紹,導入導出是我們在項目中比較常用的功能,同時,前后端分離項目的開發(fā)提高了我們對技術的更深入的理解,懂得了前端和后端是如何完成的交互,以及數(shù)據(jù)的渲染等,總之,導入導出很重要,該項目也涉及到了批量刪除等實戰(zhàn)開發(fā)中比較常用的功能
到此這篇關于SpringBoot+Vue實現(xiàn)EasyPOI導入導出的方法詳解的文章就介紹到這了,更多相關SpringBoot EasyPOI導入導出內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
SpringCloud Feign遠程調用實現(xiàn)詳解
Feign是Netflix公司開發(fā)的一個聲明式的REST調用客戶端; Ribbon負載均衡、 Hystrⅸ服務熔斷是我們Spring Cloud中進行微服務開發(fā)非?;A的組件,在使用的過程中我們也發(fā)現(xiàn)它們一般都是同時出現(xiàn)的,而且配置也都非常相似2022-11-11