前后端分离iview-admin二次开发+springboot导入excel的数据并插入到数据库

最新推荐文章于 2024-06-23 00:14:15 发布

原创

最新推荐文章于 2024-06-23 00:14:15 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#java #vue.js

本文介绍了如何在前后端分离的项目中，利用iview-admin进行Excel文件上传，并通过SpringBoot后端解析数据，将内容插入到数据库。前端部分涉及iview-excel组件，后端使用了POI处理Excel，重点在于controller和dao层的实现。文章未涵盖文件上传，而是聚焦于数据导入与存储。

如题

参考

iview-admin导入excel组件
 iview-excel导入数据库数据
 springboot实现excel的上传并解析文件内容

注：此文并不涉及前后端文件上传，可参考大神的Spring Boot + Vue 前后端分离，两种文件上传方式总结，我也根据这篇做出来的

废话不说，直接上代码

一、准备工作介绍

我上传的excel是这样的：xlsx（xls也可以），第一行列名，一共五行数据，两列
在这里插入图片描述

二、前端

<style lang="less">
  @import "./common.less";
</style>
<template>
  <div>
    <Card title="导入EXCEL">
      <Row>
        <Upload action="" :before-upload="handleBeforeUpload" accept=".xls, .xlsx">
          <Button icon="ios-cloud-upload-outline" :loading="uploadLoading" @click="handleUploadFile">读取文件</Button>
          
        </Upload>
        <Button @click="importData" type="info" style="margin-left:15px">上传</Button>
      </Row>
      <Row>
        <div class="ivu-upload-list-file" v-if="file !== null">
          <Icon type="ios-stats"></Icon>
            {
   
   {
   
    file.name }}
          <Icon v-show="showRemoveFile" type="ios-close" class="ivu-upload-list-remove" @click.native="handleRemove()"></Icon>
        </div>
      </Row>
      <Row>
        <transition name="fade">
          <Progress v-if="showProgress" :percent="progressPercent" :stroke-width="2">
            <div v-if="progressPercent == 100">
              <Icon type="ios-checkmark-circle"></Icon>
              <span>成功</span>
            </div>
          </Progress>
        </transition>
      </Row>
    </Card>
    <Row class="margin-top-10">
      <Table :columns="tableTitle"