背景
ApiHug UI 解決方案 - ApiHug前后端語義化設計，節約80%以上時間
https://apihug.github.io/zhCN-docs/ui
現代前端框架日趨SPA(Single Page Application)化，給前后協同都帶來了挑戰，ApiHug試圖減少多人在前后協同帶來的理解難度，和同步的滯后性。 所以采用了：
- 前后項目在同工程中不同子模塊
- 工具鏈上融合，?
gradle?+?vite, 無縫集成，互相可以調用任務 - 運行時，java application 靜態代理 + vue 端 proxy
以實現前后端人員協同最大化，上下文切換最低化，開發效率最大化！
這中新開發方式不是 ApiHug 首創，很早如Jhipster?已在嘗試，當然 ApiHug 也從 Jhipster上獲取了很多靈感；
ApiHug 緊緊圍繞 Open Api 標準，使用DSL作為不同角色之間通用語言，讓這一步推進異常的順利！
下面我們從協議層， 到應用層， 再到UI 層一一帶你一步步領略如何借助 ApiHug 快速而又優雅進行全棧開發！
協議
協議，也就是 ProtoBuffer DSL, 這次沒有任何修改，依然是以前的?Proto DSL
前端完整模版尚未正式發布，還在內側中。
?Structure
├─assets (1)
│ ├─styles
│ │ └─transition
│ └─svg-icon
├─components (2)
│ ├─dashboard
│ └─ui
│ ├─accordion
│ ├─alert
├─composables (3)
├─config (4)
├─directive (5)
├─layouts (6)
│ └─admin
├─lib (7)
├─locales (8)
│ └─langs
│ ├─en-US
│ └─zh-CN
├─pages (9)
│ ├─dashboard
│ └─example
├─router (10)
│ └─auto
├─service (11)
│ ├─api
│ ├─form
│ ├─model
│ └─table
├─stores (12)
├─types (13)
└─utils (14)
| Directory | Content |
|---|---|
| (1) | CSS 風格 |
| (2) | 組件庫 |
| (3) | Hook |
| (4) | 配置 |
| (5) | 指令擴展 |
| (6) | 布局 |
| (7) | 三方類 |
| (8) | 國際化 |
| (9) | 頁面 |
| (10) | 路由 |
| (11) | 服務 |
| (12) | 狀態 |
| (13) | d.ts定義 |
| (14) | 幫助類 |
?功能
?Vite
- Auto-import
- Auto-component
- Icon
?Component
?Layout
?Router
?Menu
?Authority
?Style
- Theme
- Color
- Tailwindcss
?Catalog
?Plugin
?packages
?Trivial
- lint
- prettier
- vscode
- format/antfu
?Tip
- 生成文件可以在文件備注?
// hope-no-merger?禁止生成覆蓋，??無法升級更新
配置
角色定義：
- proto 定義標準
- app 定義應用
- ui 定義交互
源泉均來自?proto生成的協議，然后具由此生成應用基礎，應用再鏈接?ui; 所以一般流程：
- 編譯 proto 生成協議
- 通過協議 stub 生成 應用
- 生成應用過程中選擇是否生成 ui
UI 的生成規則，需要配置給 app, app觸發UI生成;
打開 vue 生成標志，?{app}/build.gradle:
hopeStub {enableFrontVue = true
}{app}/ui.json:
{"projectDir": "../good-app-ui"
}| Property | Comment |
|---|---|
| projectDir | UI 模塊相對路徑 |
| httpVendor | @/service/http, useGet/Post Module |
| noMerger | false?預留，未用 |
| outputDir | src/service, API輸出UI模塊內相對目錄 |
| alwaysEraseOld | false?預留，未用 |
| formType | RequestItem?form 類型 |
| formModule | ../type?form 類型引用路徑 |
| columnType | ResponseItem?column 類型 |
| columnModule | ../type?column 類型引用路徑 |
| pathToUrl | import { pathToUrl } from '@/service/utils'?path 路徑解析幫助函數 |
| langDir | src/locales/langs?國際化輸出UI模塊內相對目錄 |
| firstLanguage | zh-CN?國際化，第一語言 |
| secondLanguage | en-US?國際化，第二語言 |
| types | src/types?類型輸出UI模塊相對目錄 |
?編譯
普通執行?stub?命令即可生成 UI 內容:
./gradlew.bat {app}:clean stub build -x test -x stubTest
- 國際化
- Api Stub
- Api Model
- form/table Stub
- type
- 其他
├─assets
│....
├─locales
│ │
│ └─langs
│ ├─en-US
│ │ app.json
│ │
│ └─zh-CN
│ app.json
├─service
│ │ http.ts
│ │ index.ts
│ │ type.ts
│ │ utils.ts
│ │
│ ├─api
│ │ api-example-api.ts
│ │ api-system-system.ts
│ │ index.ts
│ │
│ ├─form
│ │ TemplateExampleRequest.ts
│ │ UploadBookCoverToLocalRequest.ts
│ │
│ ├─model
│ │ api-example-request-example.ts
│ │ api-example-response-example.ts
│ │ index.ts
│ │
│ └─table
│ TemplateExampleResponse.ts
├─types
│ api.d.ts
│ app.d.ts
│ auth.d.ts?運行
由于現代的框架都是SPA(Single Page Application)架構，給前后協同都帶來了挑戰，ApiHug試圖減少多人在前后協同帶來的理解難度，和同步的滯后性。 所以采用了：
- 前后項目在同工程中不同子模塊
- 工具鏈上融合，?
gradle?+?vite, 無縫集成，互相可以調用任務 - 運行時，java application 靜態代理 + vue 端 proxy
以實現前后端人員協同最大化，上下文切換最低化，開發效率最大化！
?App Build Hook
打包資源依賴 UI 項目打包，同時copy UI 資源?dist?到運行時靜態文件目錄：
//Really Static resource of the UI to Output Dirtasks.register('copyUIResources', Copy) {dependsOn project(':good-app-ui').tasks.named('build')from project(':good-app-ui').layout.projectDirectory.dir('dist')into "${layout.buildDirectory.get()}/resources/main/static"}tasks.named('processResources') {dependsOn 'copyUIResources'}?SPA Filter
打開?hope.open.api.enable?標志; 將?api?之外目錄反向到?index.html?入口：
SpaPathChecker DEFAULT =path ->!path.startsWith("/api")&& !path.startsWith("/management")&& !path.startsWith("/v3/api-docs")&& !path.startsWith("/hope/meta")&& !path.startsWith("/h2-console")&& !path.contains(".")&& path.matches("/(.*)");if (checker.passToSpa(path)) {request.getRequestDispatcher("/index.html").forward(request, response);return;
}然后就可以盡情享受和前端一樣絲滑的便捷和體驗！
?Refer
- Jhipster
- jmix
- vaadin
