amis 低代码实战用 JSON 配置写出整个后台页面【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis接手中后台项目你大概率会面对这样的需求单列表、表单、详情页排着队来字段长得都差不多只是名字不一样。给每页手写一套 HTML 和组件代码工期根本扛不住。这正是 amis 这个前端低代码框架要解决的场景——把页面写成一份 JSON 配置交给渲染器一个可用的后台页面就出来了连前端背景不深的人也能参与维护。先把 amis 的几件事实说清楚配置即页面。页面结构就是 JSON Schema什么位置放什么组件全部用属性描述不用手写标签、不用逐个查 React 组件 API。组件开箱即用。仓库里packages/amis/src/renderers/下有 90 个渲染器表单输入项就有 60 多个表格、图表、布局容器这些后台高频元素都覆盖了。两种接入姿势共存。它提供 JS SDK 和 React 两种形态老项目挂个 script 就能用React 工程里当普通组件嵌进去不绑架你现有的技术栈。从 0 到第一个 JSON 页面只要两步前提是本地装好 Node.js 和 npm然后安装npm i amis装完就能开始写页面了。下面这份配置不到 15 行{ type: page, title: 员工登记表, body: { type: form, api: /saveForm, body: [ { type: input-text, name: name, label: 姓名 }, { type: input-number, name: age, label: 年龄 }, { type: button, label: 提交, primary: true } ] } }它会渲染出一个带头部的表单页两个输入框、一个主按钮点击提交后数据 POST 到/saveForm。SDK 方式接入时只需要把它交给嵌入函数let amis amisRequire(amis/embed); let amisScoped amis.embed(#root, schema, { data: {} });如果你想先看见效果再动手仓库自带示例工程跑起来后浏览器访问 127.0.0.1:8888 就能翻到各种现成页面细节可对照 快速开始文档。能力拆解界面拼装、数据绑定、二次扩展 界面拼装不写标记写树能做什么布局组件flex、grid、tabs、panel和内容组件在 JSON 里任意嵌套一棵树就是一个完整页面还能随时切主题。怎么配每个节点声明type和body页面层级由嵌套表达。不想手写 JSON 的话可视化编辑器支持从左侧组件面板拖组件进画布右侧属性面板改字段改完立即预览——下面这张图就是在编辑器里搭表单页时的状态。适合场景运营活动页、内部工具页这类结构固定、字段多变的页面拼装成本几乎只剩写字段名。 数据绑定不写请求只配数据流能做什么组件上不出现请求代码数据怎么来、怎么显示全靠配置声明。怎么配给 CRUD 表格或表单挂一个api属性请求、分页、回显就都接上了展示层用${field}这样的模板表达式引用数据更复杂的联动靠数据链和数据映射组织规则见 数据链文档。适合场景典型的增删改查列表、下拉级联、改了 A 字段 B 字段跟着变的联动逻辑基本都在配置层解决。 二次扩展把你的组件插进体系能做什么JSON 覆盖不了的控件可以自己写一个 React 组件注册进 amis之后在配置里像内置组件一样按type使用。怎么配开发流程参考 自定义组件文档注册完成后编辑器左侧会出现自定义组件页签拖拽、配属性、预览的体验和系统组件一致。适合场景企业自己的品牌控件、图表封装、第三方 SDK 包装一次开发、全项目复用。落地场景与边界中后台 CRUD列表 筛选 详情 编辑amis 的主力战场一个页面常常几十行配置就够。运营配置页结构固定、字段频繁增删的后台页面运营或后端同学改改 JSON 就能上线。快速原型验证先用配置把页面立起来给业务方看确认可行再决定哪些模块值得下沉为自研组件。边界也要说清楚像素级视觉定制、复杂交互动效、重型状态管理逻辑手写 React 仍然更快而且 amis 只解决前端接口实现和数据权限还是后端的事。下一步怎么走先按 快速开始 把examples/里的示例跑起来挑一个 CRUD 页面改成你的业务字段。跑通之后再带着具体需求去翻docs/zh-CN/extend/下的扩展章节从配置走向自定义。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考