别再手写后台页面了：amis 低代码框架入门指南

别再手写后台页面了：amis 低代码框架入门指南

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

做后台管理系统，大部分时间都花在表单、表格和详情页上。amis 低代码框架把这类重复页面变成 JSON 配置——写配置，页面自己长出来。本文面向刚接触它的开发者，从安装讲到第一个页面跑通，大概 5 分钟。

适合谁：当你总要画表单和表格

做后台，活儿大多是雷同的：几个输入框、几个按钮、一张能排序分页的表格。手写时，代码散在组件、样式、请求几个文件里，需求一变就得挨个翻找。

amis 把这些页面变成一份 JSON 文件：字段是一个数组，操作是几个属性，整页逻辑都在一份配置里。需求变更时改配置就行——这就是用 amis 做后台管理系统最直接的收益。所以它很适合这类场景：这周必须上线的运营后台、每个月都要加页面的数据平台、没人有精力精雕细琢的内部工具。它也让非前端同学有得参与：不想学组件开发，也能用可视化编辑器把页面摆出来。

但要说清楚边界：如果你的产品本身就是交互，有大量定制动画和复杂状态，组件还是要自己写。amis 解决的是“标准页面”的重复劳动。

5 分钟跑起第一个页面：2 条命令安装，2 步验证

先拿代码，两种方式：

# 方式一：装进现有项目 npm install amis # 方式二：克隆源码，方便翻示例 git clone https://gitcode.com/GitHub_Trending/am/amis

项目已有前端工程，跑完第一条就够了；第二条适合想直接翻仓库里示例和文档源码的人。

然后按 2 步跑通。第 1 步，写一个配置文件，内容就是这段：

{ "type": "page", "title": "会员信息", "body": { "type": "form", "api": "/save", "body": [ { "type": "input-text", "name": "name", "label": "姓名" }, { "type": "input-number", "name": "age", "label": "年龄" } ] } }

第 2 步，把渲染器指向这份配置，浏览器里会出现一个带两个字段和提交按钮的表单，提交请求打到api填的地址。再做个验证：往配置里加一个字段、改一下标题，刷新页面，变化立刻生效。你一行 HTML 都没写，这就是 amis 的日常工作方式。✅

从表单到数据表格：最常见的 4 个场景长这样

表单：一个字段就是一行配置

前面例子里的两个字段其实已经是完整用法：input-text、select、date这类控件各占一行，校验规则、是否必填都写在字段旁边。表单长了以后，可以用编辑器按字段清单搭出表单，不用一段段复制粘贴。

数据表格：排序、分页、行操作都在配置里

CRUD 组件是后台的主力：接上api，表格就有数据；列还是那个数组；排序、分页、行操作、批量操作都写在同一份配置里。数据结构变了，只改列配置，不用翻请求代码。

布局：用网格把仪表盘排好

一个页面要塞几张卡片、几张图表时，用网格组件：配置里写行列数，分栏就排好了。仪表盘这种“格子多、位置不规整”的布局，用 grid-2d 按格子定位，摆位不再靠猜。

可视化编辑：不用再手贴 JSON

不想写 JSON 的话，打开 amis 可视化编辑器：左侧面板拖组件，右侧面板改属性，中间实时预览。页面上的文字也能点中直接改，改完还能把配置导出来。

进阶：加自定义组件，让数据流动

内置控件不够用时，可以把自定义 React 组件封装成 amis 自定义组件，注册进编辑器和渲染器，之后全组继续用同一套 JSON 风格调用。官方文档的“扩展”部分有一章专门讲这个流程，照着做即可。🧩

数据交互方面，关键就一个词：api。表单提交、表格数据、下拉选项，凡是能配接口的位置都支持它，加载状态和错误提示由框架兜住。接口字段名和页面对不上时用数据映射对齐；多级引用、共享同一份数据时用数据链管理，不需要手写请求逻辑。

什么时候选 amis，下一步做什么

先给一句判断标准。选它的时候：页面是标准件——表单、表格、详情、仪表盘，你希望压缩交付时间，并且希望非前端也能改页面。别硬上的时候：产品本身就是交互，定制动画和复杂状态占大头，这类部分自己写组件，标准部分交给 amis，两边混着用也完全可行。

👉 接下来做两件事：

• 到 examples/ 目录翻几个现成示例，重点看 Form 和 CRUD 部分，感受真实配置的写法
• 从 docs/zh-CN/ 官方文档的“快速开始”读起，再补 schema 与数据链两篇概念，就能开始改自己的页面了

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