JeecgBoot低代码开发实战指南

【免费下载链接】jeecg-boot jeecgboot/jeecg-boot 是一个基于 Spring Boot 的 Java 框架，用于快速开发企业级应用。适合在 Java 应用开发中使用，提高开发效率和代码质量。特点是提供了丰富的组件库、模块化架构和自动化配置方式。 项目地址: https://gitcode.com/GitHub_Trending/je/jeecg-boot

本文全面介绍了JeecgBoot低代码开发平台的核心功能与应用实践，涵盖Online在线表单零代码配置、代码生成器使用与自定义模板开发、流程设计与BPM工作流集成、以及报表与大屏可视化工具应用四大核心模块。通过详细的架构解析、配置示例和实战案例，帮助开发者快速掌握平台的使用技巧，提升开发效率，实现企业级应用的快速搭建与智能化升级。

Online在线表单零代码配置实战指南

JeecgBoot的Online在线表单功能是其低代码开发平台的核心特性之一，通过可视化配置的方式，开发者无需编写任何代码即可快速构建功能完善的数据管理表单。本文将深入探讨Online表单的配置流程、核心功能以及最佳实践。

Online表单架构设计

Online表单采用前后端分离架构，基于Spring Boot + Vue3技术栈实现。其核心架构如下：

核心配置流程

1. 表单基础信息配置

首先进入Online表单管理界面，创建新的表单配置：

配置项	说明	示例值
表单名称	表单显示名称	用户信息管理
表名	数据库表名	sys_user
表单类型	单表/树表/一对多	单表
数据源	数据库连接	默认数据源
描述	表单功能描述	管理系统用户基本信息

2. 字段配置详解

Online表单支持丰富的字段类型，每种类型都有特定的配置选项：

// Online表单字段类型定义
interface OnlineColumn {
  dataIndex?: string;        // 字段名
  title?: string;           // 显示标题
  fieldType?: string;       // 字段类型(text, number, date等)
  width?: number | string;  // 列宽度
  align?: string;           // 对齐方式
  isTotal?: boolean;        // 是否显示合计
  customRender?: Function;  // 自定义渲染函数
  dbType?: string;          // 数据库类型
}

常用字段类型配置示例：

字段类型	数据库类型	前端组件	适用场景
单行文本	varchar(100)	Input	用户名、标题等
多行文本	text	TextArea	描述、备注等
数字	int/double	InputNumber	年龄、价格等
日期	datetime	DatePicker	创建时间、生日等
下拉框	varchar(50)	Select	状态、类型等
单选按钮	varchar(20)	Radio	性别、是否等
复选框	varchar(100)	Checkbox	兴趣爱好等
文件上传	varchar(200)	Upload	附件、图片等

3. 高级功能配置

3.1 数据校验规则

Online表单支持多种校验规则，确保数据完整性：

// 校验规则配置示例
{
  "required": true,           // 必填项
  "minLength": 2,            // 最小长度
  "maxLength": 50,           // 最大长度
  "pattern": "^1[3-9]\\d{9}$", // 正则表达式
  "message": "请输入正确的手机号码" // 错误提示
}

3.2 表单权限控制

支持细粒度的权限控制：

3.3 联动效果配置

支持字段间的动态联动：

// 省市联动配置示例
{
  "triggerField": "province",     // 触发字段
  "targetField": "city",          // 目标字段
  "dataSource": "/api/cities",    // 数据源
  "params": { "province": "${province}" } // 参数映射
}

实战案例：用户管理系统配置

步骤1：创建用户表表单

1. 基础配置：

   • 表单名称：用户信息管理
   • 表名：sys_user
   • 表单类型：单表

2. 字段配置：

字段名	标题	类型	必填	校验规则
username	用户名	单行文本	是	长度3-20字符
password	密码	密码框	是	强度校验
realname	真实姓名	单行文本	是	中文姓名
phone	手机号	单行文本	否	手机号格式
email	邮箱	单行文本	否	邮箱格式
status	状态	下拉框	是	启用/禁用

步骤2：配置表单布局

使用JeecgBoot的表单设计器进行可视化布局：

{
  "layout": "horizontal",
  "columns": 2,
  "labelCol": { "span": 6 },
  "wrapperCol": { "span": 18 },
  "fields": [
    { "field": "username", "span": 12 },
    { "field": "password", "span": 12 },
    { "field": "realname", "span": 12 },
    { "field": "phone", "span": 12 },
    { "field": "email", "span": 12 },
    { "field": "status", "span": 12 }
  ]
}

步骤3：设置业务规则

1. 唯一性校验：用户名、手机号、邮箱需要唯一
2. 数据默认值：状态默认为"启用"
3. 操作权限：只有管理员可以删除用户

步骤4：生成数据库表

配置完成后，系统会自动生成对应的数据库表结构：

CREATE TABLE sys_user (
  id VARCHAR(32) PRIMARY KEY,
  username VARCHAR(50) NOT NULL UNIQUE,
  password VARCHAR(100) NOT NULL,
  realname VARCHAR(50) NOT NULL,
  phone VARCHAR(20),
  email VARCHAR(100),
  status VARCHAR(10) DEFAULT '启用',
  create_time DATETIME,
  update_time DATETIME
);

高级特性深度解析

1. 自定义按钮与业务逻辑

Online表单支持自定义按钮和业务逻辑扩展：

// 自定义按钮配置
{
  "buttonCode": "export_user",
  "buttonName": "导出用户",
  "buttonStyle": "primary",
  "buttonIcon": "export",
  "buttonType": "link",
  "actionType": "api",
  "apiUrl": "/api/user/export",
  "permission": "user:export"
}

2. 数据导入导出

支持Excel数据的导入导出功能：

功能	配置项	说明
导出模板	exportTemplate	生成Excel模板
数据导出	exportData	导出查询结果
数据导入	importData	导入Excel数据
批量操作	batchOperation	支持批量处理

3. 表单增强功能

支持JS和Java两种增强方式：

// Java增强示例
@Component
public class UserFormEnhance {
    
    @Autowired
    private UserService userService;
    
    // 保存前校验
    public void beforeSave(Map<String, Object> data) {
        String username = (String) data.get("username");
        if (userService.existsUsername(username)) {
            throw new RuntimeException("用户名已存在");
        }
    }
    
    // 保存后处理
    public void afterSave(String id, Map<String, Object> data) {
        // 发送通知等后续操作
    }
}

性能优化建议

1. 数据库优化：

   • 为常用查询字段添加索引
   • 合理设置字段长度和类型
   • 避免使用text类型作为查询条件

2. 前端优化：

   • 分页查询大数据量
   • 使用懒加载和虚拟滚动
   • 合理配置字段的显示/隐藏

3. 缓存策略：

   • 字典数据使用Redis缓存
   • 表单配置信息缓存
   • 查询结果适当缓存

常见问题解决方案

问题1：表单性能慢

解决方案：

• 检查数据库索引
• 优化查询条件
• 使用分页查询

问题2：数据校验不生效

解决方案：

• 检查校验规则配置
• 确认前端校验和后端校验一致性

问题3：权限控制异常

解决方案：

• 检查角色权限配置
• 确认数据权限规则

通过以上详细的配置指南和实战案例，开发者可以快速掌握JeecgBoot Online在线表单的零代码配置技巧，大幅提升开发效率，实现快速业务系统搭建。

代码生成器使用与自定义模板

JeecgBoot的代码生成器是其低代码开发平台的核心组件，通过智能化的模板引擎和配置驱动的方式，能够快速生成前后端完整代码。本文将深入探讨代码生成器的使用方法和自定义模板的实现。

代码生成器架构概述

JeecgBoot代码生成器采用FreeMarker模板引擎，支持多种代码生成模式，包括单表、一对多、树形结构等。其核心架构如下：

核心配置文件解析

代码生成器的数据库配置通过CodeGenerateDbConfig类实现：

@Configuration
public class CodeGenerateDbConfig {
    @Value("${spring.datasource.dynamic.datasource.master.url:}")
    private String url;
    @Value("${spring.datasource.dynamic.datasource.master.username:}")
    private String username;
    @Value("${spring.datasource.dynamic.datasource.master.password:}")
    private String password;
    
    @Bean
    public CodeGenerateDbConfig initCodeGenerateDbConfig() {
        CodegenDatasourceConfig.initDbConfig(driverClassName, url, username, password);
        return null;
    }
}

模板文件结构

JeecgBoot的模板文件采用分层结构组织：

jeecg/code-template-online/
├── common/                 # 公共模板工具
│   ├── utils.ftl          # 工具函数
│   ├── blob.ftl           # Blob字段处理
│   └── validatorRulesTemplate/ # 校验规则模板
├── default/               # 默认模板集
│   ├── one/              # 单表模板
│   ├── onetomany/        # 一对多模板
│   └── tree/             # 树形结构模板
├── erp/                  # ERP风格模板
├── inner-table/          # 内联表格模板
├── jvxe/                 # JVXE表格模板
└── tab/                  # 标签页模板

模板变量系统

代码生成器使用丰富的模板变量来动态生成代码：

变量名	说明	示例
${entityName}	实体类名称	User
${tableName}	数据库表名	sys_user
${bussiPackage}	业务包名	org.jeecg.modules.system
${entityPackage}	实体包名	entity
${originalColumns}	原始字段列表	字段对象集合

FreeMarker工具函数

模板中内置了丰富的工具函数来处理各种转换需求：

<#-- 驼峰转下划线 -->
<#function camelToDashed(str, case='lower')>
  <#return camelToChar(str, "_", case)>
</#function>

<#-- 下划线转驼峰 -->
<#function dashedToCamel(str)>
    <#assign text=""/>
    <#assign strlist = str?split("_")/>
    <#list strlist as v>
        <#assign text=text+v?cap_first/>
    </#list>
    <#return text?uncap_first>
</#function>

实体类生成模板示例

以下是一个典型的实体类生成模板片段：

package ${bussiPackage}.${entityPackage}.entity;

import java.io.Serializable;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import org.jeecgframework.poi.excel.annotation.Excel;

@Data
@TableName("${tableName}")
public class ${entityName} implements Serializable {
    private static final long serialVersionUID = 1L;

    <#list originalColumns as po>
    /**${po.filedComment}*/
    <#if po.fieldName == primaryKeyField>
    @TableId(type = IdType.ASSIGN_ID)
    </#if>
    <#if !excel_ignore_arr?seq_contains("${po.fieldName}")>
    @Excel(name = "${po.filedComment}", width = 15)
    </#if>
    private ${po.fieldType} ${po.fieldName};
    </#list>
}

自定义模板开发流程

1. 创建自定义模板目录

在resources/jeecg/code-template-online/下创建自定义模板目录：

custom-template/
├── one/
│   └── java/
│       └── ${bussiPackage}/
│           └── ${entityPackage}/
│               ├── entity/
│               │   └── ${entityName}.javai
│               ├── service/
│               │   └── I${entityName}Service.javai
│               └── controller/
│                   └── ${entityName}Controller.javai
└── vue3/
    └── ${entityName}List.vuei

2. 编写自定义实体模板

创建自定义的实体类模板：

<#include "/common/utils.ftl">
package ${bussiPackage}.${entityPackage}.entity;

import io.swagger.v3.oas.annotations.media.Schema;
import lombok.Data;
import javax.validation.constraints.*;
import java.time.LocalDateTime;

/**
 * ${tableVo.ftlDescription} - 自定义实体
 */
@Data
@Schema(description = "${tableVo.ftlDescription}")
public class ${entityName} {
    
    <#list originalColumns as po>
    @Schema(description = "${po.filedComment}")
    <#if po.nullable == 'N'>
    @NotBlank(message = "${po.filedComment}不能为空")
    </#if>
    <#if po.fieldType == 'String' && po.fieldLength??>
    @Size(max = ${po.fieldLength}, message = "${po.filedComment}长度不能超过${po.fieldLength}字符")
    </#if>
    private ${po.fieldType} ${po.fieldName};
    </#list>
    
    // 自定义业务字段
    private LocalDateTime createTime;
    private LocalDateTime updateTime;
}

3. 自定义Service模板

package ${bussiPackage}.${entityPackage}.service;

import com.baomidou.mybatisplus.extension.service.IService;
import ${bussiPackage}.${entityPackage}.entity.${entityName};
import org.jeecg.common.api.vo.Result;

public interface I${entityName}Service extends IService<${entityName}> {
    
    /**
     * 自定义业务方法 - 根据名称查询
     */
    ${entityName} findByName(String name);
    
    /**
     * 自定义业务方法 - 批量处理
     */
    Result<?> batchProcess(List<String> ids);
}

4. 自定义Controller模板

package ${bussiPackage}.${entityPackage}.controller;

import org.jeecg.common.api.vo.Result;
import org.jeecg.common.system.base.controller.JeecgController;
import ${bussiPackage}.${entityPackage}.entity.${entityName};
import ${bussiPackage}.${entityPackage}.service.I${entityName}Service;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/${entityName?uncap_first}")
public class ${entityName}Controller extends JeecgController<${entityName}, I${entityName}Service> {
    
    @GetMapping("/customQuery")
    public Result<?> customQuery(@RequestParam String name) {
        ${entityName} entity = service.findByName(name);
        return Result.OK(entity);
    }
    
    @PostMapping("/batchProcess")
    public Result<?> batchProcess(@RequestBody List<String> ids) {
        return service.batchProcess(ids);
    }
}

5. 自定义前端Vue3模板

<template>
  <div class="jeecg-container">
    <a-card title="${tableVo.ftlDescription}管理" :bordered="false">
      <!-- 查询条件 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :model="queryParam">
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="名称">
                <a-input 
                  v-model="queryParam.name" 
                  placeholder="请输入名称"
                  @pressEnter="handleSearch"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="状态">
                <a-select 
                  v-model="queryParam.status" 
                  placeholder="请选择状态"
                >
                  <a-select-option value="1">启用</a-select-option>
                  <a-select-option value="0">禁用</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12" style="text-align: right">
              <a-button type="primary" @click="handleSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!-- 操作按钮 -->
      <div class="table-operator">
        <a-button type="primary" @click="handleAdd">新增</a-button>
        <a-button @click="handleExport">导出</a-button>
      </div>

      <!-- 数据表格 -->
      <a-table
        ref="table"
        size="middle"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定删除吗?" @confirm="handleDelete(record.id)">
              <a>删除</a>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { useListPage } from '/@/hooks/system/useListPage'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: 80
  },
  <#list originalColumns as po>
  <#if po.fieldName != 'id'>
  {
    title: '${po.filedComment}',
    dataIndex: '${po.fieldName}',
    key: '${po.fieldName}',
    width: 150
  },
  </#if>
  </#list>
  {
    title: '操作',
    key: 'action',
    width: 150,
    align: 'center'
  }
]

const { 
  queryParam, 
  ipagination, 
  loading, 
  dataSource, 
  handleSearch, 
  handleReset, 
  handleTableChange 
} = useListPage()

onMounted(() => {
  loadData()
})

const loadData = () => {
  loading.value = true
  // 调用API加载数据
  setTimeout(() => {
    dataSource.value = [
      { id: 1, name: '示例数据1', status: '1' },
      { id: 2, name: '示例数据2', status: '0' }
    ]
    loading.value = false
  }, 500)
}

const handleAdd = () => {
  // 新增逻辑
  console.log('新增操作')
}

const handleEdit = (record) => {
  // 编辑逻辑
  console.log('编辑操作', record)
}

const handleDelete = (id) => {
  // 删除逻辑
  console.log('删除操作', id)
}

const handleExport = () => {
  // 导出逻辑
  console.log('导出操作')
}
</script>

<style scoped>
.jeecg-container {
  padding: 20px;
}
.table-page-search-wrapper {
  margin-bottom: 16px;
}
.table-operator {
  margin-bottom: 16px;
}
</style>

模板变量参考表

变量类别	变量名	描述	示例值
实体相关	${entityName}	实体类名	User
	${tableName}	数据库表名	sys_user
包名相关	${bussiPackage}	业务包名	org.jeecg.modules.system
	${entityPackage}	实体包名	entity
字段相关	${originalColumns}	字段列表	字段对象集合
	${po.fieldName}	字段名	username
	${po.filedComment}	字段注释	用户名
	${po.fieldType}	字段类型	String
表信息	${tableVo.ftlDescription}	表描述	用户信息表
时间相关	${.now?string["yyyy-MM-dd"]}	当前日期	2024-01-15

高级模板技巧

1. 条件判断和循环

<#list originalColumns as po>
  <#if po.fieldName == 'status'>
    <!-- 状态字段特殊处理 -->
    @Enumerated(EnumType.STRING)
    private StatusEnum ${po.fieldName};
  <#elseif po.fieldType == 'LocalDateTime'>
    <!-- 时间字段处理 -->
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private ${po.fieldType} ${po.fieldName};
  <#else>
    <!-- 普通字段 -->
    private ${po.fieldType} ${po.fieldName};
  </#if>
</#list>

2. 自定义工具函数

在模板中定义自定义函数：

流程设计与BPM工作流集成

JeecgBoot作为企业级AI低代码平台，在流程设计与BPM工作流集成方面提供了强大的能力。平台深度整合了Flowable流程引擎和LiteFlow轻量级流程编排框架，实现了从传统业务流程到AI智能流程的全方位覆盖。

架构设计概览

JeecgBoot的流程设计架构采用分层设计理念，将传统BPM工作流与AI流程编排完美融合：

核心功能特性

1. 双引擎架构设计

JeecgBoot采用双引擎架构，同时支持传统BPM工作流和AI智能流程：

功能特性	传统BPM工作流	AI智能流程编排
引擎技术	Flowable 6.x	LiteFlow 2.12
设计方式	图形化流程设计器	可视化AI组件编排
执行模式	人工审批驱动	自动化智能执行
适用场景	行政审批、工单处理	AI对话、智能决策
集成方式	表单挂接、任务接口	API调用、事件驱动

2. AI流程编排核心组件

AI流程编排基于LiteFlow框架，提供丰富的组件库：

// 流程运行参数定义
public class FlowRunParams {
    private String requestId;      // 请求ID
    private String flowId;         // 流程ID
    private String conversationId; // 会话ID
    private String topicId;        // 主题ID
    private String responseMode;   // 响应模式
    private Map<String, Object> inputParams; // 输入参数
    private HttpServletRequest httpRequest; // HTTP请求
    private Consumer<EventData> eventCallback; // 事件回调
}

// 流程常量定义
public class FlowConsts {
    public static final String FLOW_RESPONSE_MODE_STREAMING = "streaming";
    public static final String FLOW_INPUT_PARAM_HISTORY = "history";
    public static final String FLOW_INPUT_PARAM_QUESTION = "question";
    public static final String FLOW_INPUT_PARAM_IMAGES = "images";
    public static final String FLOW_ERROR_MSG_LLM_TIMEOUT = "LLM响应超时";
}

3. 数据库设计

AI流程相关的核心数据表结构设计：

-- AI流程定义表
CREATE TABLE `airag_flow` (
  `id` varchar(36) NOT NULL,
  `create_by` varchar(50) COMMENT '创建人',
  `create_time` datetime COMMENT '创建日期',
  `update_by` varchar(50) COMMENT '更新人',
  `update_time` datetime COMMENT '更新日期',
  `application_name` varchar(50) COMMENT '应用名称',
  `name` varchar(50) COMMENT '流程名称',
  `descr` varchar(200) COMMENT '流程描述',
  `icon` varchar(255) COMMENT '应用图标',
  `chain` text COMMENT '编排规则',
  `design` text COMMENT '编排设计',
  `status` varchar(20) COMMENT '状态',
  `metadata` text COMMENT '元数据',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- AI应用表（关联流程）
CREATE TABLE `airag_app` (
  `id` varchar(36) NOT NULL,
  -- ... 其他字段
  `flow_id` varchar(32) COMMENT '关联流程ID',
  `type` varchar(50) COMMENT '应用类型',
  `status` varchar(20) COMMENT '状态',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

流程执行机制

1. 流程执行序列图

2. 核心执行代码

// 流程执行服务
@Service
public class AiragChatServiceImpl implements IAiragChatService {
    
    @Autowired
    private IAiragFlowService airagFlowService;
    
    @Override
    public SseEmitter send(ChatSendParams chatSendParams) {
        // 构建流程运行参数
        FlowRunParams flowRunParams = new FlowRunParams();
        flowRunParams.setRequestId(requestId);
        flowRunParams.setFlowId(aiApp.getFlowId());
        flowRunParams.setConversationId(chatConversation.getId());
        flowRunParams.setTopicId(topicId);
        flowRunParams.setResponseMode(FlowConsts.FLOW_RESPONSE_MODE_STREAMING);
        
        // 设置输入参数
        Map<String, Object> flowInputParams = new HashMap<>();
        flowInputParams.put(FlowConsts.FLOW_INPUT_PARAM_HISTORY, histories);
        flowInputParams.put(FlowConsts.FLOW_INPUT_PARAM_QUESTION, sendParams.getContent());
        flowInputParams.put(FlowConsts.FLOW_INPUT_PARAM_IMAGES, sendParams.getImages());
        flowRunParams.setInputParams(flowInputParams);
        
        // 设置事件回调
        flowRunParams.setEventCallback(eventData -> {
            if (EventData.EVENT_FLOW_FINISHED.equals(eventData.getEvent())) {
                // 处理流程完成事件
                EventFlowData data = (EventFlowData) eventData.getData();
                if (data.isSuccess()) {
                    // 成功处理逻辑
                }
            }
        });
        
        // 执行流程
        airagFlowService.runFlow(flowRunParams);
    }
}

流程组件类型

JeecgBoot AI流程编排支持多种类型的组件：

组件类型	功能描述	应用场景
LLM组件	大语言模型调用	智能问答、内容生成
条件分支	流程条件判断	业务路由、决策分流
脚本组件	自定义脚本执行	数据处理、业务逻辑
HTTP组件	外部API调用	系统集成、数据获取
知识库组件	向量知识检索	智能客服、文档问答
OCR组件	图像文字识别	票据处理、文档数字化
分类器组件	内容分类处理	意图识别、业务分类

流程设计最佳实践

1. 聊天流程设计示例

// 示例：Jeecg产品助手流程
THEN(
    start.tag('start-node'),
    // 知识库检索
    knowledgeRetrieval
        .knowIds('1897926563148648449')
        .topK(3)
        .similarity(0.6),
    // 条件判断：是否有相关知识
    IF(script('{{knowledgeRetrieval.result}}!=null'))
        .THEN(
            // 构建提示词
            promptBuilder
                .template('你是一个JeecgBoot专家，请根据以下知识回答问题...')
                .variable('question', '{{input.question}}')
                .variable('knowledge', '{{knowledgeRetrieval.result}}'),
            // 调用LLM
            llm
                .model('1897481367743143938')
                .prompt('{{promptBuilder.result}}')
                .temperature(0.7)
        )
        .ELSE(
            // 直接回复
            directReply
                .content('抱歉，我没有找到相关的JeecgBoot知识。')
        ),
    end.tag('end-node')
)

2. 业务流程集成模式

监控与运维

1. 流程执行监控

JeecgBoot提供完整的流程执行监控体系：

• 实时状态跟踪：监控每个流程实例的执行状态
• 性能指标收集：记录组件执行时间、资源消耗
• 错误日志记录：详细记录执行过程中的异常信息
• 流量统计分析：统计流程调用频率、成功率等指标

2. 运维管理功能

功能模块	描述	技术实现
流程版本管理	支持多版本流程的发布和回滚	数据库版本控制
热部署支持	无需重启服务的流程更新	LiteFlow热加载
流量控制	基于规则的流量限制和熔断	Sentinel集成
权限控制	细粒度的流程访问权限管理	Shiro权限框架

典型应用场景

1. 智能客服系统

2. 智能数据分析流程

// 数据查询引擎流程示例
THEN(
    start,
    // 自然语言转SQL
    nl2sql
        .model('1897481367743143938')
        .question('{{input.question}}')
        .schema('jimu_report'),
    // 执行SQL查询
    sqlExecutor
        .dataSource('report_db')
        .sql('{{nl2sql.result}}'),
    // 数据可视化处理
    dataVisualization
        .data('{{sqlExecutor.result}}')
        .chartType('bar'),
    // 生成解释文本
    llm
        .model('1897481367743143938')
        .prompt('请解释以下数据...'),
    end
)

技术优势与创新点

1. 双引擎融合：传统BPM与AI流程的完美结合，满足不同业务场景需求
2. 可视化设计：提供友好的图形化流程设计界面，降低使用门槛
3. 组件化架构：丰富的预置组件库，支持快速流程搭建
4. 高性能执行：基于LiteFlow的轻量级流程引擎，保证高效执行
5. 生态集成：与JeecgBoot其他模块深度集成，形成完整解决方案

通过JeecgBoot的流程设计与BPM工作流集成能力，企业可以快速构建从传统业务流程到AI智能应用的全面流程管理体系，实现业务流程的智能化升级和数字化转型。

报表与大屏可视化工具应用

JeecgBoot作为一款企业级低代码开发平台，在数据可视化领域提供了强大的报表与大屏设计能力。通过集成积木报表（JimuReport）和可视化设计器，开发者可以快速构建专业级的数据展示界面，满足企业各种复杂的数据呈现需求。

可视化组件架构设计

JeecgBoot的可视化架构采用前后端分离设计，前端基于Vue3 + ECharts技术栈，后端通过Spring Boot集成积木报表引擎，实现了灵活的数据可视化解决方案。

报表功能核心特性

1. 多数据源支持

JeecgBoot支持多种数据源类型，包括：

数据源类型	支持状态	特点
MySQL	✅	完整支持，性能优化
Oracle	✅	企业级数据库支持
SQL Server	✅	微软生态兼容
PostgreSQL	✅	开源数据库支持
达梦数据库	✅	国产化适配
Redis缓存	✅	高速缓存数据源

2. 丰富的图表类型

平台内置了多种图表组件，满足不同业务场景需求：

// 图表类型配置示例
const chartTypes = {
  BAR: '柱状图',
  LINE: '折线图', 
  PIE: '饼图',
  SCATTER: '散点图',
  RADAR: '雷达图',
  MAP: '地图',
  GAUGE: '仪表盘',
  FUNNEL: '漏斗图',
  HEATMAP: '热力图'
};

3. 拖拽式设计器

通过可视化设计器，用户可以零代码配置报表：

<template>
  <div class="report-designer">
    <div class="toolbar">
      <a-button @click="addChart('BAR')">添加柱状图</a-button>
      <a-button @click="addChart('LINE')">添加折线图</a-button>
      <a-button @click="addChart('PIE')">添加饼图</a-button>
    </div>
    <div class="canvas-area">
      <draggable-chart 
        v-for="(chart, index) in charts"
        :key="index"
        :config="chart.config"
        @update:config="updateChartConfig(index, $event)"
      />
    </div>
  </div>
</template>

大屏可视化实战

1. 大屏布局系统

JeecgBoot提供灵活的大屏布局方案，支持响应式设计：

/* 大屏布局CSS示例 */
.dashboard-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 16px;
  padding: 20px;
  background: #0f1c3c;
  min-height: 100vh;
}

.chart-widget {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

2. 实时数据更新

支持WebSocket实时数据推送，确保大屏数据实时性：

// 后端WebSocket服务示例
@ServerEndpoint("/websocket/dashboard/{dashboardId}")
@Component
public class DashboardWebSocket {
    
    @OnOpen
    public void onOpen(Session session, 
                      @PathParam("dashboardId") String dashboardId) {
        // 连接建立逻辑
    }
    
    @OnMessage  
    public void onMessage(String message, Session session) {
        // 消息处理逻辑
    }
    
    public void sendData(String dashboardId, Object data) {
        // 向指定大屏发送数据
    }
}

高级功能特性

1. 数据权限控制

支持细粒度的数据权限管理，确保数据安全：

// 数据权限拦截器
@Component
public class DataPermissionInterceptor implements HandlerInterceptor {
    
    @Override
    public boolean preHandle(HttpServletRequest request, 
                           HttpServletResponse response, 
                           Object handler) {
        // 校验用户对当前报表的数据访问权限
        String reportId = request.getParameter("reportId");
        User user = getCurrentUser();
        
        if (!dataPermissionService.hasAccess(user, reportId)) {
            throw new AccessDeniedException("无数据访问权限");
        }
        return true;
    }
}

2. 报表模板管理

支持报表模板的导入导出和版本管理：

性能优化策略

1. 数据缓存机制

// 报表数据缓存服务
@Service
public class ReportCacheService {
    
    @Cacheable(value = "reportData", key = "#reportId + '_' + #paramsHash")
    public ReportData getReportData(String reportId, 
                                   Map<String, Object> params) {
        // 从数据库查询数据
        return reportRepository.getData(reportId, params);
    }
    
    @CacheEvict(value = "reportData", key = "#reportId + '_*'")
    public void clearReportCache(String reportId) {
        // 清除相关缓存
    }
}

2. 异步数据加载

前端采用异步加载策略，提升用户体验：

// 异步数据加载示例
const loadReportData = async (reportId: string, params: any) => {
  try {
    const response = await api.report.getData(reportId, params);
    return response.data;
  } catch (error) {
    console.error('报表数据加载失败:', error);
    throw error;
  }
};

// 使用Suspense实现优雅降级
<template>
  <Suspense>
    <template #default>
      <ReportViewer :report-id="reportId" />
    </template>
    <template #fallback>
      <LoadingSpinner />
    </template>
  </Suspense>
</template>

实战案例：销售数据分析大屏

数据模型设计

-- 销售数据表结构
CREATE TABLE sales_data (
    id BIGINT PRIMARY KEY,
    product_id BIGINT,
    sale_date DATE,
    quantity INT,
    amount DECIMAL(15,2),
    region VARCHAR(50),
    salesperson VARCHAR(100),
    created_time DATETIME
);

-- 创建分析视图
CREATE VIEW sales_analysis AS
SELECT 
    DATE_FORMAT(sale_date, '%Y-%m') as month,
    region,
    SUM(quantity) as total_quantity,
    SUM(amount) as total_amount,
    COUNT(*) as order_count
FROM sales_data
GROUP BY DATE_FORMAT(sale_date, '%Y-%m'), region;

大屏配置示例

{
  "dashboard": {
    "title": "销售业绩监控大屏",
    "layout": "grid-12",
    "background": "#0f1c3c",
    "widgets": [
      {
        "type": "statistic",
        "title": "本月销售额",
        "dataSource": "sales_monthly",
        "position": {"x": 0, "y": 0, "w": 3, "h": 2}
      },
      {
        "type": "lineChart", 
        "title": "销售趋势分析",
        "dataSource": "sales_trend",
        "position": {"x": 3, "y": 0, "w": 6, "h": 4}
      },
      {
        "type": "pieChart",
        "title": "区域销售占比",
        "dataSource": "region_distribution", 
        "position": {"x": 9, "y": 0, "w": 3, "h": 4}
      }
    ]
  }
}

通过JeecgBoot的报表与大屏可视化工具，企业可以快速构建专业的数据展示平台，实现数据驱动的决策支持。平台提供的拖拽式设计、丰富图表类型、实时数据更新等特性，让数据可视化变得简单而强大。

总结

JeecgBoot作为一款强大的企业级低代码开发平台，通过Online在线表单、智能代码生成、双引擎流程设计和可视化报表工具，为开发者提供了全方位的快速开发解决方案。平台不仅支持零代码配置和可视化设计，还具备高度的可扩展性和定制能力，能够满足从传统业务系统到AI智能应用的各种复杂场景需求。通过本文的实战指南，开发者可以深入掌握平台的使用技巧，大幅提升开发效率，加速企业数字化转型进程。

【免费下载链接】jeecg-boot jeecgboot/jeecg-boot 是一个基于 Spring Boot 的 Java 框架，用于快速开发企业级应用。适合在 Java 应用开发中使用，提高开发效率和代码质量。特点是提供了丰富的组件库、模块化架构和自动化配置方式。 项目地址: https://gitcode.com/GitHub_Trending/je/jeecg-boot