解决问题:amis解决了从将json内容解释为html页面的问题,通过json文件可以生成前端增删改查的简洁页面。从amis文档页面入门示例可以找到hello world 示例,但json内容内置在html页面中,本文拟外置json文件,实现动态加载json页面。
材料:
开始:
amis demo html, body, .app-wrapper { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }
完成之后,使用live server打开html就能看到示例页面了。
2.修改上述html内容,加入引用axios并将上述amisJSON内容外置到单独的json文件中,其中修改后的html内容如下:
amis demo html, body, .app-wrapper { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }
3.将上面amisJSON中的内容按json重写,建议使用amis在线编辑器生成json,另存为hello.json。以下内容由amis在线编辑器生成:
{ “type”: “page”, “body”: [ { “type”: “form”, “body”: [ { “type”: “input-text”, “label”: “Name”, “name”: “name” }, { “type”: “input-text”, “label”: “Email”, “name”: “email” } ], “id”: “u:7320b53cd05d”, “mode”: “horizontal”, “api”: “/saveForm” } ], “messages”: {}, “style”: {}, “title”: “表单页面”, “regions”: [ “body” ]}
和html页面放在同一目录下,开启Live Server模式,浏览即可。
4.后续有至少有2种用法。其一使用amis在线编辑器可视化生成页面,保存为json之后,可由html动态加载。其二是使用后台程序自动生成json页面和数据。
总结:使用amis可简化前端页面的编码成本,对于简单应用会有很大的帮助。
后续:关注amis的多页面应用,学习官方amis-admin。