[二】用amis做一个管理系统 - 基于官方示例的改造

最新推荐文章于 2025-04-09 21:48:31 发布

调皮的鑫鑫

最新推荐文章于 2025-04-09 21:48:31 发布

阅读量2k

点赞数

文章标签：前端

本文链接：https://blog.youkuaiyun.com/cocoManager/article/details/132811748

版权

不要等待机会，而是创造机会。

amis 有两种使用方法：

JS SDK，可以用在任意页面中
React，可以用在 React 项目中

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;