- 💂 个人网站: 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 name="username" 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。如需更多类型优质项目推荐，请在文章后留言。
