低代码平台amis学习二：写一个页面

冰霜

发布于 2023-02-24 11:15:55

2.1K0

发布于 2023-02-24 11:15:55

文章被收录于专栏：冰霜的软件测试技术分享

上一节完成了amis的部署，这次来写一个简单页面

如果看过amis入门文档的话，应该知道amis是通过json文件来生成前端页面的，

在实际编写json文件的过程中，并不需要自己逐行书写json文件（要完全了解书写规范还是挺耗时的）

先介绍几个辅助编写json文件的神器：

官方文档中有很多组件的示例，当需要某些组件时，查找对应示例即可：amis组件（这一点很像element-ui的文档）
官方提供的示例demo：aisuda
官方的可视化拖拽组件平台：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的路径