amis4jweb前端低代码平台设计与实现

一、背景

经过前期的调研和需求相关的分析，基本确定了要做前端低代码平台，至于具体怎么做，如何实现，这里重点介绍一下基于百度Amis框架的前端低代码实现方案。

二、需求

2.1 核心需求

支持可视化页面管理项目，模块，API，API参数(vo,dto)
持久化API元数据信息
优先支持Amis DSL Json代码内容生成
支持导入解析PlantUML API文档构建整体API元数据信息(无需手工维护)

2.2 个性化需求

支持基于项目内置的代码生成
支持二次开发匹配企业对应的前端框架
支持代码段管理和代码模版管理，方便快速修改
支持按模块和按API级别两种维度导出生成的代码
支持按模块维度动态选择代码模版构建前端代码内容

2.3 非功能性需求

增量迭代的数据唯一性校验
优先构建前后端不分离的项目版本
管理表单界面可用性
二次开发的扩展性
API元数据模型定义，方便模版定制

三、方案设计

3.1 表结构设计

3.2 领域模型设计

3.3 内部服务接口设计

3.4 工程架构设计

3.4.1 业务架构图

这里简单介绍下上面的业务架构图，总体来说是一个单体项目，包含了前后端内容，与前端相关的内容则以MVC架构来进行快速构建，在controller层面提供了纯API和页面路由API，同时采用了传统的模式让参数模型与表结构基本对应。Web代码生产核心服务的上层则是CURD对应的服务层，采用纯Service的方式直接对接基础设施层。在Service里调用web代码生产引擎服务，核心服务与CURD服务进行接口隔离实现了DDD的方式建设web代码引擎结合MVC的架构风格。

3.4.2 模块设计与说明

上图有些需要说明的地方如下：

开发过程中优先构建的前后端不分离页面，然后构建前后端分离项目，以前后端分离项目为主
amis4j-web下的配置文件夹ftl是在项目启动时从数据库中读取ftl的模版动态生成的文件存放的地方
webapp-model则是存放不同项目的后端本地化文件夹，开发和自己用的时候可以用到，web化不需要
webcode是存放不同项目构建出的代码

3.4.3 前后端不分离方案

整体思路：基于百度Amis 框架做前端的单页应用。后端采用SpringBoot MVC的模式来响应并控制页面跳转。

优点

方便快速结合Amis的demo做html文件格式的单页应用，前端内容上手难度进一步降低。服务启动即可访问页面，方便开发和调试。

缺点

Amis Json与页面耦合，CURD相关的JSON内容都放一起，不好修改。前端没有热更新的能力，一旦需要修改更新则需要重新启动服务。Amis单页应用无法撑起整个管理系统的web端。

3.4.4 前后端分离方案

整体思路：基于Amis 的多页App的demo快速搭建web端管理系统，废弃后端Model路由功能，后端退化为纯后端API应用。

优点

基于demo可以快速调试前后端API如何交互，快速开发具体业务代码符合web端管理系统的界面风格，前后端分离前端基于开发者模式可以快速进行热部署，修改即可见，可快速调整业务代码。
缺点

需要了解Amis 多页App的文件内容，相关路由和json内容的职责等。没有加入社区沟通群，出现问题可能无法及时解决。

四、业务流程

4.0 PlantUML API 文档样例

文档内容说明:在前端PlantUML API文档中参考了之前做后端低代码平台的设计，增加了一些扩展字段，同时对于web Api而言则有一些特定的书写方式：比如UserApi，要以Api结尾,Api的具体方法不用包裹ResultDto,同时尽可能的把Api信息描述完整。比如方法参数，url,请求方式。扩展字段说明：searchKeyList:属性是否在分页列表中进行查询 excludeUpdate：在表单数据修改的场景是否不渲染对应属性 excludeInsert:在表单数据新建的场景是否不渲染对应属性 notRequireKeyList:在表单新建和修改的场景中是否不必填 input-text:对应web框架自己可以识别的表单元素组件，这里是amis的输入框组件 select: 同input-text,是amis的下拉框组件 templateJsonKey: 如果是模块级别，集成(Curd)整体界面的话，可以自定义模版，表明该模块使用对应的模块级代码模版进行构建。

4.1 API元数据构建流程

4.2 代码生成流程

4.3 模版配置与使用流程

为了实现模版的动态化配置，这里将API元数据的核心模型与变量关联起来，在生成代码的时候动态构建变量列表，加载模版之后即可构建代码。以下是API元数据模型字段列表和新增模版说明。

4.3.1 API元数据模型字段列表

变量编码	变量描述	json格式	freemarker格式	数据用例(Amis)
projectDevUrl	项目开发环境链接	$projectDevUrl	${projectDevUrl}	http://localhost.dev.com
projectTestUrl	项目测试环境链接	$projectTestUrl	${projectTestUrl}	http://localhost.test.com
projectPreUrl	项目预发环境链接	$projectPreUrl	${projectPreUrl}	http://localhost.pre.com
projectProUrl	项目生产环境链接	$projectProUrl	${projectProUrl}	http://localhost.pro.com
moduleRouteUrl	模块路由链接	$moduleRouteUrl	${moduleRouteUrl}	/user/manager
moduleTitle	模块标题	$moduleTitle	${moduleTitle}	用户管理
moduleCode	模块编码	$moduleCode	${moduleCode}	user
moduleContext	模块上下文名称	$moduleContext	${moduleContext}	userContext
moduleList	模块信息列表	$moduleList	${moduleList}	–
insertApiTitle	保存api标题	$insertApiTitle	${insertApiTitle}	新增用户信息
updateApiTitle	修改api标题	$updateApiTitle	${updateApiTitle}	修改用户信息
detailApiTitle	查询api标题	$detailApiTitle	${detailApiTitle}	查看用户详情
insertForm	插入-表单元素内容	$insertForm	${insertForm}	–
updateForm	修改-表单元素内容	$updateForm	${updateForm}	–
detailForm	查看-表单元素内容	$detailForm	${detailForm}	–
pageForm	分页列表-表单元素内容	$pageForm	${pageForm}	–
insertApi	插入的api资源	$insertApi	${insertApi}	/user/save
updateApi	修改的api资源	$updateApi	${updateApi}	/user/update
detailApi	获取单条数据的api资源	$detailApi	${detailApi}	/user/getById
pageApi	分页列表查询的api资源	$pageApi	${pageApi}	/user/page
deleteApi	删除的api资源	$deleteApi	${deleteApi}	/user/deleteById
deleteBatchApi	批量删除的api资源	$deleteBatchApi	${deleteBatchApi}	/user/deleteBatch
updateBatchApi	批量修改的api资源	$updateBatchApi	${updateBatchApi}	/user/updateBatch
listApi	列表查询api资源	$listApi	${listApi}	/user/list
exportApi	数据导出api资源	$exportApi	${exportApi}	/user/export
importApi	数据数据导入api资源	$importApi	${importApi}	/user/import
insertApiParam	插入api参数	$insertApiParam	${insertApiParam}	{ “type”: “input-text”, “name”: “chineseName”, “label”: “用户姓名”, “required”: true }, { “type”: “input-text”, “name”: “age”, “label”: “用户年龄” }, { “type”: “input-text”, “name”: “phone”, “label”: “电活”, “required”: true }
updateApiParam	修改api参数	$updateApiParam	${updateApiParam}	{ “type”: “text”, “name”: “chineseName”, “label”: “用户姓名”, “required”: true }, { “type”: “input-text”, “name”: “age”, “label”: “用户年龄” }, { “type”: “input-text”, “name”: “phone”, “label”: “电活”, “required”: true }
detailApiParam	单条详情api参数	$detailApiParam	${detailApiParam}	{ “type”: “text”, “name”: “chineseName”, “label”: “用户姓名” }, { “type”: “text”, “name”: “age”, “label”: “用户年龄” }, { “type”: “text”, “name”: “phone”, “label”: “电活” }
pageApiParam	分页列表详情api参数	$pageApiParam	${pageApiParam}	{ “type”: “text”, “name”: “chineseName”, “label”: “用户姓名”, “searchable”: { “type”: “input-text”, “name”: “chineseName”, “placeholder”: “输入用户姓名” } }, { “type”: “text”, “name”: “age”, “label”: “用户年龄” }, { “type”: “text”, “name”: “phone”, “label”: “电活” }
listApiParam	列表详情api参数	$listApiParam	${listApiParam}	{ “type”: “text”, “name”: “chineseName”, “label”: “用户姓名” }, { “type”: “text”, “name”: “age”, “label”: “用户年龄” }, { “type”: “text”, “name”: “phone”, “label”: “电活” }