vue+axios处理后端返回的十万条数据

好的，以下是一份简单的Vue+axios处理后端返回的十万条数据的代码示例： ``` <template> <div> <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" @current-change="getCurrentPageData" ></el-pagination> <ul> <li v-for="(item, index) in dataList" :key="index">{{ item }}</li> </ul> </div> </template> <script> import axios from 'axios'; import { mapGetters } from 'vuex'; export default { data() { return { dataList: [], // 数据列表 currentPage: 1, // 当前页码 pageSize: 20, // 每页显示的条数 total: 0 // 总条数 }; }, computed: { ...mapGetters('user', ['token']) }, created() { this.getCurrentPageData(); }, methods: { // 获取当前页的数据 getCurrentPageData() { axios.interceptors.request.use( config => { config.headers.Authorization = this.token; return config; }, error => { return Promise.reject(error); } ); axios .get(`/api/data?page=${this.currentPage}&pageSize=${this.pageSize}`) .then(res => { this.total = res.data.total; this.dataList = res.data.list; }) .catch(error => { console.log(error); }); } } }; </script> ``` 上面的代码中，我们使用了element-ui的el-pagination组件进行分页显示，同时使用axios的拦截器设置请求的header中的token，并发送GET请求到后端获取数据。在返回数据后，我们将总条数和当前页的数据进行存储，使用v-for指令进行数据的渲染。在页面切换时，通过监听@current-change事件，获取当前页的数据，从而实现分页显示。

<think>我们有一个任务：实现基于Vue和Java的Excel文件上传及数据解析功能。前端使用Vue实现文件上传，后端使用Java接收并解析Excel数据，并将解析后的数据存入数据库。 根据引用，我们可以知道： 1. 前端Vue部分：可以使用Element UI的Upload组件（如引用4所示）来实现文件上传，同时可以提供一个模板下载链接。 2. 后端Java部分：可以使用EasyExcel（如引用1和引用2）来解析Excel文件，并将解析得到的数据存入数据库。 步骤分解： 前端Vue部分： 1. 创建一个文件上传按钮，使用`<el-upload>`组件，并设置`auto-upload`为false（这样我们可以手动处理上传），同时设置`on-change`事件处理函数，当用户选择文件后触发。 2. 在`on-change`事件处理函数中，我们可以获取到文件对象，然后将其发送给后端。 3. 使用Axios（或其他HTTP库）将文件以FormData的形式发送到后端接口。 后端Java部分： 1. 创建一个Spring Boot控制器，接收文件上传请求。 2. 使用EasyExcel读取上传的Excel文件，解析为Java对象列表（如引用2所示）。 3. 将解析后的数据保存到数据库中（可以使用JPA、MyBatis等持久层框架）。 下面我们分别给出代码示例： 前端Vue代码（使用Element UI）： ```vue <template> <div> <!-- 下载模板链接 --> <a href="/templates/your-template.xlsx" download>下载模板</a> <!-- 上传文件按钮 --> <el-upload action="" :auto-upload="false" :on-change="handleFileChange" :show-file-list="false" accept=".xlsx, .xls" > <el-button type="primary">上传Excel文件</el-button> </el-upload> </div> </template> <script> import axios from 'axios'; export default { methods: { handleFileChange(file) { // 创建一个FormData对象，用于上传文件 const formData = new FormData(); formData.append('file', file.raw); // file.raw是上传的文件对象 // 发送到后端 axios.post('/api/upload-excel', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { console.log('上传成功', response.data); // 可以在这里处理上传成功后的操作，例如提示用户 this.$message.success('文件上传并解析成功'); }).catch(error => { console.error('上传失败', error); this.$message.error('文件上传失败'); }); } } }; </script> ``` 后端Java代码（Spring Boot + EasyExcel）： 1. 添加依赖（pom.xml）： ```xml <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> <version>3.1.1</version> <!-- 请使用最新版本 --> </dependency> ``` 2. 创建实体类（对应Excel中的一行数据）： ```java public class Shop { // 根据Excel列定义字段，使用注解匹配列 @ExcelProperty("店铺名称") private String name; @ExcelProperty("地址") private String address; // 省略getter和setter } ``` 3. 创建监听器（用于逐行解析，也可以直接使用EasyExcel.read一次性读取）： 但是根据引用2，我们可以使用监听器模式，这样可以在读取大文件时节省内存。 4. 创建Service层（解析Excel）： ```java import com.alibaba.excel.EasyExcel; import com.alibaba.excel.context.AnalysisContext; import com.alibaba.excel.event.AnalysisEventListener; import org.springframework.stereotype.Service; import org.springframework.web.multipart.MultipartFile; import java.io.IOException; import java.io.InputStream; import java.util.ArrayList; import java.util.List; @Service public class ExcelService { public List<Shop> parseExcel(MultipartFile file) throws IOException { InputStream inputStream = file.getInputStream(); List<Shop> list = new ArrayList<>(); EasyExcel.read(inputStream, Shop.class, new AnalysisEventListener<Shop>() { @Override public void invoke(Shop shop, AnalysisContext analysisContext) { list.add(shop); } @Override public void doAfterAllAnalysed(AnalysisContext analysisContext) { System.out.println("解析完成"); } }).sheet().doRead(); return list; } } ``` 5. 创建Controller层： ```java import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; import java.io.IOException; import java.util.List; @RestController public class UploadController { @Autowired private ExcelService excelService; @PostMapping("/api/upload-excel") public String uploadExcel(@RequestParam("file") MultipartFile file) { try { List<Shop> shops = excelService.parseExcel(file); // 这里可以将shops保存到数据库 // shopRepository.saveAll(shops); // 假设有shopRepository return "上传成功，解析到" + shops.size() + "条数据"; } catch (IOException e) { e.printStackTrace(); return "解析失败"; } } } ``` 6. 数据库存储：需要创建ShopRepository（使用Spring Data JPA）： ```java import org.springframework.data.jpa.repository.JpaRepository; public interface ShopRepository extends JpaRepository<Shop, Long> { } ``` 然后在Controller中注入ShopRepository，并在解析完成后调用保存。 注意：以上代码是一个简单示例，实际应用中需要增加错误处理（如引用1中提到的空字符、必填项为空等校验），可以在监听器中加入校验逻辑，或者在保存到数据库前进行校验。 关于错误校验，EasyExcel支持使用Validator进行校验，可以参考官方文档。 这样，我们就实现了前端Vue上传Excel文件，后端Java解析并存入数据库的功能。 根据要求，生成相关问题： §§相关问题§§ 1. 如何在前端Vue中实现文件上传的进度显示？ 2. 后端使用EasyExcel解析Excel时，如何对数据进行校验（例如非空、格式等）？ 3. 如果Excel文件很大，如何优化后端解析过程以避免内存溢出？ 4. 如何实现模板下载功能（后端提供模板文件）？ 5. 如何将解析后的数据分批次存入数据库以提高性能？</think>### 基于Vue和Java的Excel文件上传与解析实现方案 #### 一、前端Vue实现文件上传 1. **使用Element UI上传组件** ```vue <template> <div> <el-upload action="/api/upload-excel" // 后端接口地址 :auto-upload="false" // 关闭自动上传 :on-change="handleFileChange" :show-file-list="false" accept=".xlsx,.xls"> <el-button type="primary">选择Excel文件</el-button> </el-upload> <el-button @click="submitUpload">开始上传</el-button> <a href="/api/download-template" style="margin-left:20px">下载模板</a> </div> </template> <script> export default { data() { return { file: null }; }, methods: { handleFileChange(file) { this.file = file.raw; // 保存文件对象 }, submitUpload() { const formData = new FormData(); formData.append('file', this.file); this.$axios.post('/api/upload-excel', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { console.log('上传成功', response.data); }).catch(error => { console.error('上传失败', error); }); } } }; </script> ``` #### 二、后端Java解析Excel（使用EasyExcel） 1. **添加Maven依赖** ```xml <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> <version>3.3.2</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> ``` 2. **定义数据模型** ```java public class Shop { @ExcelProperty("店铺名称") private String name; @ExcelProperty("地址") private String address; @ExcelProperty("月销售额") private BigDecimal monthlySales; // Getters & Setters } ``` 3. **Excel解析服务** ```java @Service public class ExcelService { @Autowired private ShopRepository shopRepository; public void importExcel(MultipartFile file) { try (InputStream inputStream = file.getInputStream()) { EasyExcel.read(inputStream, Shop.class, new AnalysisEventListener<Shop>() { private final List<Shop> batchList = new ArrayList<>(); @Override public void invoke(Shop shop, AnalysisContext context) { // 数据校验 if (StringUtils.isEmpty(shop.getName())) { throw new RuntimeException("店铺名称不能为空"); } batchList.add(shop); // 分批保存（每100条） if (batchList.size() >= 100) { saveBatch(); } } @Override public void doAfterAllAnalysed(AnalysisContext context) { saveBatch(); // 处理剩余数据 } private void saveBatch() { shopRepository.saveAll(batchList); batchList.clear(); } }).sheet().doRead(); } catch (IOException e) { throw new RuntimeException("Excel解析失败", e); } } } ``` 4. **文件上传控制器** ```java @RestController @RequestMapping("/api") public class UploadController { @Autowired private ExcelService excelService; @PostMapping("/upload-excel") public ResponseEntity<String> uploadExcel(@RequestParam("file") MultipartFile file) { excelService.importExcel(file); return ResponseEntity.ok("数据导入成功"); } @GetMapping("/download-template") public ResponseEntity<Resource> downloadTemplate() { ClassPathResource template = new ClassPathResource("templates/shop-template.xlsx"); return ResponseEntity.ok() .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=shop-template.xlsx") .body(template); } } ``` #### 三、关键实现要点 1. **前端注意事项** - 使用`FormData`处理文件上传 - 设置`Content-Type: multipart/form-data`请求头 - 提供模板下载功能确保数据格式正确[^1] 2. **后端优化策略** - **内存优化**：使用EasyExcel流式解析避免OOM[^2] - **批量写入**：分批保存数据库（如每100条） - **数据校验**： ```java @ExcelProperty(value = "月销售额", validator = @Validator(clazz = PositiveNumberValidator.class)) private BigDecimal monthlySales; ``` - **错误处理**：捕获`ExcelAnalysisException`返回具体错误行号 3. **数据库存储** ```java public interface ShopRepository extends JpaRepository<Shop, Long> { // 自定义查询方法 } ``` #### 四、完整工作流程 1. 用户下载Excel模板 → 2. 按模板填写数据 → 3. 前端选择文件并上传 → 4. 后端流式解析 → 5. 数据校验转换 → 6. 分批存入数据库 → 7. 返回操作结果 > **最佳实践**：对于10万+大数据量，建议采用分片上传+异步处理机制，可通过WebSocket通知前端处理进度[^3][^4]。