amis低代码从入门到实战：JSON配置页面搭建后台管理系统的完整流程

amis低代码从入门到实战：JSON配置页面搭建后台管理系统的完整流程

【免费下载链接】amis前端低代码框架，通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis

给业务交一个后台管理系统，表单、筛选、表格、导出，排期一周起步。想省掉这些重复劳动，可以换条路：用JSON配置页面。amis低代码框架让你只写配置，页面由渲染器生成。

amis能替你省掉什么：一张表说清楚

传统做后台页面，前端要写标签、调样式、联接口。换成amis之后，这些活大部分被一份配置接管了：

编辑器是三段式布局：左侧组件面板、中间编辑区、右侧属性面板，改哪看哪，预览即时刷新。

三步安装并跑起第一个amis页面

第1步 准备环境：装好 Node.js 和 npm，版本能跑 React 16 以上即可。

第2步 安装：

npm install amis

一行装好，这是最省事的 amis 安装方式。想读源码的话，clone 仓库（地址：https://gitcode.com/GitHub_Trending/am/amis）后再执行 npm install。

第3步 渲染：写一个最小的 schema，交给渲染器。React 里调用new Renderer(schema)，页面就出现在 DOM 里。schema 长什么样，下一节直接拆开看。

看懂JSON配置：一个表单例子讲透

JSON配置就像交给前端的一张页面施工图：结构分层、控件位置、属性取值都写在纸上，渲染器照图施工。下面这份 amis表单配置是完整但最小的：

{ "type": "page", "title": "简单表单页面", "body": { "type": "form", "api": "/saveForm", "fields": [ { "type": "text", "name": "name", "label": "姓名" }, { "type": "number", "name": "age", "label": "年龄" } ], "actions": [{ "type": "button", "label": "提交", "primary": true }] } }

逐行拆一下：

• type: "page"：最外层是页面容器，title渲染页头。
• body里挂一个表单，fields数组就是控件清单：第一行文本框收姓名，第二行数字框收年龄，label决定表单里的显示文案。
• api指定提交地址，点提交后数据发往/saveForm。
• actions控制底部按钮，primary: true把它变成主按钮。

以后加字段、改校验，只动这份 JSON，不用碰渲染代码。

表单配置+数据表格：搭一个真实的后台模块

真实后台很少只有一个表单，最常见的组合是"上表单、下表格"。

表单侧，amis 内置了 70 多个表单控件，文本框、下拉框、日期选择器、富文本、穿梭框直接写进fields就行，完整清单在表单组件文档里。用可视化编辑器时，还能通过脚手架弹窗一键生成表单骨架：

数据表格侧，CRUD 组件把数据表格做成了标准件：排序、筛选、分页开箱即用，行操作、批量操作、导出都靠配置打开。接口返回标准结构后，表格自己翻页取数，前端几乎不用写逻辑。示例工程的 CRUD 目录里有几十个可抄的用法。

进阶：自定义组件与数据交互什么时候用

内置能力覆盖不了，才轮到这两块。

amis自定义组件：业务里出现 amis 没有的控件（比如带业务规则的上传器），你写一个 React 组件注册进 amis，之后它就能像内置组件一样被配置、被拖拽、进编辑器。

开发步骤见自定义组件文档。

数据交互：默认约定下，api字段决定拉数和提交行为。后端字段名对不齐时，用数据映射改键名；页面多处共用一份数据、或需要派生字段，交给数据链处理，细节在数据链与数据映射。

amis适合谁，不适合谁

适合：后台管理系统、运营配置平台、数据看板这类结构规整、重复度高的页面；你只有 1-3 年经验，但想先交页面再迭代细节；后端愿意按标准结构返回数据。

不适合：

• 像素级定制的营销页、重动效的 C 端界面，不是它的主场。amis 的样式体系到不了那个精度，硬用不如直接写 React。
• 接口结构完全不受控，又不允许加映射层：数据映射救得了常规改名，救不了随意返回。

一句话：页面越规整，amis 回报越高；页面越天马行空，它越吃力。

学习路线：4个入口

1. 快速开始：从环境到第一份 schema。
2. 组件总目录：展示组件、表单控件逐个查属性。
3. 扩展指南：自定义组件、主题、国际化等进阶内容。
4. 示例工程：表单、数据表格、联动等场景的可运行 demo。

从最小 JSON 起步，先跑通一个"表单+表格"页面，再按需补进阶能力，这是最短的上手路径。

【免费下载链接】amis前端低代码框架，通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis