当前位置： 首页 > article >正文

通过easyexcel实现数据导入功能

article 2024/12/22 13:28:25

上一篇文章通过easyexcel导出数据到excel表格已经实现了简单的数据导出功能，这篇文章也介绍一下怎么通过easyexcel从excel表格中导入数据。

目录

一、前端代码

index.html

index.js

二、后端代码

controller

service

SongServiceImpl

三、功能预览

四、后端代码改进

频繁访问数据库问题

首先，需要在实体类中添加需要导出的字段，@ExcelIgnore注解表示该字段不会被导出到excel，当然，导入的时候也不会读这个字段。

package com.example.springboot.entity;

import com.alibaba.excel.annotation.ExcelIgnore;
import com.alibaba.excel.annotation.ExcelProperty;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.Data;

import java.io.Serializable;
import java.time.LocalDateTime;

/**
 * 歌曲
 * @author heyunlin
 * @version 1.0
 */
@Data
@TableName("song")
public class Song implements Serializable {
    private static final long serialVersionUID = 18L;

    @ExcelProperty("歌曲编号")
    @TableId(type = IdType.INPUT)
    private String id;

    /**
     * 歌曲名
     */
    @ExcelProperty("歌曲名")
    private String name;

    /**
     * 歌手
     */
    @ExcelProperty("歌手")
    private String singer;

    /**
     * 描述信息
     */
    @ExcelProperty("描述信息")
    private String note;

    /**
     * 最后一次修改时间
     */
    @ExcelIgnore
    @TableField("last_update_time")
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    private LocalDateTime lastUpdateTime;
}

一、前端代码

在之前的easyui-crud项目的基础上修改，切换到最新代码分支springboot-crud2.0

springboot+mybatis实现增删查改的入门项目。icon-default.png?t=N7T8https://gitee.com/he-yunlin/springboot-crud.git在原来的页面上添加一个对话框，对话框内放一个easyui的filebox，同时，让filebox镶嵌在一个form表单内，因为要对该表单进行必填验证，只有选择了文件才能点击上传按钮。

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>easyui crud应用</title>
		<link rel="stylesheet" href="/css/themes/icon.css" />
		<link rel="stylesheet" href="/css/themes/default/easyui.css" />
		<script src="/js/jquery.min.js"></script>
		<script src="/js/jquery.easyui.min.js"></script>
		<script src="/js/easyui-lang-zh_CN.js"></script>
		<script src="/js/datagrid-filter.js"></script>
		<script src="/js/index.js"></script>
	</head>
	
	<body>
		<div id="import_dialog" style="display:none;">
			<form id="import_form">
				<table style="border-spacing:5px;">
					<tr>
						<td>上传文件：</td>
						<td><input id="select_file" /></td>
					</tr>

					<tr>
						<td>文件名称：</td>
						<td><div id="file-name"></div></td>
					</tr>

					<tr>
						<td>文件大小：</td>
						<td><div id="file-size"></div></td>
					</tr>
				</table>
			</form>
		</div>

		<table id="song_list"></table>
	</body>
</html>

index.js

在原来的js代码中添加以下代码，这里渲染了刚刚在页面中添加的对话框和输入框，然后在表格的头部工具栏中添加了一个导入按钮。

let form = new FormData();

function importHandler() {
	requestUrl = "/song/import";

	$("#file-name").empty();
	$("#file-size").empty();

	$("#import_dialog").dialog("open");
}

$(document).ready(function() { 
    $("#select_file").filebox({
		buttonText: "选择文件",
		width: 200,
		required: true,
		onChange: function() {
			let file = $(this).context.ownerDocument.activeElement.files[0];

			form.append("file", file);

			$("#file-name").html(file.name);
			$("#file-size").html((file.size / 1024).toFixed(1) + "KB");
		}
	})

	$("#import_dialog").dialog({
		title: "数据导入",
		modal: true,
		closed: true,
		closable: true,
		draggable: false,
		buttons: [{
			iconCls: "icon-ok",
			text: "导入",
			handler: function() {
				let bool = $("#import_form").form("validate");

				if (bool) {
					$.ajax({
						url: requestUrl,
						data: form,
						cache: false,
						async: true,
						type: "POST",
						dataType: "json",
						processData: false,
						contentType: false,
						success: function (response) {
							$.messager.show({
								title: "系统消息",
								timeout: 5000,
								showType: "slide",
								msg: response.message,
							});

							$("#import_dialog").dialog("close");
							$("#member_list").datagrid("reload");
						},
						error: function (resp) {
							// 请求有响应
							if (resp && resp.responseJSON) {
								let response = resp.responseJSON;
								let status = resp.status;

								if (status) {
									let message;

									if (status === 404) { // 404 not found
										if (response.path) {
											message = "路径" + response.path + "不存在。";
										} else {
											message = response.message;
										}
									} else {
										message = response.message;
									}

									$.messager.alert("系统提示", message, "error");
									console.log("响应状态码：" + status + ", 响应消息：" + message);
								} else {
									console.log("请求没有响应状态码~");
								}
							} else {
								console.log("请求无响应~");
							}
						}
					});
				} else {
					$.messager.alert("系统提示", "请选择文件", "warning");
				}
			}
		}, {
			iconCls: "icon-cancel",
			text: "取消",
			handler: function() {
				$("#select_file").filebox("initValue", null);
				$("#import_dialog").dialog("close");
				form.delete("file");
			}
		}]
	});

    let datagrid = $("#song_list").datagrid({
		url: "/song/selectByPage",
		title: "歌曲列表",
		toolbar: [{
			iconCls: "icon-upload",
			text: "导入",
			handler: function() {
				importHandler();
			}
		}],
		columns: [[
			{field: "id", title: "id", width: 200},
			{field: "name", title: "name", width: 200, editor: "textbox"},
			{field: "singer", title: "singer", width: 200, editor: "textbox"},
			{field: "note", title: "note", width: 200, editor: "textbox"},
			{field: "lastUpdateTime", title: "lastUpdateTime", width: 200, sortable: true}
		]]
	});

});

二、后端代码

controller

在controller中添加一个接口，请求类型为post，路径为/import，因为import是java关键字，所以方法名不能使用import，改成importData。

/**
 * @author heyunlin
 * @version 1.0
 */
@RestController
@RequestMapping(path = "/song", produces="application/json;charset=utf-8")
public class SongController {

    private final SongService songService;

    @Autowired
    public SongController(SongService songService) {
        this.songService = songService;
    }

    @RequestMapping(value = "/import", method = RequestMethod.POST)
    public void importData(MultipartFile file) throws IOException {
        songService.importData(file);
    }

}

service

SongService接口添加importData()方法

/**
 * @author heyunlin
 * @version 1.0
 */
public interface SongService {

    void importData(MultipartFile file) throws IOException;
}

SongServiceImpl

通过easyexcel的API读取上传的文件，然后根据读取的结果，判断插入或修改现有数据。

/**
 * @author heyunlin
 * @version 1.0
 */
@Service
public class SongServiceImpl implements SongService {

    private final SongMapper songMapper;

    @Autowired
    public SongServiceImpl(SongMapper songMapper) {
        this.songMapper = songMapper;
    }

    @Override
    public void importData(MultipartFile file) throws IOException {
        EasyExcel.read(file.getInputStream(), Song.class, new ReadListener<Song>() {
            @Override
            public void invoke(Song data, AnalysisContext context) {
                Song song = songMapper.selectById(data.getId());

                if (song == null) {
                    songMapper.insert(data);
                } else {
                    songMapper.updateById(data);
                }
            }

            @Override
            public void doAfterAllAnalysed(AnalysisContext context) {

            }
        }).sheet().doRead();
    }

}

三、功能预览

如图，选择文件之后会显示文件的预览信息，点击导入，就会通过ajax上传文件到后台controller接口。

点击导入按钮，后端读取到了表格数据，并在控制台打印。

四、后端代码改进

上面的代码有一个很明显的问题

// 频繁查询数据库，excel表有多少行就查询多少次
Song song = songMapper.selectById(data.getId());

频繁访问数据库问题

对此，需要进行相应的改进，减少查询次数。

最有效的方法是一次性查询所有歌曲，然后以ID为key保存到一个map里，当然，这只适合数据量不是特别大的情况。

优化后的代码如下：

@Override
public void importData(MultipartFile file) throws IOException {
    // 查询全部歌曲信息
    List<Song> list = songMapper.selectList(null);
    
    // 把歌曲信息以ID为key保存到map中
    Map<String, Song> map = new HashMap<>(list.size());

    for (Song song : list) {
        map.put(song.getId(), song);
    }
    
    // 读excel表
    EasyExcel.read(file.getInputStream(), Song.class, new ReadListener<Song>() {
        @Override
        public void invoke(Song data, AnalysisContext context) {
            if (map.containsKey(data.getId())) {
                songMapper.updateById(data);
            } else {
                songMapper.insert(data);
            }
        }

        @Override
        public void doAfterAllAnalysed(AnalysisContext context) {

        }
    }).sheet().doRead();
}


http://www.kler.cn/a/136072.html

相关文章：

  • 中国新能源汽车公共充电桩数据合集（2002-2023年）
  • Restaurants WebAPI（二）——DTO/CQRS
  • web自动化测试知识总结
  • MySQL中EXPLAIN详细讲解
  • 源码分析之Openlayers中MousePosition鼠标位置控件
  • uniapp中的uni-file-picker组件上传多张图片到服务器
  • Django 入门学习总结6 - 测试
  • 海康Visionmaster-环境配置：运行出现 Vm.Core.Solu tion 报错的解决方法
  • 开源简历生成器OpenResume
  • requests库出现AttributeError问题的修复与替代方法
  • uniapp小程序定位；解决调试可以，发布不行的问题
  • 麒麟 ZYJ 服务器软件适配 参考示例
  • Minikube Mac安装使用
  • WordPress画廊插件Envira Gallery v1.9.7河蟹版下载
  • C++学习笔记——C++ deque和vector的区别
  • Using Set Processing Effectively 有效地使用集合处理
  • CTF-PWN-小tips
  • 【2023云栖】陈守元：阿里云开源大数据产品年度发布
  • ​LeetCode解法汇总2300. 咒语和药水的成功对数
  • kubernetes v1.24.7 + docker
  • Map 和 WeakMap：JavaScript 中的键值对集合
  • EI论文程序：Adaboost-BP神经网络的回归预测算法，可作为深度学习对比预测模型，丰富实验内容，自带数据集，直接运行！
  • 数据库管理工具，你可以用Navicat，但我选DBeaver！
  • vue3 setup展示数据
  • Unity 场景烘培 ——unity Post-Processing后处理1（四）
  • ClickHouse的 MaterializeMySQL引擎