企业官网建设流程全解析

用一份 JSON 配置生成后台管理页面：amis 低代码框架入门教程

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

产品经理说：今天下班前，要一个能录订单、能查订单的后台页面。你接不接？

这种需求很典型：字段不多，但表单一套、列表一套，手写 HTML 和 JS 又得磨半天。

amis 是一个前端低代码框架，你写 JSON 配置，它直接渲染成后台页面——录单、列表、分页、提交，基本不用写页面代码。

为什么 JSON 配置能直接当页面

把它想成点外卖：JSON 就是你的订单，内置组件是后厨的菜品，渲染器照着订单出菜。

你不用关心菜怎么炒，只填"要几个、什么味"。

页面也一样：每个组件都是配置项，组合起来就是一整页，改需求往往就是改几行配置。

从零写出第一份页面配置

🔧 装。本地已有 Node.js 和 npm 的话，直接克隆仓库跑示例：

git clone https://gitcode.com/GitHub_Trending/am/amis cd amis npm install && npm start

✍️ 写。下面是一份最小配置，一个订单录入表单：

{ "type": "page", "title": "订单录入", "body": { "type": "form", "api": "/api/orders/save", "body": [ { "type": "text", "name": "customer", "label": "收货人" }, { "type": "number", "name": "count", "label": "数量", "required": true }, { "type": "textarea", "name": "remark", "label": "备注" } ], "actions": [{ "type": "submit-button", "label": "提交订单" }] } }

👀 看。用 amis 的渲染器（embed方法）把这份 JSON 塞进一个空 div，页面上立刻出现一个可输入、可校验、可提交的表单。具体接法看 快速开始文档。

表单、表格、后端数据：三个最常见的活儿

📝 页面里要一张表单

后台里一半的页面是表单。form里放一组字段，每个字段三件套：类型、字段名、标签。

文本、数字、下拉、日期，都是换个type的事。

required声明必填，api声明提交到哪，校验和提交流程它自己跑。

📋 要把后端数据摆成表格

列表页用crud：配好列定义和数据接口，一个能分页、能排序的表格就出来了。

操作列里的按钮也是配置出来的，不用手写表格逻辑。

🔌 后端数据怎么接上

数据链路的关键就一个字段：api。

页面加载时 amis 自动请求这个地址，把返回的数据填进页面控件；响应结构和页面字段对不上时，用数据映射或表达式调一下，详见 concepts 目录下的文档。

不想手写 JSON？amis 还配了一个可视化编辑器，拖拽组件、改属性，生成的仍是 JSON 配置。

碰上内置组件覆盖不了的控件，就写一个自定义组件挂进去。

amis 什么时候适合用、什么时候别硬用

适合：快速迭代的后台页面、字段密集的增删改查、配置要交给非前端同学维护的场景。

⚠️ 别硬用：强定制的 UI、拖拽排布这类复杂交互、要逐像素还原设计稿的页面。

我的建议：amis 做骨架，特殊块用自定义组件补；纯展示型页面直接写代码可能更省。

行动清单

• 克隆仓库跑一遍官方示例，感受配置到页面的完整链路
• 自己写一份"订单列表 + 新增弹窗"的 JSON 配置，不用看提示
• 遇到不认识的字段，对照 组件文档目录 逐个查
• 把常用字段抄成自己的配置模板，下次换 label 就能用

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