个人网站:IT知识小屋 版权:本文由【IT学习日记】原创、在CSDN首发、需要转载请联系博主 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦文章目录简介技术栈实现原理快速上手开源地址使用手册写在最后简介amis是由百度开源的一款前端低代码渲染框架无需懂前端仅通过配置JSON即可生成各式各样的后台页面大大降低前端开发门槛和提升了开发效率且不会受前端技术栈变更的影响特别适用于构建中后台系统与数据驱动的可视化界面。用户无需深入掌握React、Vue、Webpack等技术只需专注业务即可快速搭建高质量界面。主要特点如下基于JSON驱动通过JSON Schema一键生成表单、列表、图表等组件无需编码即可实现页面渲染组件库丰富内置表单、表格、按钮、图表、容器、拖拽等 100 常用组件可满足复杂业务场景可视化编辑支持在线Schema编辑器可实时预览页面效果便于快速修改与测试性能稳定经过百度内部多年实战检验已支撑数万页面稳定运行低技术门槛对前端门外汉友好非前端背景人员亦可快速上手创建页面灵活扩展支持自定义组件混用在低代码基础上集成自定义业务组件技术栈语言框架TypeScript React 渲染方式JSON → Component Schema 渲染 状态管理MobX mobx‑state‑tree 脚手架npm / Lerna / Vite 样式SCSS 编译工具Vite 许可证Apache‑2.0实现原理amis的渲染过程是将 json 转成对应的 React 组件。先通过 json 的 type 找到对应的 Component然后把其他属性作为 props 传递过去完成渲染。如一个表单页面来说如果用 React 组件开发一般长这样Page title页面标题 subTitle副标题 Form title用户登录 InputText nameusername label用户名 / /Form /Page替换成amis实现则仅是只需要把 json 节点根据 type 信息自动转成 React Component 即可{ type: page, title: 页面标题, subTitle: 副标题, body: { type: form, title: 用户登录, body: [ { type: input-text, name: username, label: 用户名 } ] } }快速上手1、下载依赖SDK方式有如下2中方式1、在开源社区获取最新发行版解压放入项目即可方式2、使用 npm i amis 来下载在 node_modules\amis\sdk 目录里就能找到2、在html中引入基于json开发,如下面的一个增删改查界面{ title: 浏览器内核对 CSS 的支持情况, remark: 嘿不保证数据准确性, type: page, body: { type: crud, draggable: true, syncLocation: false, api: https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample, keepItemSelectionOnPageChange: true, autoGenerateFilter: true, bulkActions: [ { type: button, label: 批量删除, actionType: ajax, api: delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/${ids|raw}, confirmText: 确定要批量删除? }, { type: button, label: 批量修改, actionType: dialog, dialog: { title: 批量编辑, name: sample-bulk-edit, body: { type: form, api: https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/bulkUpdate2, body: [ { type: hidden, name: ids }, { type: input-text, name: engine, label: Engine } ] } } } ], quickSaveApi: https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/bulkUpdate, quickSaveItemApi: https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/$id, headerToolbar: [ bulkActions, { type: button, label: 重置测试数据, actionType: ajax, size: sm, api: https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/reset }, export-excel, { type: tpl, tpl: 一共有 ${count} 行数据。, className: v-middle }, { type: columns-toggler, align: right, draggable: true }, { type: drag-toggler, align: right } ], footerToolbar: [ statistics, switch-per-page, pagination ], columns: [ { name: id, label: ID, width: 20, sortable: true, type: text, searchable: { type: input-text, name: id, label: 主键, placeholder: 输入id } }, { name: browser, label: Browser, searchable: { type: select, name: browser, label: 浏览器, placeholder: 选择浏览器, options: [ { label: Internet Explorer , value: ie }, { label: AOL browser, value: aol }, { label: Firefox, value: firefox } ] } }, { name: platform, label: 平台, popOver: { trigger: hover, body: { type: tpl, tpl: 就是为了演示有个叫 popOver 的功能 } }, sortable: true, type: text }, { name: grade, label: CSS 等级, type: select, options: [ A, B, C, D, X ] }, { type: operation, label: 操作, width: 100, buttons: [ { type: button, actionType: ajax, label: 删除, confirmText: 您确认要删除?, api: delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/$id } ] } ] } }开源地址使用手册点击下方的【IT学习日记】回复【资源】领取如果这篇文章对您有帮助请一定帮我点个“关注”和“点赞”,这对我非常重要。我将会继续推荐更多优质项目和新闻。写在最后1000优质开源项目更新进度269/1000。如需更多类型优质项目推荐请在文章后留言。