汉中免费做网站公司/如何将网站的关键词排名优化

背景

ApiHug UI 解决方案 - ApiHug前后端语义化设计，节约80%以上时间https://apihug.github.io/zhCN-docs/ui

现代前端框架日趋SPA(Single Page Application)化，给前后协同都带来了挑战，ApiHug试图减少多人在前后协同带来的理解难度，和同步的滞后性。 所以采用了：

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

1. Auto-import
2. Auto-component
3. Icon

​Component

​Layout

​Router

​Menu

​Authority

​Style

1. Theme
2. Color
3. Tailwindcss

​Catalog

​Plugin

​packages

​Trivial

1. lint
2. prettier
3. vscode
4. format/antfu

​Tip

1. 生成文件可以在文件备注 // hope-no-merger 禁止生成覆盖，⚠️无法升级更新

配置

角色定义：

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

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

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

1. Jhipster
2. jmix
3. vaadin