ApiHug Application UI Configuration

​Configuration

Role definitions:

1. proto defines standards
2. app defines application
3. ui defines interaction

All sources originate from the protocol generated by proto, which then generates the application foundation, and the application links to ui. The general process is:

1. Compile proto to generate protocol
2. Generate application through protocol stub
3. Choose whether to generate UI during application generation

UI generation rules need to be configured for the app, and the app triggers UI generation.

Open the vue generation flag in {app}/build.gradle:

hopeStub {
    enableFrontVue = true
}

{app}/ui.json:

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

最后跟新： 1.3.4-RELEASE

Last update: 1.3.4-RELEASE

Property	Comment
uiModuleDir	Relative path of UI module projectDir
httpVendor	@/service/http, useGet/Post Module
noMerger	false reserved, not used
apiDir	src/service, relative directory for API output within UI module outputDir
alwaysEraseOld	false reserved, not used
formType	RequestItem form type
formModule	../type reference path for form type
columnType	ResponseItem column type
columnModule	../type reference path for column type
pathToUrl	import { pathToUrl } from '@/service/utils' helper function for path resolution
langDir	src/locales/langs relative directory for internationalization output within UI module
firstLanguage	zh-CN internationalization, primary language
secondLanguage	en-US internationalization, secondary language
typesDir	src/types relative directory for type output in UI module types
autoRouter	Whether to enable automatic router scanning, default false
pagesDir	Relative directory for pages to scan, default src/pages
pagesPath	Application path for pages, default @/pages
pagePrefix	i18n key prefix for page automatically, default: pages DO NOT end with .
pageSuffix	i18n key suffix for page automatically, default: title DO NOT start with .
authSplit	Authorization delimiter, used to assemble tree structure, default :
routerOutDir	Output directory for router, default src/router/auto
menuItem	Definition of menu item, default MenuItem
menuItemImport	Reference package for menu item, default ./types
authSplit	Authorization delimiter, used to assemble tree structure, default :

​Compilation

Simply execute the stub command to generate UI content:

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

1. i18n
2. Api Stub
3. Api Model
4. form/table Stub
5. type
6. other

├─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
│  │      _common.ts
│  │      _error.ts
│  │
│  └─table
│          TemplateExampleResponse.ts
├─types
│      api.d.ts
│      app.d.ts
│      auth.d.ts

​Runtime

Since modern frameworks all use SPA(Single Page Application) architecture, which brings challenges to frontend-backend collaboration, ApiHug attempts to reduce the complexity of understanding and synchronization delays in multi-person frontend-backend collaboration. Therefore, it adopts:

1. Frontend and backend projects in different submodules within the same project
2. Tool chain integration, gradle + vite, seamless integration, tasks can call each other
3. Runtime, java application static proxy + vue proxy

This achieves maximum collaboration between frontend and backend personnel with minimal context switching and understanding difficulty.

​App Build Hook

Package resources depend on UI project build, while copying UI resources dist to runtime static file directory:

    //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

Enable the hope.open.api.enable flag; Redirect directories other than api to the index.html entry:

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;
}