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 依然是一款瑕不掩瑜的優秀框架，其高效的開發模式和完善的生態系統，極大地提升了企業級應用的開發效率。