Skip to content

Commit 0253039

Browse files
xkcodingxkcoding
committed
✨ spring-boot-demo-ureport2 完成
1 parent c659893 commit 0253039

File tree

3 files changed

+244
-26
lines changed

3 files changed

+244
-26
lines changed

‎demo-ureport2/README.md‎

Lines changed: 231 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,260 @@
1-
UReport2 是一款基于架构在 Spring 之上纯 Java 的高性能报表引擎，通过迭代单元格可以实现任意复杂的中国式报表。 在 UReport2 中，提供了全新的基于网页的报表设计器，可以在 Chrome、Firefox、Edge 等各种主流浏览器运行（IE 浏览器除外）。使用 UReport2，打开浏览器即可完成各种复杂报表的设计制作
1+
# spring-boot-demo-ureport2
22

3-
[https://www.w3cschool.cn/ureport](https://www.w3cschool.cn/ureport)
3+
> 本 demo 主要演示了 Spring Boot 项目如何快速集成 ureport2 实现任意复杂的中国式报表功能。
44
5-
## 单机使用
5+
UReport2 是一款基于架构在 Spring 之上纯 Java 的高性能报表引擎，通过迭代单元格可以实现任意复杂的中国式报表。 在 UReport2 中，提供了全新的基于网页的报表设计器，可以在 Chrome、Firefox、Edge 等各种主流浏览器运行（IE 浏览器除外）。使用 UReport2，打开浏览器即可完成各种复杂报表的设计制作。
66

7-
- 1. 引入 jar 依赖
7+
## 1. 主要代码
88

9-
```xml
9+
因为官方没有提供一个 starter 包，需要自己集成，这里使用 [pig](https://github.com/pig-mesh/pig) 作者 [冷冷同学](https://github.com/lltx) 开发的 starter 偷懒实现，这个 starter 不仅支持单机环境的配置，同时支持集群环境。
10+
11+
### 1.1. 单机使用
12+
13+
#### 1.1.1. `pom.xml` 新增依赖
1014

15+
```xml
1116
<dependency>
1217
<groupId>com.pig4cloud.plugin</groupId>
1318
<artifactId>ureport-spring-boot-starter</artifactId>
1419
<version>0.0.1</version>
1520
</dependency>
1621
```
1722

18-
- application.properties 配置本地文件保存路径
23+
#### 1.1.2. `application.yml` 修改配置文件
1924

20-
```properties
21-
ureport.debug=false
22-
ureport.disableFileProvider=false
23-
ureport.fileStoreDir=/Users/lengleng/Downloads
24-
ureport.disableHttpSessionReportCache=true
25+
```yaml
26+
server:
27+
port: 8080
28+
servlet:
29+
context-path: /demo
30+
spring:
31+
datasource:
32+
url: jdbc:mysql://127.0.0.1:3306/spring-boot-demo?useUnicode=true&characterEncoding=UTF-8&useSSL=false&autoReconnect=true&failOverReadOnly=false&serverTimezone=GMT%2B8
33+
username: root
34+
password: root
35+
driver-class-name: com.mysql.cj.jdbc.Driver
36+
ureport:
37+
debug: false
38+
disableFileProvider: false
39+
disableHttpSessionReportCache: true
40+
# 单机模式，本地路径需要提前创建
41+
fileStoreDir: '/Users/yk.shen/Desktop/ureport2'
2542
```
26-
- 访问 报表设计器
43+
#### 1.1.3. 新增一个内部数据源
2744
28-
http://127.0.0.1:8080/ureport/designer
45+
```java
46+
@Component
47+
public class InnerDatasource implements BuildinDatasource {
48+
@Autowired
49+
private DataSource datasource;
2950

30-
## 集群使用
51+
@Override
52+
public String name() {
53+
return "内部数据源";
54+
}
3155

32-
如上文设计好的模板是保存在服务本机的，在集群环境中需要使用统一的文件系统存储。新增依赖
56+
@SneakyThrows
57+
@Override
58+
public Connection getConnection() {
59+
return datasource.getConnection();
60+
}
61+
}
62+
```
3363

34-
```xml
64+
#### 1.1.4. 使用 `doc/sql/t_user_ureport2.sql` 初始化数据
65+
66+
```mysql
67+
DROP TABLE IF EXISTS `t_user_ureport2`;
68+
CREATE TABLE `t_user_ureport2` (
69+
`id` bigint(13) unsigned NOT NULL AUTO_INCREMENT COMMENT '主键',
70+
`name` varchar(255) COLLATE utf8mb4_bin NOT NULL COMMENT '姓名',
71+
`create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '创建时间',
72+
`status` tinyint(4) NOT NULL COMMENT '是否禁用',
73+
PRIMARY KEY (`id`)
74+
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;
75+
76+
BEGIN;
77+
INSERT INTO `t_user_ureport2` VALUES (1, '测试人员 1', '2020-10-22 09:01:58', 1);
78+
INSERT INTO `t_user_ureport2` VALUES (2, '测试人员 2', '2020-10-22 09:02:00', 0);
79+
INSERT INTO `t_user_ureport2` VALUES (3, '测试人员 3', '2020-10-23 03:02:00', 1);
80+
INSERT INTO `t_user_ureport2` VALUES (4, '测试人员 4', '2020-10-23 23:02:00', 1);
81+
INSERT INTO `t_user_ureport2` VALUES (5, '测试人员 5', '2020-10-23 23:02:00', 1);
82+
INSERT INTO `t_user_ureport2` VALUES (6, '测试人员 6', '2020-10-24 11:02:00', 0);
83+
INSERT INTO `t_user_ureport2` VALUES (7, '测试人员 7', '2020-10-24 20:02:00', 0);
84+
INSERT INTO `t_user_ureport2` VALUES (8, '测试人员 8', '2020-10-25 08:02:00', 1);
85+
INSERT INTO `t_user_ureport2` VALUES (9, '测试人员 9', '2020-10-25 09:02:00', 1);
86+
INSERT INTO `t_user_ureport2` VALUES (10, '测试人员 10', '2020-10-25 13:02:00', 1);
87+
INSERT INTO `t_user_ureport2` VALUES (11, '测试人员 11', '2020-10-26 21:02:00', 0);
88+
INSERT INTO `t_user_ureport2` VALUES (12, '测试人员 12', '2020-10-26 23:02:00', 1);
89+
INSERT INTO `t_user_ureport2` VALUES (13, '测试人员 13', '2020-10-26 23:02:00', 1);
90+
COMMIT;
91+
```
92+
93+
#### 1.1.5. 访问报表设计器
94+
95+
http://127.0.0.1:8080/demo/ureport/designer
96+
97+
![报表设计页](http://static.xkcoding.com/spring-boot-demo/ureport2/035330.png)
98+
99+
#### 1.1.6. 开始设计
100+
101+
##### 1.1.6.1. 选择数据源
102+
103+
这里就需要使用到上面步骤 1.1.3 创建的内部数据源如图
104+
105+
![选择数据源](http://static.xkcoding.com/spring-boot-demo/ureport2/040032.png)
106+
107+
选择数据源
108+
109+
![选择数据源](http://static.xkcoding.com/spring-boot-demo/ureport2/040117.png)
110+
111+
此时列表里就会出现数据源
112+
113+
![数据源列表](http://static.xkcoding.com/spring-boot-demo/ureport2/040237.png)
114+
115+
##### 1.1.6.2. 选择数据集
116+
117+
在刚才选中的数据源右键，选择添加数据集
118+
119+
![选中数据源右键](http://static.xkcoding.com/spring-boot-demo/ureport2/063315.png)
120+
121+
这里选择上面步骤 1.1.4 中初始化的用户表
122+
123+
![创建用户报表](http://static.xkcoding.com/spring-boot-demo/ureport2/063845.png)
124+
125+
预览数据看一下
126+
127+
![预览数据集数据](http://static.xkcoding.com/spring-boot-demo/ureport2/063955.png)
128+
129+
点击确定，保存数据集
130+
131+
![保存数据集](http://static.xkcoding.com/spring-boot-demo/ureport2/064049.png)
132+
133+
##### 1.1.6.3. 报表设计
134+
135+
创建报表表头的位置
136+
137+
![合并单元格](http://static.xkcoding.com/spring-boot-demo/ureport2/064425.png)
138+
139+
表头内容
140+
141+
![image-20201124144752390](http://static.xkcoding.com/spring-boot-demo/ureport2/064752.png)
142+
143+
操作完成之后，长这样~
144+
145+
![表头美化](http://static.xkcoding.com/spring-boot-demo/ureport2/064916.png)
146+
147+
148+
149+
然后设置数据的标题行，跟表头设置一样，效果如下图
150+
151+
![数据的标题行](http://static.xkcoding.com/spring-boot-demo/ureport2/065125.png)
152+
153+
接下来设置数据
154+
155+
![id字段配置](http://static.xkcoding.com/spring-boot-demo/ureport2/065658.png)
156+
157+
其他字段同理，完成之后如下
35158

159+
![数据配置](http://static.xkcoding.com/spring-boot-demo/ureport2/070440.png)
160+
161+
此时你可以尝试预览一下数据了
162+
163+
![预览数据](http://static.xkcoding.com/spring-boot-demo/ureport2/070634.png)
164+
165+
![预览数据](http://static.xkcoding.com/spring-boot-demo/ureport2/070813.png)
166+
167+
关掉，稍微美化一下
168+
169+
![美化后的预览数据](http://static.xkcoding.com/spring-boot-demo/ureport2/070910.png)
170+
171+
此时数据虽然正常显示了，但是「是否可用」这一列显示0/1 是否可以支持自定义呢？
172+
173+
![映射数据集](http://static.xkcoding.com/spring-boot-demo/ureport2/071352.png)
174+
175+
再次预览一下
176+
177+
![字典映射预览数据](http://static.xkcoding.com/spring-boot-demo/ureport2/071428.png)
178+
179+
顺带再把创建时间的数据格式也改一下
180+
181+
![时间格式修改](http://static.xkcoding.com/spring-boot-demo/ureport2/072725.png)
182+
183+
修改后，预览数据如下
184+
185+
![预览数据](http://static.xkcoding.com/spring-boot-demo/ureport2/072753.png)
186+
187+
##### 1.1.6.4. 保存报表设计文件
188+
189+
![image-20201124153244035](http://static.xkcoding.com/spring-boot-demo/ureport2/073244.png)
190+
191+
![保存](http://static.xkcoding.com/spring-boot-demo/ureport2/074228.png)
192+
193+
点击保存之后，你本地在 `application.yml` 文件中配置的地址就会出现一个 `demo.ureport.xml` 文件
194+
195+
下次可以直接通过 http://localhost:8080/demo/ureport/preview?_u=file:demo.ureport.xml 这个地址预览报表了
196+
197+
##### 1.1.6.5. 增加报表查询条件
198+
199+
还记得我们上面新增数据集的时候，加的条件吗？现在用起来
200+
201+
![查询表单设计器](http://static.xkcoding.com/spring-boot-demo/ureport2/074641.png)
202+
203+
查询表单设计
204+
205+
![拖动元素设计表单查询](http://static.xkcoding.com/spring-boot-demo/ureport2/074936.png)
206+
207+
配置查询参数
208+
209+
![完善查询表单](http://static.xkcoding.com/spring-boot-demo/ureport2/075248.png)
210+
211+
美化按钮
212+
213+
![按钮样式美化](http://static.xkcoding.com/spring-boot-demo/ureport2/075410.png)
214+
215+
在预览一下~
216+
217+
![预览数据-查询条件](http://static.xkcoding.com/spring-boot-demo/ureport2/075640.png)
218+
219+
### 1.2. 集群使用
220+
221+
如上文设计好的模板是保存在服务本机的，在集群环境中需要使用统一的文件系统存储。
222+
223+
#### 1.2.1. 新增依赖
224+
225+
```xml
36226
<dependency>
37227
<groupId>com.pig4cloud.plugin</groupId>
38228
<artifactId>oss-spring-boot-starter</artifactId>
39229
<version>0.0.3</version>
40230
</dependency>
41231
```
42232

43-
- 仅需配置云存储相关参数, 演示为minio
233+
#### 1.2.2. 仅需配置云存储相关参数, 演示为minio
44234

235+
```yaml
236+
oss:
237+
access-key: lengleng
238+
secret-key: lengleng
239+
bucket-name: lengleng
240+
endpoint: http://minio.pig4cloud.com
45241
```
46-
oss.access-key=lengleng
47-
oss.secret-key=lengleng
48-
oss.bucket-name=lengleng
49-
oss.endpoint=http://minio.pig4cloud.com
50-
```
51242
52-
关于 [oss-spring-boot-starter ](https://github.com/pig-mesh/oss-spring-boot-starter)使用可参考，兼容所有 S3 协议的分布式文件存储系统
53-
关于 [ureport-spring-boot-starter ](https://github.com/pig-mesh/ureport-spring-boot-starter)使用可参考，UReport2 的 spring boot 封装
243+
> 注意：这里使用的是冷冷提供的公共 minio，请勿乱用，也不保证数据的可靠性，建议小伙伴自建一个minio，或者使用阿里云 oss
244+
245+
## 2. 坑
246+
247+
Ureport2 最新版本是 `2.2.9`，挺久没更新了，存在一个坑：在报表设计页打开一个已存在的报表设计文件时，可能会出现无法预览的情况，参考 ISSUE:https://github.com/youseries/ureport/issues/393
248+
249+
注意：该可能性出现在报表设计文件中使用了条件属性的情况下，修复方法就是打开文件之后，重新配置条件属性，此处是坑，小伙伴使用时注意下就好，最好的方法就是避免使用条件属性。
250+
251+
## 3. 感谢
252+
253+
再次感谢 [@冷冷](https://github.com/lltx) 提供的 starter 及 PR，因个人操作失误，PR 未被合并，抱歉~
254+
255+
## 4. 参考
256+
257+
- [ureport2 使用文档](https://www.w3cschool.cn/ureport)
258+
- [ureport-spring-boot-starter](https://github.com/pig-mesh/ureport-spring-boot-starter) UReport2 的 spring boot 封装
259+
- [oss-spring-boot-starter](https://github.com/pig-mesh/oss-spring-boot-starter) 兼容所有 S3 协议的分布式文件存储系统
260+

‎demo-ureport2/pom.xml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,12 @@
4646
<version>0.0.1</version>
4747
</dependency>
4848

49+
<!-- <dependency>-->
50+
<!-- <groupId>com.pig4cloud.plugin</groupId>-->
51+
<!-- <artifactId>oss-spring-boot-starter</artifactId>-->
52+
<!-- <version>0.0.2</version>-->
53+
<!-- </dependency>-->
54+
4955
<dependency>
5056
<groupId>org.springframework.boot</groupId>
5157
<artifactId>spring-boot-starter-test</artifactId>

‎demo-ureport2/src/main/resources/application.yml‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,10 @@ ureport:
1212
debug: false
1313
disableFileProvider: false
1414
disableHttpSessionReportCache: true
15-
# 单机模式，路径需要提前创建
16-
fileStoreDir: '/Users/yangkai.shen/Desktop/ureport2'
15+
# 单机模式，本地路径需要提前创建
16+
fileStoreDir: '/Users/yk.shen/Desktop/ureport2'
17+
#oss:
18+
# access-key: lengleng
19+
# secret-key: lengleng
20+
# bucket-name: lengleng
21+
# endpoint: http://minio.pig4cloud.com

0 commit comments

Comments
 (0)