Ruoyi-Vue 3.8.7集成积木报表JmReport和积木大屏JimuBI
一、版本
RuoYi-Vue版本：v3.8.7
JMreport报表版本： v1.9.4
JimuBI大屏版本：V1.9.4
二、数据库
积木数据库sql
下载后，使用数据库管理工具执行sql脚本，将需要的一些表导入进去。
三、Pom中引入积木报表最新依赖
打开ruoyi-admin下的pom.xml引入最新依赖
<!-- 积木报表 --><dependency><groupId>org.jeecgframework.jimureport</groupId><artifactId>jimureport-spring-boot-starter</artifactId><version>1.9.4</version></dependency><!--积木BI大屏--><dependency><groupId>org.jeecgframework.jimureport</groupId><artifactId>jimubi-spring-boot-starter</artifactId><version>1.9.4</version></dependency>
四、RuoYiApplication添加积木报表扫描文件
打开ruoyi-admin模块中的RuoYiApplication文件
@SpringBootApplication(exclude = { DataSourceAutoConfiguration.class },scanBasePackages = {"org.jeecg","com.ruoyi"})
五、配置序列化白名单
打开ruoyi-common模块中Constants文件，修改161行
public static final String[] JSON_WHITELIST_STR = { "org.springframework", "com.ruoyi", "org.jeecg.modules.drag" };
六、SecurityConfig拦截排除
在ruoyi-framework模块中，打开SecurityConfig文件
-
添加代码
.antMatchers("/jmreport/**","/drag/**","/jimubi/**").anonymous() -
禁用Https响应
// 禁用HTTP响应标头 .headers().frameOptions().disable();
七、后端创建Controller文件
在ruoyi-admin模块中，创建src/main/java/com/ruoyi/web/controller/tool/reportController.java文件。这个controller目的向前端返回积木的前半部分地址，在前端拼接上后关部分地址。
代码如下：
package com.ruoyi.web.controller.tool;import com.ruoyi.common.annotation.Anonymous;
import com.ruoyi.common.utils.ip.IpUtils;
import org.springframework.core.env.Environment;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.beans.factory.annotation.Autowired;@Anonymous
@RestController
@RequestMapping("/tool/jm")
public class ReportController {@AutowiredEnvironment environment;//报表设计@PreAuthorize("@ss.hasPermi('tool:report:list')")@GetMapping(value = "/reportList")public String ReportList(){return "http://" + IpUtils.getHostIp() + ":" + environment.getProperty("server.port") + "/jmreport/list";}//报表查看@GetMapping(value = "/reportView")public String ReportView(){return "http://" + IpUtils.getHostIp() + ":" + environment.getProperty("server.port") + "/jmreport/view";}//报表查看@GetMapping(value = "/biList")public String bi(){return "http://" + IpUtils.getHostIp() + ":" + environment.getProperty("server.port") + "/drag/list";}//报表查看@GetMapping(value = "/biView")public String biView(){return "http://" + IpUtils.getHostIp() + ":" + environment.getProperty("server.port") + "/drag/share/view";}
}
八、前端文件(Vue2)创建
-
创建src/api/tool/jimu.js文件，代码如下：
import request from '@/utils/request'export function getReportUrl() {return request({url: '/tool/jm/reportList',method: 'get'}) } export function getReportViewUrl() {return request({url: '/tool/jm/reportView',method: 'get'}) } export function getBiUrl() {return request({url: '/tool/jm/biList',method: 'get'}) } export function getBiViewUrl() {return request({url: '/tool/jm/biView',method: 'get'}) } -
创建src/views/tool/report/reportList.vue文件
<template><!-- 组件名按照 Vue 2 习惯一般首字母大写，当然小写也能用 --><IFrame :src="url" /> </template><script> // 导入获取 token 的工具函数 import { getToken } from '@/utils/auth'; // 导入获取报表 URL 的 API 函数 import { getReportUrl } from '@/api/tool/jimu'; // 导入自定义的 IFrame 组件 import IFrame from "@/components/iFrame/index.vue";export default {// 组件名称name: 'ReportDesign',// 注册子组件components: {IFrame},// 定义组件的数据data() {return {// 初始化 url 为空字符串url: ''};},// 生命周期钩子，在实例创建完成后立即调用created() {this.init();},// 定义组件的方法methods: {init() {getReportUrl().then((res) => {// 将获取到的 URL 拼接上 token 并赋值给 data 中的 urlthis.url = res + "?token=Bearer " + getToken();}).catch((error) => {// 处理接口调用失败的情况console.error('获取报表 URL 失败:', error);// 你可以在这里添加更多错误处理逻辑，比如显示错误提示给用户});}} }; </script> -
创建src/views/tool/report/reportView.vue文件
<template><!-- 按照 Vue 组件命名规范，建议组件名首字母大写 --><IFrame :src="url" /> </template><script> // 导入获取 token 的工具函数 import { getToken } from '@/utils/auth'; // 导入获取报表视图 URL 的 API 函数 import { getReportViewUrl } from '@/api/tool/jimu'; // 导入自定义的 IFrame 组件 import IFrame from "@/components/iFrame/index.vue";export default {// 组件名称name: 'ReportView',// 注册子组件components: {IFrame},// 定义组件的数据data() {return {// 初始化 url 为空字符串url: ''};},// 生命周期钩子，在实例创建完成后立即调用created() {this.init();},// 定义组件的方法methods: {init() {getReportViewUrl().then((res) => {// 从路由路径中提取 reportIdconst reportId = this.$route.path.substring(this.$route.path.lastIndexOf("/") + 1);// 拼接 URL、reportId 和 token 并赋值给 urlthis.url = res + "/" + reportId + "?token=Bearer " + getToken();}).catch((error) => {// 处理接口调用失败的情况console.error('获取报表视图 URL 失败:', error);// 可以添加更多错误处理逻辑，如显示错误提示信息给用户});}} }; </script> -
创建src/views/tool/report/biList.vue文件
<template><i-frame :src="url" /> </template><script> import { getToken } from '@/utils/auth'; import { getBiUrl } from '@/api/tool/jimu'; import IFrame from "@/components/iFrame/index.vue";export default {name: 'ReportDesign',components: {IFrame},data() {return {url: ''};},created() {this.init();},methods: {init() {getBiUrl().then(res => {this.url = res + "?token=Bearer " + getToken();}).catch(error => {console.error('获取 BI URL 失败:', error);// 可以添加更详细的错误处理逻辑，如显示错误提示信息});}} }; </script>- 创建src/views/tool/report/biView.vue文件
<template><!-- 建议使用大写开头的组件名，遵循 Vue 组件命名规范 --><IFrame :src="url" /> </template><script> // 导入获取 token 的工具函数 import { getToken } from '@/utils/auth'; // 导入获取 BI 视图 URL 的 API 函数 import { getBiViewUrl } from '@/api/tool/jimu'; // 导入自定义的 IFrame 组件 import IFrame from "@/components/iFrame/index.vue";export default {// 组件名称name: 'ReportView',// 注册子组件components: {IFrame},// 定义组件的数据data() {return {// 初始化 url 为空字符串url: ''};},// 生命周期钩子，在实例创建完成后立即调用created() {this.init();},// 定义组件的方法methods: {init() {getBiViewUrl().then((res) => {// 从路由路径中提取 reportIdconst reportId = this.$route.path.substring(this.$route.path.lastIndexOf("/") + 1);// 将获取到的 URL 拼接上 reportId 和 token 并赋值给 data 中的 urlthis.url = res + "/" + reportId + "?token=Bearer " + getToken();}).catch((error) => {// 处理接口调用失败的情况console.error('获取 BI 视图 URL 失败:', error);// 可以在这里添加更多错误处理逻辑，例如显示错误提示给用户});}} }; </script>
九、后台创建菜单
- 创建积木报表首页导航菜单，如果你是按第七步中的文件名创建的前端文件，请按下图创建导航菜单，否则，根据实际的组件修改。权限字符，可以自定义。
- 创建Bi报表
十、创建报表或大屏
十、创建报表或大屏
在此以创建报表为例
1、预览创建好的积木报表，在地址栏中，找到报表的ID号，如下图中的
2、在ruoyi系统中创建导航菜单
1）路由地址中，要加入报表的ID号
2）组件路径，填写用于显示报表的组件。可以查看第七步 创建src/views/tool/report/reportView.vue文件
3）权限字符中，也加入了报表ID号，用于权限控制
