ApiHug home page
ApiHug
  1. UI
  2. ApiHug 应用UI配置

配置

角色定义：

  1. proto 定义标准
  2. app 定义应用
  3. ui 定义交互

源泉均来自 proto生成的协议，然后具由此生成应用基础，应用再链接 ui; 所以一般流程：

  1. 编译 proto 生成协议
  2. 通过协议 stub 生成 应用
  3. 生成应用过程中选择是否生成 ui

UI 的生成规则，需要配置给 app, app触发UI生成;

打开 vue 生成标志， {app}/build.gradle:

hopeStub {
    enableFrontVue = true
}

{app}/ui.json:

{
  "projectDir": "../good-app-ui"
}

最后跟新： 1.3.4-RELEASE

PropertyComment
uiModuleDirUI 模块相对路径 projectDir
httpVendor@/service/http, useGet/Post Module
noMergerfalse 预留，未用
apiDirsrc/service, API输出UI模块内相对目录 outputDir
alwaysEraseOldfalse 预留，未用
formTypeRequestItem form 类型
formModule../type form 类型引用路径
columnTypeResponseItem column 类型
columnModule../type column 类型引用路径
pathToUrlimport { pathToUrl } from '@/service/utils' path 路径解析帮助函数
langDirsrc/locales/langs 国际化输出UI模块内相对目录
firstLanguagezh-CN 国际化，第一语言
secondLanguageen-US 国际化，第二语言
typesDirsrc/types 类型输出UI模块相对目录 types
autoRouter是否打开自动router扫描,默认 false
pagesDir用来扫描的页面相对目录,默认 src/pages
pagesPath页面应用path, 默认 @/pages
pagePrefix为页面 i18n key 自动前缀, 默认: pages 请勿 以 .结尾
pageSuffix为页面 i18n key 自动后缀, 默认: title 请勿 以 .开始
routerOutDirrouter 输出目录, 默认 src/router/auto
menuItem菜单元素定义, 默认 MenuItem
menuItemImport菜单元素引用包, 默认 ./types
authSplit授权分隔符，用来组装树结构, 默认 :

编译

普通执行 stub 命令即可生成 UI 内容:

./gradlew.bat {app}:clean stub build -x test -x stubTest

  1. 国际化
  2. Api Stub
  3. Api Model
  4. form/table Stub
  5. type
  6. 其他
├─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试图减少多人在前后协同带来的理解难度，和同步的滞后性。 所以采用了：

  1. 前后项目在同工程中不同子模块
  2. 工具链上融合， gradle + vite, 无缝集成，互相可以调用任务
  3. 运行时，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;
}

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