【JSON2WEB】09 Amis-editor的代码移植到json2web

最新推荐文章于 2024-05-31 19:31:33 发布
最新推荐文章于 2024-05-31 19:31:33 发布
阅读量398 收藏 3
点赞数 3
分类专栏： JSON2WEB 文章标签： amis-editor 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/html5builder/article/details/136501161
版权

【JSON2WEB】01 WEB管理信息系统架构设计

【JSON2WEB】02 JSON2WEB初步UI设计

【JSON2WEB】03 go的模板包html/template的使用

【JSON2WEB】04 amis低代码前端框架介绍

【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成

【JSON2WEB】06 JSON2WEB前端框架搭建

【JSON2WEB】07 Amis可视化设计器CRUD增删改查

【JSON2WEB】08 Amis的事件和校验

用Amis-editor可视化编辑器开发的代码移植到JSON2WEB框架中。

1 Amis-editor复制代码

切换到代码模式，Ctrl+A全选，Ctrl+C复制代码

在这里插入图片描述

2 新建页面atop.json

VS打开json2web目录，在pages目录先新建atop.json
在这里插入图片描述
Ctrl+V源码复制到atop.json
在这里插入图片描述

3 新增导航项Atop

编辑/pages/site.json增加atop项
在这里插入图片描述

4 Atop.json源码

Atop.json页面的全部源码如下：

{
  "type": "page",
  "title": "A股TOP3",
  "body": [
    {
      "id": "u:13d67a44214e",
      "type": "crud2",
      "mode": "table2",
      "dsType": "api",
      "syncLocation": true,
      "primaryField": "p_id",
      "loadType": "pagination",
      "api": {
        "url": "http://127.0.0.1:5217/rest/atop",
        "method": "get"
      },
      "quickSaveItemApi": {
        "url": "http://127.0.0.1:5217/rest/atop/?where=p_id=$P_ID",
        "method": "put",
        "requestAdaptor": "",
        "adaptor": "",
        "messages": {}
      },
      "filter": {
        "type": "form",
        "title": "条件查询",
        "mode": "inline",
        "columnCount": 5,
        "clearValueOnHidden": true,
        "behavior": [
          "SimpleQuery"
        ],
        "body": [
          {
            "name": "F_DM",
            "label": "代码",
            "type": "input-text",
            "size": "full",
            "required": false,
            "behavior": "SimpleQuery",
            "id": "u:ea7e71f84464"
          },
          {
            "name": "S_MC",
            "label": "名称",
            "type": "input-text",
            "size": "full",
            "required": false,
            "behavior": "SimpleQuery",
            "id": "u:cf78c0661188"
          },
          {
            "name": "S_CYM",
            "label": "可转债名称",
            "type": "input-text",
            "size": "full",
            "required": false,
            "behavior": "SimpleQuery",
            "id": "u:ea25b81754ff"
          },
          {
            "name": "P_ID",
            "label": "P_ID",
            "type": "input-number",
            "size": "full",
            "required": false,
            "behavior": "SimpleQuery",
            "id": "u:009fb53620f7"
          }
        ],
        "actions": [
          {
            "type": "reset",
            "label": "重置",
            "id": "u:e1ba26b8764a"
          },
          {
            "type": "submit",
            "label": "查询",
            "level": "primary",
            "id": "u:06f82d3bd520"
          }
        ],
        "id": "u:ebd3542b3a47",
        "feat": "Insert",
        "persistData": "atop3",
        "onEvent": {},
        "resetAfterSubmit": false,
        "submitOnChange": true,
        "debug": false
      },
      "headerToolbar": [
        {
          "type": "flex",
          "id": "u:c44a43de0a3b",
          "direction": "row",
          "justify": "flex-start",
          "alignItems": "stretch",
          "style": {
            "position": "static"
          },
          "items": [
            {
              "type": "container",
              "align": "left",
              "behavior": [
                "Insert",
                "BulkEdit",
                "BulkDelete"
              ],
              "body": [
                {
                  "type": "button",
                  "label": "新增",
                  "level": "primary",
                  "className": "m-r-xs",
                  "behavior": "Insert",
                  "onEvent": {
                    "click": {
                      "actions": [
                        {
                          "ignoreError": false,
                          "actionType": "drawer",
                          "drawer": {
                            "type": "drawer",
                            "title": "新增数据",
                            "body": [
                              {
                                "id": "u:daac807c186b",
                                "type": "form",
                                "title": "表单",
                                "mode": "horizontal",
                                "dsType": "api",
                                "feat": "Insert",
                                "body": [
                                  {
                                    "name": "P_ID",
                                    "label": "P_ID",
                                    "type": "input-number",
                                    "id": "u:fc77c965f0f6",
                                    "keyboard": true,
                                    "step": 1,
                                    "required": true,
                                    "visible": true,
                                    "hidden": false
                                  },
                                  {
                                    "name": "F_DM",
                                    "label": "代码",
                                    "type": "input-text",
                                    "id": "u:6b6edac15dd3",
                                    "required": true
                                  },
                                  {
                                    "name": "S_MC",
                                    "label": "名称",
                                    "type": "input-text",
                                    "id": "u:460c838369ca",
                                    "required": true,
                                    "showCounter": false
                                  },
                                  {
                                    "name": "S_CYM",
                                    "label": "可转债名称",
                                    "type": "input-text",
                                    "id": "u:4db3b899eab3"
                                  }
                                ],
                                "api": {
                                  "url": "http://127.0.0.1:5217/rest/atop",
                                  "method": "post",
                                  "requestAdaptor": "",
                                  "adaptor": "",
                                  "messages": {}
                                },
                                "actions": [
                                  {
                                    "type": "button",
                                    "label": "取消",
                                    "onEvent": {
                                      "click": {
                                        "actions": [
                                          {
                                            "actionType": "cancel",
                                            "componentId": "u:daac807c186b"
                                          }
                                        ]
                                      }
                                    },
                                    "level": "default"
                                  },
                                  {
                                    "type": "button",
                                    "label": "提交",
                                    "onEvent": {
                                      "click": {
                                        "actions": [
                                          {
                                            "actionType": "submit",
                                            "componentId": "u:daac807c186b"
                                          }
                                        ]
                                      }
                                    },
                                    "level": "primary"
                                  }
                                ],
                                "reload": "u:13d67a44214e"
                              }
                            ],
                            "showCloseButton": true,
                            "showErrorMsg": true,
                            "showLoading": true,
                            "className": "app-popover :AMISCSSWrapper",
                            "actions": [
                              {
                                "type": "button",
                                "actionType": "cancel",
                                "label": "取消",
                                "id": "u:0e64a08202c2"
                              },
                              {
                                "type": "button",
                                "actionType": "submit",
                                "label": "提交",
                                "primary": true,
                                "id": "u:7aeaadd96eec",
                                "onEvent": {
                                  "click": {
                                    "weight": 0,
                                    "actions": [
                                      {
                                        "componentId": "u:13d67a44214e",
                                        "actionType": "reload"
                                      }
                                    ]
                                  }
                                }
                              }
                            ],
                            "id": "u:6c5ed0a5cbe4"
                          }
                        },
                        {
                          "componentId": "u:13d67a44214e",
                          "ignoreError": false,
                          "actionType": "reload"
                        }
                      ]
                    }
                  },
                  "id": "u:ebec67ec558c"
                }
              ],
              "wrapperBody": false,
              "style": {
                "flexGrow": 1,
                "flex": "1 1 auto",
                "position": "static",
                "display": "flex",
                "flexBasis": "auto",
                "flexDirection": "row",
                "flexWrap": "nowrap",
                "alignItems": "stretch",
                "justifyContent": "flex-start"
              },
              "id": "u:488170b5ddbb"
            },
            {
              "type": "container",
              "align": "right",
              "behavior": [
                "FuzzyQuery"
              ],
              "body": [],
              "wrapperBody": false,
              "style": {
                "flexGrow": 1,
                "flex": "1 1 auto",
                "position": "static",
                "display": "flex",
                "flexBasis": "auto",
                "flexDirection": "row",
                "flexWrap": "nowrap",
                "alignItems": "stretch",
                "justifyContent": "flex-end"
              },
              "id": "u:9aecfb71bf59"
            }
          ]
        }
      ],
      "footerToolbar": [
        {
          "type": "flex",
          "direction": "row",
          "justify": "flex-start",
          "alignItems": "stretch",
          "style": {
            "position": "static"
          },
          "items": [
            {
              "type": "container",
              "align": "left",
              "body": [],
              "wrapperBody": false,
              "style": {
                "flexGrow": 1,
                "flex": "1 1 auto",
                "position": "static",
                "display": "flex",
                "flexBasis": "auto",
                "flexDirection": "row",
                "flexWrap": "nowrap",
                "alignItems": "stretch",
                "justifyContent": "flex-start"
              },
              "id": "u:a4b734dfa2e1"
            },
            {
              "type": "container",
              "align": "right",
              "body": [
                {
                  "type": "pagination",
                  "behavior": "Pagination",
                  "layout": [
                    "total",
                    "pager",
                    "perPage"
                  ],
                  "perPage": 20,
                  "perPageAvailable": [
                    10,
                    20,
                    50,
                    100,
                    500
                  ],
                  "align": "right",
                  "id": "u:636636fa6c40",
                  "size": "",
                  "mode": "normal",
                  "ellipsisPageGap": 5
                }
              ],
              "wrapperBody": false,
              "style": {
                "flexGrow": 1,
                "flex": "1 1 auto",
                "position": "static",
                "display": "flex",
                "flexBasis": "auto",
                "flexDirection": "row",
                "flexWrap": "nowrap",
                "alignItems": "stretch",
                "justifyContent": "flex-end"
              },
              "id": "u:16e84139982b"
            }
          ],
          "id": "u:9b0df78e9bc3"
        }
      ],
      "columns": [
        {
          "type": "tpl",
          "title": "代码",
          "name": "F_DM",
          "id": "u:c4e18fd0bdd7",
          "placeholder": "-",
          "popOver": false,
          "quickEdit": false,
          "sorter": true,
          "searchable": true
        },
        {
          "type": "tpl",
          "title": "名称",
          "name": "S_MC",
          "id": "u:22e29e6a5d0e",
          "placeholder": "-",
          "searchable": true,
          "sorter": true
        },
        {
          "type": "tpl",
          "title": "可转债名称",
          "name": "S_CYM",
          "id": "u:85cef084b3dc",
          "placeholder": "-",
          "sorter": true,
          "searchable": true
        },
        {
          "type": "operation",
          "title": "操作",
          "buttons": [
            {
              "type": "button",
              "label": "查看",
              "level": "link",
              "behavior": "View",
              "onEvent": {
                "click": {
                  "actions": [
                    {
                      "actionType": "drawer",
                      "drawer": {
                        "body": [
                          {
                            "id": "u:36bd6a6688b0",
                            "type": "form",
                            "title": "查看数据",
                            "mode": "horizontal",
                            "dsType": "api",
                            "feat": "View",
                            "body": [
                              {
                                "name": "P_ID",
                                "label": "P_ID",
                                "type": "input-number",
                                "id": "u:b0637cee6396"
                              },
                              {
                                "name": "F_DM",
                                "label": "代码",
                                "type": "input-text",
                                "id": "u:c114852c4c69"
                              },
                              {
                                "name": "S_MC",
                                "label": "名称",
                                "type": "input-text",
                                "id": "u:3689d8d46f7b"
                              },
                              {
                                "name": "S_CYM",
                                "label": "可转债名称",
                                "type": "input-text",
                                "id": "u:d0be9aee59d2"
                              }
                            ],
                            "static": true,
                            "actions": [
                              {
                                "type": "button",
                                "actionType": "cancel",
                                "label": "关闭"
                              }
                            ],
                            "onEvent": {
                              "submitSucc": {
                                "actions": [
                                  {
                                    "actionType": "search",
                                    "groupType": "component",
                                    "componentId": "u:13d67a44214e"
                                  }
                                ]
                              }
                            }
                          }
                        ],
                        "title": "查看数据",
                        "size": "md",
                        "actions": [
                          {
                            "type": "button",
                            "actionType": "cancel",
                            "label": "关闭",
                            "id": "u:2be3003b841c"
                          }
                        ],
                        "id": "u:7346861bdc09"
                      }
                    }
                  ]
                }
              },
              "id": "u:6c3baeb95d15"
            },
            {
              "type": "button",
              "label": "编辑",
              "level": "link",
              "behavior": "Edit",
              "onEvent": {
                "click": {
                  "actions": [
                    {
                      "actionType": "drawer",
                      "drawer": {
                        "body": [
                          {
                            "id": "u:bbc9a77ff015",
                            "type": "form",
                            "title": "编辑数据",
                            "mode": "horizontal",
                            "dsType": "api",
                            "feat": "Edit",
                            "body": [
                              {
                                "name": "P_ID",
                                "label": "P_ID",
                                "type": "input-number",
                                "id": "u:ec33ebe0e271",
                                "keyboard": true,
                                "step": 1,
                                "required": true,
                                "autoFill": {},
                                "static": false
                              },
                              {
                                "name": "F_DM",
                                "label": "代码",
                                "type": "input-text",
                                "id": "u:8dd0df920e65",
                                "required": true
                              },
                              {
                                "name": "S_MC",
                                "label": "名称",
                                "type": "input-text",
                                "id": "u:5f3700400d4a",
                                "required": true
                              },
                              {
                                "name": "S_CYM",
                                "label": "可转债名称",
                                "type": "input-text",
                                "id": "u:10daedbfe375"
                              }
                            ],
                            "api": {
                              "url": "http://127.0.0.1:5217/rest/atop/?where=p_id=$P_ID",
                              "method": "put",
                              "requestAdaptor": "",
                              "adaptor": "",
                              "messages": {}
                            },
                            "resetAfterSubmit": true,
                            "initApi": {
                              "url": "http://127.0.0.1:5217/rest/atop/?where=p_id=$P_ID",
                              "method": "get",
                              "requestAdaptor": "",
                              "adaptor": "",
                              "messages": {}
                            },
                            "actions": [
                              {
                                "type": "button",
                                "actionType": "cancel",
                                "label": "取消"
                              },
                              {
                                "type": "button",
                                "actionType": "submit",
                                "label": "提交",
                                "level": "primary"
                              }
                            ],
                            "onEvent": {
                              "submitSucc": {
                                "actions": [
                                  {
                                    "actionType": "search",
                                    "groupType": "component",
                                    "componentId": "u:13d67a44214e"
                                  }
                                ]
                              }
                            },
                            "reload": "u:13d67a44214e"
                          }
                        ],
                        "title": "编辑数据",
                        "size": "md",
                        "actions": [
                          {
                            "type": "button",
                            "actionType": "cancel",
                            "label": "取消",
                            "id": "u:57398efba2de"
                          },
                          {
                            "type": "button",
                            "actionType": "submit",
                            "label": "提交",
                            "level": "primary",
                            "id": "u:a17861494293",
                            "onEvent": {
                              "click": {
                                "weight": 0,
                                "actions": [
                                  {
                                    "componentId": "u:13d67a44214e",
                                    "ignoreError": false,
                                    "actionType": "reload",
                                    "data": {},
                                    "dataMergeMode": "override"
                                  }
                                ]
                              }
                            }
                          }
                        ],
                        "id": "u:6f733074ae5e"
                      }
                    }
                  ]
                }
              },
              "id": "u:d9a789d94b9b",
              "icon": "",
              "rightIcon": ""
            },
            {
              "type": "button",
              "label": "删除",
              "behavior": "Delete",
              "className": "m-r-xs text-danger",
              "level": "link",
              "confirmText": "确认要删除数据",
              "onEvent": {
                "click": {
                  "actions": [
                    {
                      "ignoreError": false,
                      "outputVar": "responseResult",
                      "actionType": "ajax",
                      "options": {},
                      "api": {
                        "url": "http://127.0.0.1:5217/rest/atop/?where=p_id=$P_ID",
                        "method": "delete",
                        "requestAdaptor": "",
                        "adaptor": "",
                        "messages": {}
                      }
                    },
                    {
                      "componentId": "u:13d67a44214e",
                      "ignoreError": false,
                      "actionType": "reload",
                      "dataMergeMode": "override",
                      "data": {}
                    }
                  ]
                }
              },
              "id": "u:2269e28a2645",
              "actionType": "ajax"
            }
          ],
          "id": "u:d52c0898a323"
        },
        {
          "type": "tpl",
          "title": "P_ID",
          "name": "P_ID",
          "id": "u:a95ef647b3e8",
          "placeholder": "-",
          "sorter": true,
          "searchable": true
        }
      ],
      "editorSetting": {
        "mock": {
          "enable": true,
          "maxDisplayRows": 3
        }
      },
      "loadDataOnce": true,
      "keepItemSelectionOnPageChange": false,
      "loadDataOnceFetchOnFilter": false,
      "perPage": 10,
      "placeholder": "暂无数据",
      "selectable": false,
      "showHeader": true,
      "lineHeight": "",
      "sticky": true,
      "name": "crud2"
    }
  ],
  "id": "u:4fcd2dbf3f64",
  "asideResizor": false,
  "pullRefresh": {
    "disabled": true
  },
  "regions": [
    "body",
    "header"
  ]
}

5 运行演示

启动json2web服务，http://localhost:3000
在这里插入图片描述
crud增删改查功能全部都有了。
另有：必填校验，刷新列表，增量查询，查询条件本地保存等。

在这里插入图片描述

本文完。

白龙马5217
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
amis百度开源，，，，，，，
08-05
前端低代码框架，通过 JSON 配置就能生成各种后台页面，极大减少开发成本，甚至可以不需要了解前端。
amis学习笔记-代码分析①
m0_55689825的博客
10-10 1513
2021SC@SDUSC 目录 一、前言 二、源代码分析 三、总结 一、前言 分析功能模块为CRUD，即增删改查组件，主要用来展现数据列表，并支持各类【增】【删】【改】【查】等操作。 注意 CRUD 所需的数据必须放 items 中，因此如果只是想显示表格类型的数据没有分页，请使用Table。 二、源代码分析 1. { "type":"page", "body":{ "type":"crud", "api":"https://3xsw...
Amis源码 embed渲染方法解析(json结构渲染原理)：
qq_42152032的博客
05-31 1561
/env会有默认值，默认值与传来的参数进行合并（{默认值, ...env}）1.核心是通过 {renderAmis(schema, amisProps, amisEnv)}渲染的. (amisEnv里是fetcher,isCancel,tracker等)2.返回一个scoped对象，里面属性(getComponentByName等)是在amis-core/src/Scoped.tsx中调用scopeRef方法赋值的。
百度amis低代码引擎实现后台管理系统源码.zip
06-04
百度amis低代码引擎实现后台管理系统源码.zip
AMIS实现渲染一个button的源码分析-Vue
csdn_girl的博客
10-10 3148
使用 schema转为对应的button渲染出来。 输入：schema 输出：button Vue组件 核心过程：schema经过渲染引擎解析成button渲染器。 语法：tsx（与jsx类似） schema { "label": "编辑 Button", "type": "button", "actionType": "dialog", "className": "m-l-md"...
全网详细介绍百度低代码框架amis及实例讲解
念兮为美
04-23 6157
百度公司的低代码平台产品叫爱速搭，amis是爱速搭团队开源的前端低代码框架，爱速搭应用中的页面都是基于amis渲染的，同时爱速搭平台自身的绝大部分页面也是基于amis开发。注意是大部分不是全部哦，也就是项目还是离不开专业开发的。amis的定位是前端UI框架，通过JSON配置生成各种后台页面，甚至可以不需要了解前端，类似于ElementAnt Design，可以基于它快速开发前端页面，但需要自己整合到自己内部系统中，并且实现路由功能。
amis-editor-demo:amis 可视化编辑器示例 http
04-28
在其他项目中使用 amis-editornpm i amis-editor使用 方法import {Editor} from 'amis-editor';render() { return ( <Editor> )}属性说明：value: any 值，amis 的json 配置。onChange: (value: any) => void。 当...
amis低代码前端框架，它使用 JSON 配置来生成页面
04-13
Amis 是一个强大的低代码前端框架，其核心理念是通过 JSON 配置文件来构建复杂的 Web 应用页面。这个框架极大地简化了前端开发者的工作，尤其是对于那些需要快速搭建和迭代页面的项目，Amis 提供了一种高效、灵活的...
amis-admin-demo-vue:amis官方demo的vue实现版本
03-10
amis-admin-demo-vue 基于渲染器，快速搭建自己的管理系统。这是基于官方应用模板的VUE实现版本。 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm ...
AMIS-49587动力线载波调制解调方案
10-25
可编程载波频率从9kHz到95kHz(增量10Hz),半双工方式,数据速率可选择: 300–600–1200–2400 baud(50 Hz),典型应用为AMR,远程安全控制,街灯控制以及漏水,漏汽和火警发送.本文介绍了AMIS−49587主要特性,方框图,发送和...
FastAPI-Amis-Admin: 一个拥有高性能,高效率,易拓展的fastapi管理后台框架
02-11
astapi-amis-admin是一个拥有高性能,高效率,易拓展的fastapi管理后台框架. 启发自Django-Admin,并且拥有不逊色于Django-Admin的强大功能. 关键特性 性能极高：基于FastAPI, 可享受FastAPI的全部优势。 效率更快：...
amis-summary：Amis几种使用总结
03-04
amis--使用总结 总结了Amis一些使用技巧，帮助初学者入门 当前版本Amis 1.1.0 演示预览： 支持了snowpack，可10秒内启动 SnowPack启动： yarn && yarn snowpack WebPack启动，请耐心等待... react-app-rewired更改为webpack-dev-server，方便扩展 yarn && yarn server 整理的内容包括： 1. HelloWorld（基于Create React App） 文件路径： 2. Amis基本使用 提供AmisRender用来所有页面进行注册使用。 3. Amis组件通信 3.1 target-Name方式 3.2开拓方式（非官方方式） JSSDK使用方式会返回scope，并且可以scope.getComponentByName（“ form1”）方式获取组件实例， l
Flask加amis学校管理系统Java车辆出入库jsp源代码Mysql
wanglindda的博客
11-14 117
Flask加amis学校管理系统Java车辆出入库jsp源代码Mysql
amis学习笔记-代码分析②
m0_55689825的博客
10-17 905
2021SC@SDUSC 目录 一、前言 二、源代码分析 数据需求 列配置 列类型 默认是否显示 固定列 可复制 弹出框（popOver） 三、总结 一、前言 本文内容为Amis中数据展示之中的表格展示。 表格展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像Service这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过source属性，获取数据链中的数据，完成数据展示 二、源代码分析 数据需求 数据是对象数组，比如前面的例子中row.
amis源码 Api接口调用解析：
最新发布
qq_42152032的博客
05-31 298
1.embed渲染时可以传入用户定义的fetcher(接口调用)：2.wrapFetcher 方法源码(封装fetcher)： crud接口调用：返回值{status:0, data:{rows:[], count:10}} 会将result.rows | result.items 统一赋值给items作为数据域数据。调用接口获取返回值{status:0, data:{ }}，取出payload中的data(json.data)然后设置到数据域中。
amis低代码框架学习总结
qq_45546333的博客
12-27 1748
amis学习总结开发前准备使用操作说明运行前准备调试接口注意事项 开发前准备 1、一款可以成功打开编辑html和json文件的 IDE（我用的IDEA），Node.js。 2、已阅读官方文档，地址：https://baidu.gitee.io/amis/zh-CN/docs/index。 3、在官方文档中点击下载SDK，从GitHub上克隆demo到本地，访问不了的可以用这个地址：https://gitee.com/baidu/amis?_from=gitee_search 使用操作说明 运行前准备 1、
三、以user表为例，用Amis+Sails实现增删改查操作
JimmyTsai75的博客
01-15 3411
"footerToolbar" : [ "statistics" , //显示统计数据，比如1/3 总共：22 项 "switch-per-page" , //可以切换perPage值（设置pageSize） "pagination" //分页组件 ] ,保存后，界面就有可以设置分页大小的按钮了。"type" : "tpl" , "tpl" : "一共有 ${count} 行数据。
安装Amis
Jimmy的专栏
10-29 2159
3、自己生成主题 CSS，可以修改所有配置，目前只能通过源码方式，请参考 scss\themes\cxd.scss 文件，修改变量后重新编译一个 css，需要注意这种方式在更新 amis 版本的时候最好重新编译，否则就会出现使用旧版 css 的情况，可能导致出错，因此不推荐使用。考虑到后面有可能会直接修改amis的样式，建议把依赖库里面的css文件copy到代码文件夹里面，这样可以不受amis升级影响，避免直接修改amis样式的时候，会被amis升级信息覆盖掉。，点击链接可以直接进入。
amis-editor
01-20
Amis-editor是一个基于React的开源项目，它提供了一套丰富的UI组件和编辑器，可以帮助开发者快速搭建各种类型的页面和应用。它的特点包括易用性、灵活性和扩展性。 首先，Amis-editor提供了大量的预定义UI组件，包括按钮、表单、表格、图表等，开发者可以直接复用这些组件，省去了大量的UI开发工作。同时，Amis-editor也支持自定义组件，开发者可以根据自己的需求编写自定义组件，并结合现有的UI组件，快速构建出复杂的页面结构。 其次，Amis-editor提供了灵活的布局和样式配置，开发者可以通过简单的配置实现页面布局和样式的调整。同时，Amis-editor支持响应式设计，可以适配不同尺寸的设备，并提供了丰富的主题和样式，开发者可以根据自己的需求定制页面的外观。 最后，Amis-editor提供了丰富的扩展能力，开发者可以通过插件和扩展点进行功能扩展，例如自定义编辑器、自定义数据源、自定义事件等。同时，Amis-editor还支持国际化，开发者可以很方便地实现多语言的支持。 总之，Amis-editor是一个功能丰富、易用灵活的UI组件和编辑器，它可以帮助开发者快速搭建页面和应用，并提供了丰富的扩展能力和定制能力。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值