SpringBoot+Vue实现批量添加数据

1、下载excel模板
1.1、配置后端服务的静态资源路径
在学习 SpringBoot 整合 SpringMVC 的时候，我们需要自己编写一个 配置类，来指定 SpringBoot 项目的静态资源的目录，配置类如下

package com.exam.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * 开启 mvc支持，设置 static 目录为类路径
 */
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    // 得到 classpath 的根路径， resources 目录下的所以路径都可以得到
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
    }
}

1.2在resource下面的static添加静态文件

然后在浏览器，这个静态资源的请求路径就是 http://localhost:xxx/download/你的文件名称
1.3、前端vue实现下载功能
href 表示资源的路径，
download 表示指定下载的文件

 <el-button class="btn-down" type="primary" style= "margin-left: 5%;margin-bottom: 20px;">
      <a  class='download' href='api/download/student.xlsx' download="student.xlsx" title="excel模板下载" style="color: white">下载学生模板</a>
</el-button>

注意：
1、href=‘api/download/student.xlsx’ 中的api是我配置过的，如果没有配置，要写成 href=‘http://localhost:xxxx/download/student.xlsx’
2、download=“student.xlsx” ，中的文件名一定要和后端的文件名保持一致，否则会下载失败。

2、上传excel文件并读取实现批量添加
2.1、 SpringBoot 后端部分功能实现 —— 配置文件部分

#开启文件上传
spring.servlet.multipart.enabled=true
#文件写入磁盘的阈值
spring.servlet.multipart.file-size-threshold=3KB
spring.servlet.multipart.max-file-size=50MB
spring.servlet.multipart.max-request-size=50MB

#自定义文件保存路径
gorit.file.root.path= e:/data/

如果不保存文件，可以不配置文件的写入、默认保存路径
2.2、添加poi的依赖

<!--        poi -->
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi</artifactId>
            <version>3.16</version>
        </dependency>

        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>3.16</version>
        </dependency>

2.3、编写controller

package com.exam.controller;


import com.alibaba.druid.util.StringUtils;
import com.exam.entity.ApiResult;
import com.exam.entity.Student;
import com.exam.service.StudentService;
import com.exam.serviceimpl.StudentServiceImpl;
import com.exam.util.ApiResultHandler;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.ss.usermodel.CellType;
import org.apache.poi.ss.usermodel.Row;
import org.apache.poi.ss.usermodel.Sheet;
import org.apache.poi.ss.usermodel.Workbook;
import org.apache.poi.xssf.usermodel.XSSFCell;
import org.apache.poi.xssf.usermodel.XSSFRow;
import org.apache.poi.xssf.usermodel.XSSFSheet;
import org.apache.poi.xssf.usermodel.XSSFWorkbook;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

@RestController
public class FileController {

    @Autowired
    private StudentServiceImpl studentService;

    // 设置固定的日期格式
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
    // 将 yml 中的自定义配置注入到这里
    @Value("${gorit.file.root.path}")
    private String filePath;
    // 日志打印
    private Logger log = LoggerFactory.getLogger("FileController");

    // 文件上传 （可以多文件上传）
    @PostMapping("/upload")
    public ApiResult fileUploads(HttpServletRequest request, @RequestParam("file") MultipartFile file) throws IOException {
//        // 得到格式化后的日期
        String format = sdf.format(new Date());
        // 获取上传的文件名称
        String fileName = file.getOriginalFilename();
        // 时间 和 日期拼接
        String newFileName = format + "_" + fileName;
        // 得到文件保存的位置以及新文件名
        File dest = new File(filePath + newFileName);
        try {
//             上传的文件被保存了
//            file.transferTo(dest);
//             打印日志
//            log.info("上传成功，当前上传的文件保存在 {}",filePath + newFileName);
//            读取文件，添加学生信息
            if(file == null){
                return ApiResultHandler.buildApiResult(400, "上传失败，文件为空！", 0);
            }
            //读取文件流
            InputStream inputStream = file.getInputStream();
            //文件名
            String fileName2 =file.getOriginalFilename();
            if (!fileName2.matches("^.+\\.(?i)(xls)$") && !fileName2.matches("^.+\\.(?i)(xlsx)$")) {

                return ApiResultHandler.buildApiResult(400, "上传失败，文件格式不正确！", 0);
            }
            Workbook wb = null;
            if (fileName2.matches("^.+\\.(?i)(xlsx)$")) {
                //xlsx格式
                wb = new XSSFWorkbook(inputStream);
            } else {
                //xls格式
                wb = new HSSFWorkbook(inputStream);
            }
            if (wb != null){
                //姓名 年级 性别 学号（密码）
                //默认读取第一个sheet
                Sheet sheet = wb.getSheetAt(0);
                if (sheet != null){
                    //最先读取首行
                    boolean firstRow = true;
                    List<Student> studentList = new ArrayList<>();
                    boolean isThrow = false;
                     //根据学号判断文件是否包含重复的学生，
                    //如果需要多个字段唯一确定一条数据可以使用List<Map<String, Object>>,
                    //下面同样使用contains判断是否已经包含同一条数据
                    List<String> phoneList=new ArrayList<>();
                    try {
                        if (sheet.getLastRowNum() > 0) {
                            for (int i = sheet.getFirstRowNum(); i <= sheet.getLastRowNum(); i++) {
                                //循环行
                                Student student = new Student();
                                Row row = sheet.getRow(i);
                                //首行  提取注解
                                if (firstRow) {
                                    if (row.getCell(0).getStringCellValue().equals("姓名")
                                            && row.getCell(1).getStringCellValue().equals("年级") //性别
                                            && row.getCell(2).getStringCellValue().equals("性别") //手机号
                                            && row.getCell(3).getStringCellValue().equals("学号"))//年级班级
                                       {
                                    } else {
                                        return ApiResultHandler.buildApiResult(400, "格式不正确，请下载模板进行参考", 0);
                                    }
                                    firstRow = false;
                                } else {
                                    //忽略空白行
//                                    if (row == null || ToolHelp.isRowEmpty(row)) {
//                                        continue;
//                                    }
                                    int theRow = i + 1;
                                    if (row.getCell(0) != null) {
                                        row.getCell(0).setCellType(CellType.STRING);
                                        String stuName = row.getCell(0).getStringCellValue();
                                        if (StringUtils.isEmpty(stuName)) {
                                            isThrow = true;
                                            return ApiResultHandler.buildApiResult(400, "导入失败(第" + theRow + "行,姓名不能为空)", 0);

                                        } else {
                                            student.setStudentName(stuName);
                                        }
                                    } else {
                                        isThrow = true;
                                        return ApiResultHandler.buildApiResult(400, "导入失败(第" + theRow + "行,姓名不能为空)", 0);

                                    }
                                    if (row.getCell(1) != null) {
                                        row.getCell(1).setCellType(CellType.STRING);
                                        String grade = row.getCell(1).getStringCellValue();
                                        if (StringUtils.isEmpty(grade)) {
                                            isThrow = true;
                                            return ApiResultHandler.buildApiResult(400, "导入失败(第" + theRow + "行,年级不能为空)", 0);

                                        } else {
                                            student.setGrade(grade);
                                        }
                                    } else {
                                        isThrow = true;
                                        return ApiResultHandler.buildApiResult(400, "导入失败(第" + theRow + "行,年级不能为空)", 0);
                                    }
                                    if (row.getCell(3) != null) {
                                        //学号为密码
                                        row.getCell(3).setCellType(CellType.STRING);
                                        String pwd = row.getCell(3).getStringCellValue();
                                        if (StringUtils.isEmpty(pwd)) {
                                            isThrow = true;
                                            return ApiResultHandler.buildApiResult(400, "导入失败(第" + theRow + "行,学号有误)", 0);

                                        } else {
                                            if (!phoneList.isEmpty() && phoneList.size() > 0) {
                                                //判断手机号是否重复
                                                if (phoneList.contains(pwd)) {
                                                    isThrow = true;
                                                    return ApiResultHandler.buildApiResult(400, "导入失败(第" + pwd + "行,学号有重复)", 0);
                                                } else {
                                                    phoneList.add(pwd);
                                                    student.setPwd(pwd);
                                                }
                                            } else {
                                                student.setPwd(pwd);
                                            }
                                        }
                                    } else {
                                        isThrow = true;
                                        return ApiResultHandler.buildApiResult(400, "导入失败(第" + theRow + "行,学号有重复)", 0);
                                    }


                                    if (row.getCell(2) != null) {
                                        row.getCell(2).setCellType(CellType.STRING);
                                        String sex = row.getCell(2).getStringCellValue();
                                        if (StringUtils.isEmpty(sex)) {
                                            isThrow = true;
                                            return ApiResultHandler.buildApiResult(400, "导入失败(第" + theRow + "行,性别不能为空)", 0);

                                        } else {
                                            student.setSex(sex);
                                        }
                                    } else {
                                        isThrow = true;
                                        return ApiResultHandler.buildApiResult(400, "导入失败(第" + theRow + "行,性别不能为空)", 0);
                                    }
                                    //默认为男
                                    student.setSex("男");
                                    studentList.add(student);
                                }
                                if (isThrow) {
                                    break;
                                }
                            }
                        } else {
                            isThrow = true;
                            return ApiResultHandler.buildApiResult(400, "导入失败,数据为空", 0);
                        }
                    }catch (Exception e) {
                        e.printStackTrace();
                    }

                    for (Student student :studentList){
                        studentService.add(student);
                    }
                }
            }
            // 自定义返回的统一的 JSON 格式的数据，可以直接返回这个字符串也是可以的。
            return ApiResultHandler.buildApiResult(200, "上传成功,添加成功！", 1);
        } catch (IOException e) {
            log.error(e.toString());
        }
        // 待完成 —— 文件类型校验工作
        return  ApiResultHandler.buildApiResult(400, "上传失败！", 0);
    }
}

注意：
1、ApiResult是封装返回的类，换成自己的
2、根据自己excel的单元格信息，正确的给实体类（student）的属性赋值。

2、3 前端vue实现上传文件

<el-button class="btn-upload" type="success" @click="handleUpdate">上传学生信息</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
			<span>
				<el-upload class="upload-demo"
                   ref="upload"
                   drag
                   action="/api/upload"
                   multiple
                   :auto-upload="false"
                   :limit="5"
                   :on-success="handleFilUploadSuccess"
                   :on-remove="handleRemove"
        >
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					<div class="el-upload__tip" slot="tip">只能上传 Excel 文件，且不超过500kb</div>
				</el-upload>
			</span>
      <span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleUpload">确 定</el-button>
			</span>
    </el-dialog>

data() {
    return {
      dialogVisible: false,
  },
methods: {
    handleRemove(file,fileList) {
      console.log(file,fileList);
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 文件上传成功时的函数
    handleFilUploadSuccess (res,file,fileList) {
      console.log(res,file,fileList)
      this.$message.success("上传成功")
    },
    handleUpdate () {
      this.dialogVisible = true;
    },
    // 处理文件上传的函数
    handleUpload () {
      // console.log(res,file)
      this.submitUpload()
      this.dialogVisible = false
    }
   }

.btn-upload {
  top: 70px;
  right: 40px;
  z-index: 100;
  box-shadow: 0 2px 12px 0 #67c23a;
}

2.4 效果截图