使用VUE+SpringBoot+EasyExcel?整合導入導出數(shù)據(jù)的教程詳解

更新時間：2022年05月15日 09:32:13 作者：look-word

這篇文章主要介紹了使用VUE+SpringBoot+EasyExcel?整合導入導出數(shù)據(jù)的過程詳解，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

1 前端

存放在resources/static 下

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入樣式 -->
    <link
      rel="stylesheet"
       rel="external nofollow" 
    />
    <!-- 引入組件庫 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="app-container">
        <div style="margin-bottom: 10px">
          <el-button
            @click="dialogVisible = true"
            type="primary"
            size="mini"
            icon="el-icon-download"
          >
            導入Excel
          </el-button>
          <el-dialog
            title="數(shù)據(jù)字典導入"
            :visible.sync="dialogVisible"
            width="30%"
          >
            <el-form>
              <el-form-item label="請選擇Excel文件">
                <el-upload
                  :auto-upload="true"
                  :multiple="false"
                  :limit="1"
                  :on-exceed="fileUploadExceed"
                  :on-success="fileUploadSuccess"
                  :on-error="fileUploadError"
                  :action="importUrl"
                  name="file"
                  accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                >
                  <!--accept 只接受某種格式的文件-->
                  <el-button size="small" type="primary">點擊上傳</el-button>
                </el-upload>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
            </div>
          </el-dialog>
          <!-- 導出 -->
          <el-button
            @click="exportData"
            type="primary"
            size="mini"
            icon="el-icon-upload2"
          >
            導出Excel
          </el-button>
          <!-- 數(shù)據(jù)展示 -->
          <el-table :data="list" stripe style="width: 100%">
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="birthday" label="生日" width="180">
            </el-table-column>
            <el-table-column prop="salary" label="薪資"> </el-table-column>
          </el-table>
          <div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[2, 5, 10,  20]"
              :page-size="pageSize"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          dialogVisible: false, //文件上傳對話框是否顯示
          list: [], // 字典的數(shù)據(jù)
          importUrl: 'http://localhost:8811/api/excel/import',
          pageNum: 1, // 頁數(shù)
          pageSize: 5, // 每頁條數(shù)
          total: 1000,
        }
      },
      created() {
        this.showList()
      },
      methods: {
        showList() {
          //使用自定義配置
          const request = axios.create({
            baseURL: 'http://localhost:8811', //url前綴
            timeout: 1000, //超時時間
            // headers: { token: 'helen123456' }, //攜帶令牌
          })
          request
            .get('/api/excel/list', {
              params: {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
              },
            })
            .then((res) => {
              this.total = res.data.size
              this.list = res.data.list
              console.log(res)
            })
        },
        // 上傳多于一個文件時
        fileUploadExceed() {
          this.$message.warning('只能選取一個文件')
        },
		// 導出
        exportData() {
          window.location.href = 'http://localhost:8811/api/excel/export'
        },
        //上傳成功回調
        fileUploadSuccess(response) {
          if (response.code === 0) {
            this.$message.success('數(shù)據(jù)導入成功')
            this.dialogVisible = false
          } else {
            this.$message.error(response.message)
          }
        },
        //上傳失敗回調
        fileUploadError(error) {
          this.$message.error('數(shù)據(jù)導入失敗')
        },
        /**
         * 用戶所選擇當前頁面展示的數(shù)據(jù)條數(shù)
         */
        handleSizeChange(val) {
          console.log(`每頁 ${val} 條`)
          this.pageSize = val
          this.showList()
        },
        handleCurrentChange(val) {
          console.log(`當前頁: ${val}`)
          this.pageNum = val
          this.showList()
        },
      },
    })
  </script>
</html>

2 數(shù)據(jù)庫

CREATE TABLE `student` (
  `name` varchar(255) DEFAULT NULL COMMENT '姓名',
  `birthday` datetime DEFAULT NULL COMMENT '生日',
  `salary` decimal(10,4) DEFAULT NULL COMMENT '薪資'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3 后端

3.1 contrller

StudentController

@Slf4j
@RestController
@CrossOrigin
@RequestMapping("/api/excel/")
public class StudentController {
    @Resource
    private StudentMapper studentMapper;
    @GetMapping("list")
    public HashMap<String, Object> list(@RequestParam int pageNum,@RequestParam int pageSize){
        // 分頁查詢
        Page<Student> page = new Page<>(pageNum, pageSize);
        studentMapper.selectPage(page,null);
        
        // 封裝數(shù)據(jù)
        HashMap<String, Object> map = new HashMap<>();
        ArrayList<ExcelStudentDTO> excelDictDTOList = new ArrayList<>();
        // 轉換數(shù)據(jù)
        page.getRecords().forEach(student -> {
            ExcelStudentDTO studentDTO = new ExcelStudentDTO();
            BeanUtils.copyProperties(student,studentDTO);
            excelDictDTOList.add(studentDTO);
        });
        
        map.put("list",excelDictDTOList);
        map.put("size",page.getTotal());
        return map;
    }

    /**
     * 導入
     * @param file 文件對象
     */
    @RequestMapping("import")
    @Transactional(rollbackFor = {Exception.class})
    public String importData( @RequestParam("file") MultipartFile file){
        try {
            // 讀取文件流
            EasyExcel.read
                    (file.getInputStream(),// 前端上傳的文件
                            ExcelStudentDTO.class,// 跟excel對應的實體類
                            new ExcelDictDTOListener(studentMapper))// 監(jiān)聽器 
                    .excelType(ExcelTypeEnum.XLSX)// excel的類型
                    .sheet("模板").doRead();
            log.info("importData finished");
        } catch (IOException e) {
           log.info("失敗");
           e.printStackTrace();
        }
        return "上傳成功";
    }

    /**
     * 導入
     */
    @GetMapping("export")
    public String exportData(HttpServletResponse response){

        try {
            // 設置響應體內容
            response.setContentType("application/vnd.ms-excel");
            response.setCharacterEncoding("utf-8");

            // 這里URLEncoder.encode可以防止中文亂碼 當然和easyexcel沒有關系
            String fileName = URLEncoder.encode("myStu", "UTF-8").replaceAll("\\+", "%20");
            response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName + ".xlsx");
            EasyExcel.write(response.getOutputStream()
                    ,ExcelStudentDTO.class).sheet().doWrite(studentMapper.selectList(null));
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "上傳成功";
    }

}

3.2 mapper

StudentMapper

@Mapper
public interface StudentMapper extends BaseMapper<Student> {
    void insertBatch(List<ExcelStudentDTO> list);
}

StudentMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="look.word.mapper.StudentMapper">
  <insert id="insertBatch" >
    insert into student(name, birthday, salary)
    values
    <foreach collection="list"   item="item" separator=",">
               (
        #{item.name} ,
        #{item.birthday} ,
        #{item.salary} 
        )
    </foreach>
  </insert>
</mapper>

3.3 bean

ExcelStudentDTO

導入數(shù)據(jù)時要保證excel中列名和ExcelStudentDTO一致奧

/**
 * excel對應的實體類
 * @author jiejie
 */
@Data
public class ExcelStudentDTO {
	// excel中的列名
    @ExcelProperty("姓名")
    private String name;
    @ExcelProperty("生日")
    private Date birthday;
    @ExcelProperty("薪資")
    private BigDecimal salary;
}

Student

/**
 * 數(shù)據(jù)庫對應的實體類
 * @author jiejie
 */
@Data
@TableName(value = "student")
public class Student {
    /**
     * 姓名
     */
    @TableField(value = "name")
    private String name;
    /**
     * 生日
     */
    @TableField(value = "birthday")
    private Date birthday;
    /**
     * 薪資
     */
    @TableField(value = "salary")
    private BigDecimal salary;
    public static final String COL_NAME = "name";
    public static final String COL_BIRTHDAY = "birthday";
    public static final String COL_SALARY = "salary";
}

3.4 listener

官方文檔

EasyExcel讀取文件需要用到

ExcelDictDTOListener

/**
 * 監(jiān)聽
 * 再讀取數(shù)據(jù)的同時 對數(shù)據(jù)進行插入操作
 * @author : look-word
 * @date : 2022-05-10 21:35
 **/
@Slf4j
//@AllArgsConstructor //全參
@NoArgsConstructor //無參
public class ExcelDictDTOListener extends AnalysisEventListener<ExcelStudentDTO> {
    /**
     * 每隔5條存儲數(shù)據(jù)庫，實際使用中可以3000條，然后清理list ，方便內存回收
     */
    private static final int BATCH_COUNT = 5;
    List<ExcelStudentDTO> list = new ArrayList<ExcelStudentDTO>();
    private StudentMapper studentMapper;
    //傳入mapper對象
    public ExcelDictDTOListener(StudentMapper studentMapper) {
        this.studentMapper = studentMapper;
    }
    /**
     *遍歷每一行的記錄
     * @param data
     * @param context
     */
    @Override
    public void invoke(ExcelStudentDTO data, AnalysisContext context) {
        log.info("解析到一條記錄: {}", data);
        list.add(data);
        // 達到BATCH_COUNT了，需要去存儲一次數(shù)據(jù)庫，防止數(shù)據(jù)幾萬條數(shù)據(jù)在內存，容易OOM
        if (list.size() >= BATCH_COUNT) {
            saveData();
            // 存儲完成清理 list
            list.clear();
        }
    }
    /**
     * 所有數(shù)據(jù)解析完成了 都會來調用
     */
    @Override
    public void doAfterAllAnalysed(AnalysisContext context) {
        // 這里也要保存數(shù)據(jù)，確保最后遺留的數(shù)據(jù)也存儲到數(shù)據(jù)庫
        saveData();
        log.info("所有數(shù)據(jù)解析完成！");
    }
    /**
     * 加上存儲數(shù)據(jù)庫
     */
    private void saveData() {
        log.info("{}條數(shù)據(jù)，開始存儲數(shù)據(jù)庫！", list.size());
        studentMapper.insertBatch(list);  //批量插入
        log.info("存儲數(shù)據(jù)庫成功！");
    }
}

3.5 config

mybatisPlus分頁插件

MybatisPlusConfig

@Configuration
public class MybatisPlusConfig {

    /**
     * 新的分頁插件,一緩和二緩遵循mybatis的規(guī)則,
     * 需要設置 MybatisConfiguration#useDeprecatedExecutor = false
     * 避免緩存出現(xiàn)問題(該屬性會在舊插件移除后一同移除)
     */
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        PaginationInnerInterceptor paginationInnerInterceptor = new PaginationInnerInterceptor();
        paginationInnerInterceptor.setDbType(DbType.MYSQL);
        paginationInnerInterceptor.setOverflow(true);
        interceptor.addInnerInterceptor(paginationInnerInterceptor);
        return interceptor;
    }
    @Bean
    public ConfigurationCustomizer configurationCustomizer() {
        return configuration -> configuration.setUseDeprecatedExecutor(false);
    }
}

3.6 配置文件

application.yaml

server:
  port: 8811
spring:
  datasource: # mysql數(shù)據(jù)庫連接
    type: com.zaxxer.hikari.HikariDataSource
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/2022_source_springboot?serverTimezone=GMT%2B8&characterEncoding=utf-8
    username: root
    password: 317311
mybatis-plus:
  configuration:# sql日志
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  mapper-locations:
    - classpath:mapper/*.xml

4 啟動測試

啟動springboot哦

頁面效果圖

導出效果

注意

導入數(shù)據(jù)時要保證excel中列名和ExcelStudentDTO一致奧

到此這篇關于使用VUE+SpringBoot+EasyExcel 整合導入導出數(shù)據(jù)的文章就介紹到這了,更多相關vue springboot easyexcel導入導出數(shù)據(jù)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue element-ui實現(xiàn)el-table表格多選以及回顯方式
這篇文章主要介紹了vue element-ui實現(xiàn)el-table表格多選以及回顯方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
解決vue axios的封裝請求狀態(tài)的錯誤提示問題
今天小編就為大家分享一篇解決vue axios的封裝請求狀態(tài)的錯誤提示問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue+Element-UI實現(xiàn)上傳圖片并壓縮
這篇文章主要為大家詳細介紹了Vue+Element-UI實現(xiàn)上傳圖片并壓縮功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-11-11
淺析vue3中組件的二次封裝
在實際開發(fā)中每個開發(fā)者應該都有經歷過對組件進行二次封裝,本文將從三個方面來基于 Element UI 的el-input組件簡單實現(xiàn)一下組件的二次封裝,有需要的可以參考下
2023-09-09
Vue實現(xiàn)簡易購物車頁面
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡易購物車頁面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
vue項目使用可選鏈操作符編譯報錯問題及解決
這篇文章主要介紹了vue項目使用可選鏈操作符編譯報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
一文詳解Vue中渲染器的簡單實現(xiàn)
渲染器用于完成渲染操作,比如在瀏覽器平臺上渲染器可以將虛擬DOM轉換為真實DOM,本文將通過一個簡單例子來帶大家理解Vue中渲染器的工作過程,并通過代碼示例講解的非常詳細,需要的朋友可以參考下
2024-05-05
Vue-cli中為單獨頁面設置背景色的實現(xiàn)方法
下面小編就為大家分享一篇Vue-cli中為單獨頁面設置背景色的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
vue中的循環(huán)對象屬性和屬性值用法
這篇文章主要介紹了vue中的循環(huán)對象屬性和屬性值用法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
Vue中的?watch監(jiān)聽屬性詳情
這篇文章主要介紹了Vue中的?watch監(jiān)聽屬性詳情，mputed計算屬性用來監(jiān)聽多個數(shù)據(jù)；watch?監(jiān)聽單個數(shù)據(jù)；本文將具體介紹的是?watch監(jiān)聽屬性，感興趣的小伙伴可以參考一下文章的具體內容，希望對你有所幫助
2021-12-12