目录
剧情背景
最近博主接到老大安排的一个需求,在系统的Web页面查看订单的时候,可将订单批量导出至用户本地,以表格的方式呈现。
这个需求本来前端就可以纯JS实现,或者通过其他前端组件,奈何前端人员太菜,不知所云……所以博主就广集天下贤士的才智,最终采集到了一段相关的JS代码,又结合我写好的后端接口,返回过来JSON数组之后一顿操作……
话不多说,进入正题!按照以下流程跟我走,可以从0开始完成整个过程,全透明。
一、创建数据库表and插入测试数据
新建学生表:
CREATE TABLE `student` (
`id` int(4) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
`age` int(4) DEFAULT NULL,
`phone` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
然后插入5条测试数据:
INSERT INTO student(`name`,age,phone)
VALUES('小王',23,'13256353663'),
('小张',19,'18956875328'),
('小李',18,'13569823262'),
('小方',21,'15686523156'),
('小赵',16,'18256353668');
二、创建后端环境及数据接口
这里采用SSM作为后端开发环境,需要用到的依赖包除基本的SSM所需的之外,还需要有阿里巴巴的fastJson,具体的Spring配置文件、MyBatis配置文件、web.xml这里就不列举了,相信各位搭建环境还是没问题的,这里只贴出来pom.xml,然后就直接从三层架构下手了。
pom.xml依赖:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.lianqiao.dache</groupId>
<artifactId>manager</artifactId>
<version>1.0</version>
<packaging>war</packaging>
<name>money Maven Webapp</name>
<!-- FIXME change it to the project's website -->
<url>http://www.example.com</url>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.7</maven.compiler.source>
<maven.compiler.target>1.7</maven.compiler.target>
</properties>
<build>
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.properties</include>
<include>**/*.xml</include>
</includes>
<filtering>false</filtering>
</resource>
</resources>
</build>
<dependencies>
<dependency>
<groupId>javax.annotation</groupId>
<artifactId>javax.annotation-api</artifactId>
<version>1.3.1</version>
</dependency>
<!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<!-- https://mvnrepository.com/artifact/taglibs/standard -->
<dependency>
<groupId>taglibs</groupId>
<artifactId>standard</artifactId>
<version>1.1.2</version>
</dependency>
<!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.11</version>
<scope>test</scope>
</dependency>
<!--Spring模块-->
<!-- https://mvnrepository.com/artifact/org.springframework/spring-aop -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aop</artifactId>
<version>5.1.3.RELEASE</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework/spring-aspects -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aspects</artifactId>
<version>5.1.3.RELEASE</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework/spring-beans -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-beans</artifactId>
<version>5.1.3.RELEASE</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework/spring-context -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>5.1.3.RELEASE</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework/spring-context-support -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context-support</artifactId>
<version>5.1.1.RELEASE</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework/spring-core -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>5.1.3.RELEASE</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework/spring-expression -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-expression</artifactId>
<version>5.1.3.RELEASE</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework/spring-instrument -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-instrument</artifactId>
<version>5.1.3.RELEASE</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>5.1.3.RELEASE</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework/spring-messaging -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-messaging</artifactId>
<version>5.1.3.RELEASE</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework/spring-test -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>5.1.3.RELEASE</version>
<scope>test</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework/spring-tx -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>5.1.3.RELEASE</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework/spring-web -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>5.1.3.RELEASE</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.1.3.RELEASE</version>
</dependency>
<!-- https://mvnrepository.com/artifact/aopalliance/aopalliance -->
<dependency>
<groupId>aopalliance</groupId>
<artifactId>aopalliance</artifactId>
<version>1.0</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.aspectj/aspectjweaver -->
<dependency>
<groupId>org.aspectj</groupId>
<artifactId>aspectjweaver</artifactId>
<version>1.9.2</version>
</dependency>
<!-- https://mvnrepository.com/artifact/log4j/log4j -->
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.17</version>
</dependency>
<!--文件模块-->
<!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>
<!-- https://mvnrepository.com/artifact/commons-logging/commons-logging -->
<dependency>
<groupId>commons-logging</groupId>
<artifactId>commons-logging</artifactId>
<version>1.2</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.apache.commons/commons-lang3 -->
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.8.1</version>
</dependency>
<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
<!--MyBatis与Spring模块-->
<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis-spring -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.3.2</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.apache.commons/commons-pool2 -->
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-pool2</artifactId>
<version>2.6.0</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.apache.commons/commons-dbcp2 -->
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-dbcp2</artifactId>
<version>2.5.0</version>
</dependency>
<!--MyBatis模块-->
<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.4.6</version>
</dependency>
<!--数据库模块-->
<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.13</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.47</version>
</dependency>
</dependencies>
</project>
1、创建POJO实体类——Student
package com.lianqiao.dache.entity;
/** 学生对象实体类
* @author 秋枫艳梦
* @date 2019-04-09
* */
public class Student {
//学生编号
private int id;
//学生姓名
private String name;
//学生年龄
private int age;
//学生手机
private String phone;
/**=============分割线,以下是getter、setter方法============*/
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
}
2、创建数据层接口——StudentDao
package com.lianqiao.dache.dao;
import com.lianqiao.dache.entity.Student;
import java.util.List;
/** 学生信息数据层接口
* @author 秋枫艳梦
* @date 2019-04-09
* */
public interface StudentDao {
//获取学生列表
List<Student> getStudentList();
}
3、创建数据库映射文件——StudentMapper
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.lianqiao.dache.dao.StudentDao">
<!--注意:不要盲目复制粘贴,注意你的Student和StudentDao接口的路径-->
<select id="getStudentList" resultType="Student">
select * from student
</select>
</mapper>
4、创建服务层接口——StudentService
package com.lianqiao.dache.service;
import com.lianqiao.dache.entity.Student;
import java.util.List;
/** 学生信息服务层接口
* @author 秋枫艳梦
* @date 2019-04-09
* */
public interface StudentService {
//获取学生列表
List<Student> getStudentList();
}
5、创建服务层组件——StudentServiceImpl
package com.lianqiao.dache.service.impl;
import com.lianqiao.dache.dao.StudentDao;
import com.lianqiao.dache.entity.Student;
import com.lianqiao.dache.service.StudentService;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.List;
/** 学生信息服务层组件
* @author 秋枫艳梦
* @date 2019-04-09
* */
@Service("studentService")
public class StudentServiceImpl implements StudentService {
//装配数据层组件
@Resource(name = "studentDao")
private StudentDao studentDao;
/** 获取学生列表
* @return Student集合
* */
@Override
public List<Student> getStudentList() {
return studentDao.getStudentList();
}
}
6、创建后端控制器——StudentController
package com.lianqiao.dache.controller;
import com.alibaba.fastjson.JSON;
import com.lianqiao.dache.service.StudentService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.annotation.Resource;
/** 学生信息模块后端控制器
* @author 秋枫艳梦
* @date 2019-04-09
* */
@Controller
public class StudentController {
//装配业务层组件
@Resource(name = "studentService")
private StudentService studentService;
/** 学生列表数据接口
* @return JSON字符串
* */
@RequestMapping(value = "/student/info/list",produces = {"application/json;charset=utf-8"})
@ResponseBody
public Object getStudentList(){
return JSON.toJSON(studentService.getStudentList());
}
/** 跳转到主页面
* @return 视图名称
* */
@RequestMapping(value = "student.html")
public String goPage(){
return "student";
}
}
7、撸一个前端页面
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
<title>导出学生信息</title>
<script type="text/javascript" src="/statics/js/jquery-3.2.1.min.js"></script>
<script>
window.onload=function () {
getInfo();
}
/**
* 发送Ajax请求,绑定表格数据
* */
function getInfo() {
$.ajax({
url:"/student/info/list",
dataType:"json",
success:function (dataJSON) {
var str="";
for (var i = 0; i < dataJSON.length; i++) {
str+="<tr>\n" +
"<td>"+dataJSON[i].id+"</td>\n" +
"<td>"+dataJSON[i].name+"</td>\n" +
"<td>"+dataJSON[i].age+"</td>\n" +
"<td>"+dataJSON[i].phone+"</td>\n" +
"</tr>";
}
$("#studentInfo").html(str);
}
});
}
/**
* 导出数据
* */
function outData() {
$.ajax({
url:"/student/info/list",
dataType:"json",
success:function (dataJSON) {
//列标题,逗号隔开,每一个逗号就是隔开一个单元格
var str = "学生编号,学生姓名,学生年龄,学生电话\n";
//遍历JSON数组,拼接Excel表格的每一行记录
for (var i = 0; i < dataJSON.length; i++) {
str+=dataJSON[i].id+"\t,"+dataJSON[i].name+"\t,"+dataJSON[i].age+"\t,"+dataJSON[i].phone+"\t,\n";
}
//解决中文乱码
var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
//通过a标签实现
var link = document.createElement("a");
link.href = uri;
//对文件命名,后缀为csv、xls、xlsx都行
link.download = "学生列表.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
});
}
</script>
</head>
<body>
<a href="javascript:;" onclick="outData()">导出数据</a>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>手机</th>
</tr>
</thead>
<tbody id="studentInfo">
</tbody>
</table>
</body>
</html>
然后启动项目,访问localhost:8080/student.html,就可以看到如下页面了,再点击导出,就提示下载CSV文件了。
然后打开下载下来的文件,是不是跟我们页面上的效果一样呢?
总结
细心的朋友可以发现,其实页面上的表格跟导出的那一段JS代码,没有半毛钱的关系,我导出的时候仍然是走了一次Ajax请求,拿到数据之后再拼接文件的内容。
其实这一点可以通过纯前端JS实现,大不了就通过jQuery选择器获取页面中表格里的值呗,只不过我不喜欢那样,前端又菜鸡不会通过纯JS导出,所以我一个Java后端只能这样实现了……
还有一点,好多人问我可不可以设置下载路径,大家也看到了这是Web端的产品,我们只能做到向浏览器发起一个下载文件的请求,具体下载到哪还是根据浏览器的设置来的……
重点还是那一段JS,大家一定要举一反三,根据业务设置表头,拿到数据之后拼接文件内容就行了。