不要等待机会,而是创造机会。
amis 有两种使用方法:
SDK 版本适合对前端或 React 不了解的开发者。
我们选用sdk方式,整个系统依amis为主题,页面的json配置通过接口获取。
改造思路:
前端依sdk为主 + 自定义事件
后端使用jdk18+springboot3+mybatisplus
1、amis相关操作封装
初始话sdk:创建dom元素,加载amis相关的静态资源
initSdk(version, theme) {
let id = this.domId;
let themeCss = {
'cxd': '/sdk.css',
'dark': '/dark.css',
}
let assets = [
{src: './assets/amis/sdk-' + version + themeCss[theme], type: 'link'},
{src: './assets/amis/sdk-' + version + '/helper.css', type: 'link'},
{src: './assets/amis/sdk-' + version + '/iconfont.css', type: 'link'},
{src: './assets/amis/sdk-' + version + '/sdk.js', type: 'script'},
{src: './assets/amis/lib/umd_history.min.js', type: 'script'},
{src: './assets/amis/lib/vue.min.js', type: 'script'}
]
// 加载相关资源
domUtils.loadAll(assets);
if (domUtils.queryOne('#' + id) == null) {
let dom = domUtils.createDom('div', {"id": id});
domUtils.appendBody(dom);
}
}
更新Schema
/**
* 更新Schema
* @param amisJSON
*/
updateSchema(amisJSON) {
let that = this;
// 初始化
function creteAmis(that, json) {
if (!that.amisScoped) {
setTimeout(() => {
creteAmis(that, amisJSON);
}, 100)
return;
}
that.amisScoped.updateSchema(json);
}
creteAmis(that, amisJSON);
}
2、编辑器相关集成
地址:amis-editor-demo(地址已经失效了)
官网地址:amis-editor-demo
3、后端实现
curd操作......略略略
4、表设计
CREATE TABLE `amis_page` (
`id` bigint(0) NOT NULL,
`page_code` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
`page_name` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '页面名称',
`page_json` json NULL,
`page_version` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '版本号',
`page_desc` varchar(200) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '页面描述',
`create_time` timestamp(0) NULL DEFAULT CURRENT_TIMESTAMP,
`create_by` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;