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
 }
 ]
 }
}