如何用 JSON 配置快速搭建后台管理系统：amis 低代码框架实战指南

如何用 JSON 配置快速搭建后台管理系统：amis 低代码框架实战指南

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

做后台管理系统，你大概率写过这类重复代码：表格、筛选框、分页、表单校验，一个页面接一个页面，八成工作量是纯复制粘贴。amis是百度开源的前端低代码框架，你用 JSON 配置就能生成这些后台页面，还自带拖拽式的可视化编辑器。如果你被后台页面折磨过，这个工具值得花 10 分钟试一下。

一句话定位：amis 把整个后台页面变成一份 JSON schema，由它渲染成 React 页面。它的 SDK 版本不依赖 React 经验，也不强制你走 webpack 构建，引一个 js 文件就能跑起来。跟"给你一堆组件自己拼"的 UI 组件库相比，amis 的粒度高一层——你配置的是整页，不是单个控件。

⚡ 列表页：一个 CRUD 组件搞定

后台里最高频的就是"查询 + 表格"页，amis 用一个crud组件全部覆盖：

• api指向数据接口，分页、排序、筛选参数都自动拼好请求；
• columns定义列，filter定义顶部筛选条件表单，筛选条件默认还会同步到地址栏，链接可直接分享；
• 行内操作按钮、批量操作、列隐藏，都是配置项，不用写一行 JSX。

CRUD 文档把属性写得很全，配合嵌套表格、懒加载等能力，后台 90% 的列表页都能在这一套配置里完成。

📋 表单和 API 对接：校验、联动不用手写状态

表单侧同理，一个form组件加一个api声明提交地址，每个字段配validation规则，必填、格式校验、错误提示都由 amis 接管。更省事的是reactions字段联动——"选了 A 才显示 B"这类逻辑是纯配置，不用手写 setState 和监听。

后端接口格式不规范也没关系，配置里写个map就能做数据映射，前端不必反过来要求后端加接口。表单还支持只读展示模式，同一份字段配置既能编辑也能预览，详情页就省了一套开发量。

🧩 拖拽编辑，还能挂上你自己的组件

写 JSON 很快，但 amis 另提供了一个可视化编辑器（编辑器文档）：

界面分三区：左侧组件面板拖组件进中间画布，右侧属性面板把配置项做成表单，随时可以切回代码模式看 JSON。它适合运营、产品自己搭页面，也适合前端和客户端快速对齐视觉。

如果你有高频使用的业务组件，可以写成 React 自定义渲染器挂进编辑器组件面板，之后拖拽即可用，业务方也不用理解那段 JSON：

布局也是配置。比如grid-2d是个二维网格，每个格子独立放内容，数据看板、驾驶舱这类页面也能用纯配置拼出来：

🚀 从 0 到跑起来的最短路径

SDK 版本是最短路径，本地只需要 Node 和 npm：

npm i amis

装完后node_modules/amis/sdk目录里有现成的 js 和 css。写个hello.html引用它们：

<link rel="stylesheet" href="sdk.css" /> <script src="sdk.js"></script> <script> let amis = amisRequire('amis/embed'); let amisScoped = amis.embed('#root', amisJSON); </script>

amisJSON就是你的页面配置，先写一个列表页试试：

{ "type": "page", "title": "用户管理", "body": { "type": "crud", "api": "/api/users", "columns": [ { "name": "name", "label": "姓名" }, { "name": "age", "label": "年龄" } ] } }

浏览器一开，带标题的列表页就渲染出来了，之后改成表单、加筛选、加分页，都是在同一份 JSON 里改。完整步骤和 React 版本接入可以看快速开始文档。

适合谁，不适合谁

适合：后台管理系统、内部工具、运营配置类页面；前端力量薄的团队（SDK 版不需要 React 经验）；以及产品原型先行、前端再介入的场景。

不适合：强交互的 C 端页面、复杂动画和精细的自定义动效，这类还是手写 React 更稳；另外当页面结构特别复杂时，JSON 本身也会长到难维护，得自己拆子配置、建规范来管。

下次再做后台页面时，先试着用 JSON 把页面描述一遍，哪里写不下去、想手搓 JSX，哪里就是你真正需要自定义代码的地方。建议从 SDK 示例跑通开始，再对照组件文档逐个场景试，这是上手最快的路线。

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