用一份 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 目录下的文档。不想手写 JSONamis 还配了一个可视化编辑器拖拽组件、改属性生成的仍是 JSON 配置。碰上内置组件覆盖不了的控件就写一个自定义组件挂进去。amis 什么时候适合用、什么时候别硬用适合快速迭代的后台页面、字段密集的增删改查、配置要交给非前端同学维护的场景。⚠️ 别硬用强定制的 UI、拖拽排布这类复杂交互、要逐像素还原设计稿的页面。我的建议amis 做骨架特殊块用自定义组件补纯展示型页面直接写代码可能更省。行动清单克隆仓库跑一遍官方示例感受配置到页面的完整链路自己写一份订单列表 新增弹窗的 JSON 配置不用看提示遇到不认识的字段对照 组件文档目录 逐个查把常用字段抄成自己的配置模板下次换 label 就能用【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
用一份 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 目录下的文档。不想手写 JSONamis 还配了一个可视化编辑器拖拽组件、改属性生成的仍是 JSON 配置。碰上内置组件覆盖不了的控件就写一个自定义组件挂进去。amis 什么时候适合用、什么时候别硬用适合快速迭代的后台页面、字段密集的增删改查、配置要交给非前端同学维护的场景。⚠️ 别硬用强定制的 UI、拖拽排布这类复杂交互、要逐像素还原设计稿的页面。我的建议amis 做骨架特殊块用自定义组件补纯展示型页面直接写代码可能更省。行动清单克隆仓库跑一遍官方示例感受配置到页面的完整链路自己写一份订单列表 新增弹窗的 JSON 配置不用看提示遇到不认识的字段对照 组件文档目录 逐个查把常用字段抄成自己的配置模板下次换 label 就能用【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
