ApiHug 前端解决方案 - M1 内侧-优快云博客

背景

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

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 Dir
    tasks.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;
}

然后就可以尽情享受和前端一样丝滑的便捷和体验！