低代码平台amis学习 二:写一个页面
2023-09-11 14:21:25 时间
上一节完成了amis的部署,这次来写一个简单页面
如果看过amis入门文档的话,应该知道amis是通过json文件来生成前端页面的,在实际编写json文件的过程中,并不需要自己逐行书写json文件(要完全了解书写规范还是挺耗时的)
先介绍几个辅助编写json文件的神器:
1、官方文档中有很多组件的示例,当需要某些组件时,查找对应示例即可:amis组件 (这一点很像element-ui的文档)
2、官方提供的示例demo:aisuda
3、官方的可视化拖拽组件平台:amis-editor
首先在pages目录
中创建一个json文件,如test.json
{
"type": "page",
"title": "创建数据",
"body":
{
"type": "form",
"title": "一个普通的表单",
"api": "/amis/api/mock2/form/saveForm",
"body": [
{
"label": "合同名称",
"type": "input-text",
"size": "md",
"name": "contract_name"
},
{
"label": "合同分类",
"type": "select",
"size": "md",
"name": "contract_classify",
"options": [
{
"label": "分类1",
"value": "1"
},
{
"label": "分类2",
"value": "2"
}
]
},
{
"label": "合同类型",
"type": "select",
"size": "md",
"name": "contract_type",
"options": [
{
"label": "类型1",
"value": "1"
},
{
"label": "类型2",
"value": "2"
}
]
},
{
"label": "合同状态",
"type": "select",
"size": "md",
"name": "contract_status",
"options": [
{
"label": "草稿",
"value": "1"
},
{
"label": "审批中",
"value": "2"
},
{
"label": "审批通过",
"value": "3"
}
]
}
]
}
}
打开site.json
,在里面配置好刚才新建的test.json
的路径
我把曲线部分修改为"/test"
,这样访问首页时会自动重定向我新建的页面;
红框部分表示在「示例」下添加一个子项,把test.json
页面添加到这里,并且通过schemaApi
属性拉取test.json所定义的页面;url
属性表示访问这个页面时的url路径后缀,可自定义
这样就创建好了一个页面,打开浏览器访问页面,效果如下
不过这个页面中的表单目前啥也干不了,点提交按钮也没有效果,因为还没有配置网络请求相关的东西,下一节介绍下如何在amis中发起网络请求并显示响应内容
相关文章
- 机器学习平台架构系列-1-klubeflow
- 【Nginx】Windows10 平台下配置Nginx服务实现负载均衡
- 如何获取大数据平台 CDH 中 hive metastore db 的用户名和密码?
- 【UVM新型IP核验证法】通过GA遗传算法优化UVM测试激励,使得优化的激励注入平台接近达到100%测试覆盖率
- 嵌入式(驱动开发)(平台总线式驱动开发_基础框架_ID匹配和设备树匹配)
- uniapp - 全端兼容 “选项卡瞄点定位“ 功能,点击后滚动到锚点位置并且选项卡自动吸顶,当 “经过“ 锚点时自动定位选项卡(详细运行示例源码,超详细注释稳定可靠!)支持H5、App、小程序全平台
- PHP+新浪微博开放平台+新浪云平台(SAE)开发微博应用——进一步学习的走向和有用的资源
- 互联网企业安全高级指南1.5 生态级企业vs平台级企业安全建设的需求
- 任何人均可上手的数据库与API搭建平台
- 《数据中心设计与运营实战》——2.3 平台级软件
- 【玩转数据系列十二】PAI平台深度学习Caffe框架实现图像分类的模型训练
- 基于PHP+MySQL实现(Web)英语学习与测试平台【100010284】
- 基于Java(Springboot+Gradle+Mybatis+templeaf 框架)+Mysql构建的(Web)校园二手平台系统【100010102】
- 《微信公众平台应用开发实战(第2版)》一第1章 微信公众平台介绍
- 全网首创Python某短视频平台百叶窗短视频卡点自动混剪第1版
- 报名啦!来飞桨中国行,听深度学习平台+大模型如何破局产业智能化
- (数据科学学习手札86)全平台支持的pandas运算加速神器
- 厦门自贸片区大数据平台启用
- 约会平台Tinder推出面向用户推出更多性别选择
- 低代码平台amis学习 三:发送网络请求并回显响应内容
- DLS广告平台:大数据、学习、分享是核心