JeecgBoot Vue3 ：构建高效的企业级前端业务模块

JeecgBoot Vue3 实战：构建高效的企业级前端业务模块

JeecgBoot-Vue3 是一个基于 Vue3.0 + TypeScript + Vite6 + Ant-Design-Vue 的现代化前端解决方案。它集成了二次封装组件、Utils、Hooks、动态菜单、权限校验及按钮级权限控制等核心功能，旨在为企业级应用提供高效、稳健的开发体验。

核心价值：强大的代码生成器让前后端代码一键生成！JeecgBoot 引领低代码开发模式（OnlineCoding -> 代码生成 -> 手工 MERGE），帮助解决 Java 项目 70% 的重复工作，让开发者更专注于业务逻辑。既能快速提高效率、节省成本，又不失灵活性。

---

🛠️ 技术栈与环境

前端技术栈

• 开发工具：WebStorm / VSCode
• 核心框架：Vue3.0 + TypeScript + Vite6 + Ant-Design-Vue4
• 生态库：Pinia + ECharts + UnoCSS + Vxe-Table + Qiankun + ES6
• 包管理：Node / Npm / Pnpm

环境要求

• 本地环境：安装 Node.js、Npm、Pnpm
• Pnpm 版本：要求 9+ 版本以上
• Node.js 版本：
  • 建议 v20.15.0+（要求 Node 20+）
  • 注意：Vite 不再支持已结束生命周期（EOL）的 Node.js 18。现在需要使用 Node.js 20.19+ 或 22.12+

📚 官方文档：[https://help.jeecg.com/ui/]

---

✨ 使用体验与亮点

基础用法在官方文档中已有详尽介绍，这里重点分享一下在实际项目中的使用感受。

1. 高效的组件封装

框架封装了大量贴合企业业务的高频组件，极大减少了重复代码，开发者只需关注业务配置。

2. 丰富的示例库

系统提供了非常丰富的组件示例，在生成代码时可以直接选择所需组件，系统会自动生成对应代码，真正实现了“配置即开发”。

强烈建议大家亲自体验一下，会有更直观的感受。

---

🐛 踩坑与解决方案

在使用过程中，我也遇到了一些细节问题，以下是我的解决方案分享。

问题一：时间范围查询的参数处理

现象描述：
在表格页面中，框架对时间范围查询（RangePicker）有默认的处理逻辑，会自动将时间参数拆分为 xxx_begin 和 xxx_end（例如 warningTime_begin 和 warningTime_end）。

但这种处理方式目前仅在列表查询接口中生效，且是一次性的。在其他场景（如导出接口）中，如果不做处理，直接将时间数组拼接到 URL 后，会导致报错。

默认的日期处理逻辑

导出时的报错：数组无法直接拼接在 URL 中

解决方案：
在封装的导出逻辑中，增加对时间范围参数的统一处理，使其与查询接口保持一致。

1. 编写参数处理函数
   在 /src/hooks/system/useListPage.ts 中，新增 setRangeQuery 方法：

   import { cloneDeep } from 'lodash-es';
   
   async function setRangeQuery(queryParam) {
     let queryParamClone = cloneDeep(queryParam);
     if (queryParam.rangeField) {
       let fieldsValue = queryParam.rangeField.split(',');
       fieldsValue.forEach((item) => {
         if (queryParamClone[item]) {
           let range = queryParamClone[item];
           queryParamClone[item + '_begin'] = range[0];
           queryParamClone[item + '_end'] = range[1];
           delete queryParamClone[item];
         } else {
           queryParamClone[item + '_begin'] = '';
           queryParamClone[item + '_end'] = '';
         }
       });
     }
     return queryParamClone;
   }
   

2. 在导出方法中调用
   找到 onExportXls 方法，在请求发出前调用 setRangeQuery 对参数进行格式化。

   

3. 页面配置
   在页面的查询参数变量中添加 rangeField 属性，值为时间范围参数的字段名（多个字段用逗号隔开）。

   

   这样配置后，导出功能即可正常工作。

   

---

问题二：表格工具栏按钮对齐问题

现象描述：
在某些分辨率或布局下，表格上方的标题与右侧工具栏按钮可能会出现无法水平对齐的情况，影响美观。

解决方案：
修改 /src/components/Table/src/components/TableHeader.vue 文件的样式。

给表格标题区域和工具栏容器添加 Flex 布局样式，强制垂直居中对齐：

/* 示例代码，具体请参考实际文件修改 */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 关键属性 */
}

修复后的对齐效果

---

📝 总结

虽然在使用过程中遇到了一点小瑕疵，但通过简单的调整都能顺利解决。总体而言，JeecgBoot Vue3 依然是一款瑕不掩瑜的优秀框架，其高效的开发模式和完善的生态系统，极大地提升了企业级应用的开发效率。