从零开始实现放置游戏(六)——实现后台管理系统(4)Excel批量导入

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 前面我们已经实现了在后台管理系统中,对配置数据的增删查改。但每次添加只能添加一条数据,实际生产中,大量数据通过手工一条一条添加不太现实。本章我们就实现通过Excel导入配置数据的功能。这里我们还是以地图数据为例,其他配置项可参照此例。

 前面我们已经实现了在后台管理系统中,对配置数据的增删查改。但每次添加只能添加一条数据,实际生产中,大量数据通过手工一条一条添加不太现实。本章我们就实现通过Excel导入配置数据的功能。这里我们还是以地图数据为例,其他配置项可参照此例。

涉及的功能点主要有对office文档的编程、文件上传功能。流程图大致如下:


502227-20190620212815907-919213713.png


一、添加依赖项


  解析office文档推荐使用免费的开源组件POI,已经可以满足80%的功能需求。上传文件需要依赖commons-fileupload包。我们在pom中添加下列代码:


<!-- office组件 -->
<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi</artifactId>
    <version>4.1.0</version>
</dependency>
<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi-ooxml</artifactId>
    <version>4.1.0</version>
</dependency>
<!-- 文件上传 -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.4</version>
</dependency>


 另外,之前我们配置的mvc视图解析器只能解析简单的视图,上传文件需要支持multipart。在spring-mvc.xml中添加如下配置:


<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="defaultEncoding" value="UTF-8"></property>
    <property name="maxUploadSize" value="10485770"></property>
    <property name="maxInMemorySize" value="10485760"></property>
</bean>


这里配置了上传最大限制10MB,对于excel上传来说足矣。


二、文件上传、解析、落库


  在MapController中,我们添加3个方法


 MapController.java


 其中,importExcel方法,时候对应前端点击导入按钮时的后端入口,在这个方法中,我们定义了临时文件上传路径,校验了文件名后缀,保存上传的文件到服务器,并在操作结束后将临时文件删除; loadExcelData方法,利用POI组件读取解析Excel数据,Excel数据怎么配我们可以自由定义,这里读取时自由调整对应的行列即可,本例使用的Excel在文末给出的源码中可以找到; saveExcelData方法,将解析到的数据列表存入数据库,这里调用的batchInsert批量添加方法,在前面讲增删查改的时候已经提前实现了。


  另外,在使用POI组件读取Excel数据时,需要先判断单元格格式,我们创建一个工具类PoiUtil来实现此功能,这种在以后的其他项目中也可以使用的工具类,我们把它提取出来,放到util模块中,作为我们的通用工具包,以便日后使用。在util模块新建包com.idlewow.util.poi,并添加PoiUtil类:


 PoiUtil.java


工具类提取到util模块后,需要在util模块也添加对Poi的依赖,并在rms模块添加对util的依赖。这里util模块中,依赖项的scope为provided即可,仅在编译阶段使用,因为在引用此工具包的模块中肯定已经引入了POI依赖,无需重复打包:


<dependencies>
    <dependency>
        <groupId>org.apache.poi</groupId>
        <artifactId>poi</artifactId>
        <version>4.1.0</version>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>org.apache.poi</groupId>
        <artifactId>poi-ooxml</artifactId>
        <version>4.1.0</version>
        <scope>provided</scope>
    </dependency>
</dependencies>


三、修改前端页面


在地图列表页面list.jsp中,添加导入excel的按钮。


<form>
    …………
    …………
    <div class="layui-inline layui-show-xs-block">
        <button type="button" class="layui-btn" onclick="xadmin.open('添加地图','add',500,500)">
            <i class="layui-icon"></i>添加地图
        </button>
    </div>
    <div class="layui-upload layui-inline layui-show-xs-block">
        <button type="button" class="layui-btn layui-btn-normal" id="btnSelectFile">选择Excel</button>
        <button type="button" class="layui-btn" id="btnImport">开始导入</button>
    </div>
</form>


在列表页面的list.js中,绑定相应的按钮事件。


layui.use(['upload', 'table', 'form'], function () {
    …………
    …………
    layui.upload.render({
        elem: '#btnSelectFile',
        url: '/manage/map/importExcel',
        accept: 'file',
        exts: 'xls|xlsx',
        auto: false,
        bindAction: '#btnImport',
        done: function (result) {
            if (result.code === 1) {
                layer.alert(result.message, {icon: 6},
                    function () {
                        layui.layer.closeAll();
                        layui.table.reload('datatable');
                    });
            } else {
                layer.alert(result.message, {icon: 5});
            }
        }
    });
});


四、运行效果


  以上,excel导入的功能就全部完成了,我们运行下看下效果:


微信图片_20220423202744.gif


小结


  本章通过导入Excel文件,实现了批量录入的功能。


     下一章,预计实现添加、修改时的参数校验。



相关文章
|
6月前
|
SQL 缓存 easyexcel
面试官问10W 行级别数据的 Excel 导入如何10秒处理
面试官问10W 行级别数据的 Excel 导入如何10秒处理
267 0
|
2月前
|
SQL C# 数据库
EPPlus库的安装和使用 C# 中 Excel的导入和导出
本文介绍了如何使用EPPlus库在C#中实现Excel的导入和导出功能。首先,通过NuGet包管理器安装EPPlus库,然后提供了将DataGridView数据导出到Excel的步骤和代码示例,包括将DataGridView转换为DataTable和使用EPPlus将DataTable导出为Excel文件。接着,介绍了如何将Excel数据导入到数据库中,包括读取Excel文件、解析数据、执行SQL插入操作。
EPPlus库的安装和使用 C# 中 Excel的导入和导出
|
5月前
|
SQL 存储 数据库
excel导入sql数据库
将Excel数据导入SQL数据库是一个相对常见的任务,可以通过多种方法来实现。以下是一些常用的方法: ### 使用SQL Server Management Studio (SSMS) 1
|
1月前
|
iOS开发 MacOS Python
Python编程-macOS系统数学符号快捷键录入并生成csv文件转换为excel文件
Python编程-macOS系统数学符号快捷键录入并生成csv文件转换为excel文件
|
3月前
|
关系型数据库 MySQL Windows
MySQL数据导入:MySQL 导入 Excel 文件.md
MySQL数据导入:MySQL 导入 Excel 文件.md
|
4月前
|
存储 关系型数据库 MySQL
Excel 导入 sql3
【7月更文挑战第18天】
46 2
|
3月前
|
前端开发 easyexcel
SpringBoot+Vue3实现Excel导入
SpringBoot+Vue3实现Excel导入
110 0
|
5月前
|
easyexcel Java API
SpringBoot集成EasyExcel 3.x:高效实现Excel数据的优雅导入与导出
SpringBoot集成EasyExcel 3.x:高效实现Excel数据的优雅导入与导出
1065 1
|
4月前
|
前端开发 JavaScript PHP
技术心得:前端点击按钮,导入excel文件,上传到后台,excel接收和更新数据
技术心得:前端点击按钮,导入excel文件,上传到后台,excel接收和更新数据
52 0
|
4月前
|
JSON JavaScript 数据格式
vue 电子表格Excel的上传导入、导出下载、读取本地Excel、json转Excel
vue 电子表格Excel的上传导入、导出下载、读取本地Excel、json转Excel
332 0

热门文章

最新文章