AMIS

一种页面渲染器，能够直接基于特定格式的JSON配置将页面渲染出来，结合业务方API可快速完成各种管理页面的开发。前端

目前用于百度内部AMIS平台，已有100+部门接入使用，建立1.2w +页面，欢迎你们使用和提建议。java

经过amis搭建本身的后台系统，能够参考这：https：//github.com/fex-team/amis-admingit

AMIS是作啥的

彻底基于 JSON 的 mis 工具,，不须要前端就能够本身搭建信息管理系统，好比监控啊管理啊之类的，这是能让前端失业的一个框架。程序员

这个截图全部的元素, 都由json控制, 不须要任何前端代码，十足的后端福利。
github

AMIS学习曲线高么

我的感受，多看看文档的示例，通常需求增删改查什么的都没啥问题。（首页就能找到【使用文档】）web

大概看下基本用法中的例子：面试

为了简化前端开发，amis Renderer 可以直接用配置就能将页面渲染出来。
json

先来看个简单的例子。后端

{
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
"type": "page",
"title": "这是标题部分",
"subTitle": "这是子标题",
"remark": "这是小提示信息",
"aside": "这是侧边栏部分",
"body": "这是内容区",
"toolbar": "这是工具栏部分"
}

PS: 能够经过编辑器实时修改预览

从上面的内容能够看出，一个简单页面框架已经基本出来了，这是 amis 渲染器配置的入口。从 page 渲染器开始出发，经过在容器中放置不一样的渲染器来配置不一样性质的页面。

简单说明以上配置信息。

$schema 这个字段能够忽略，他是指定当前 JSON 配置是符合指定路径 https://houtai.baidu.com/v2/schemas/page.json 的 JSON SCHEMA 文件描述的。PS: 编辑器就是靠这个描述文件提示的，能够 hover 到字段上看效果。
type 指定渲染器类型，这里指定的类型为 page。更多渲染器类型能够去这里面查看。
title 从 title 开始就是对应的渲染模型上的属性了。这里用来指定标题内容。
subTitle 副标题.
remark 标题上面的提示信息
aside 边栏区域内容
body 内容区域的内容
toolbar 工具栏部分的内容

这里有三个配置都是容器类型的。aside、body 和 toolbar。

什么是容器类型？

容器类型表示，他可以把其余渲染类型放进来。以上的例子为了简单，直接放了个字符串。

字符串类型内部是把他当成了 tpl 渲染器来处理，在这里也能够经过对象的形式指定，如如下的例子的 body 区域是彻底等价的。


{
 "$schema": "https://houtai.baidu.com/v2/schemas/page.json",
 "type": "page",
 "body": {
 "type": "tpl",
 "tpl": "这是内容区"
 }
}

容器内能够直接放一个渲染器，也能够放多个，用数组包起来便可如：


{
 "$schema": "https://houtai.baidu.com/v2/schemas/page.json",
 "type": "page",
 "body": [
 {
 "type": "tpl",
 "tpl": "<p>段落1</p>"
 },

 {
 "type": "tpl",
 "tpl": "<p>段落2</p>"
 },

 "<p>段落3</p>"
 ]
}

再来看一个表单页面的列子


{
 "$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
 "type": "page",
 "body": {
 "api": "/api/mock2/form/saveForm",
 "type": "form",
 "title": "联系咱们",
 "controls": [
 {
 "type": "text",
 "label": "姓名",
 "name": "name"
 },

 {
 "type": "email",
 "label": "邮箱",
 "name": "email",
 "required": true
 },

 {
 "type": "textarea",
 "label": "内容",
 "name": "content",
 "required": true
 }
 ],
 "actions": [
 {
 "label": "发送",
 "type": "submit",
 "primary": true
 }
 ]
 }
}