低代码平台amis学习三：发送网络请求并回显响应内容

2022-08-29 13:30:57 阅读：201 来源： 互联网

标签：... name 回显 type contract 发送 data response amis

在amis表单中发送网络请求需要配置api参数，具体详见：amis-API

配置api请求参数

首先配置一下test.json中api属性

"api": {
          "method": "get",
          "url": "http://localhost:8000/data_factory/create_contract_data",
          "data": {
            "contract_name": "${contract_name}",
            "contract_classify_id": "${contract_classify}",
            "contract_type_id": "${contract_type}",
            "contract_money": "${contract_money}",
            "status": "${contract_status}"
          }
        },

method：表示请求方法，支持：get、post、put、delete、patch

url：请求地址（这里写你要调用接口的完整地址即可）

data：随请求一起发送的数据

注意这里定义参数时使用了官方所说的「数据映射」的方式，它的好处是可以自己定义随请求发送的参数名，而不必和表单定义的字段名保持一致

例如"status": "${contract_status}" ，左侧是定义的一个请求参数，右侧是这个参数的取值，它的值为表单中定义的contract_status字段，加上$,表示获取这个表单字段对应的值

更多用法参考自定义api请求体数据格式，另外amis也允许自定义请求头、请求数据格式等，官方文档中有详细说明

处理跨域问题

配置好请求参数后，点击提交按钮，发现有报错，并未正常返回响应内容

看样子是产生跨域问题了，到github上搜索了一下相关的issue，还真有对应的问题，官方也给出了解决方案，传送门：跨域访问问题

解决方案就是在服务端返回的header中添加必要参数

我的后端服务是使用django写的，所以这些可以在settings.py文件中进行设置（前提已经安装了django-cors-headers包）

在settings.py添加如下代码

CORS_ORIGIN_WHITELIST = (  # 设置更精细的origin
    'http://localhost:8080',
    'http://localhost:3000',
    'http://127.0.0.1:5500',
    "http://localhost:63343"
)
# CORS_ORIGIN_ALLOW_ALL = True  # 允许全部origin

CORS_ALLOW_METHODS = (

     'DELETE',
     'GET',
     'HEAD',
     'OPTIONS',
     'PATCH',
     'POST',
     'PUT',
     'VIEW',
)

CORS_ALLOW_CREDENTIALS = True # 指明在跨域访问中，后端是否支持对cookie的操作

CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)

另一种方式，也可以在每个请求的response中添加header (注意：响应信息需要转化为json格式)

    ... ...
    ... ...
    response = JsonResponse(data, json_dumps_params={'ensure_ascii': False})
    # amis需要返回这种请求头，设置响应请求头
    response["Access-Control-Allow-Origin"] = "http://localhost:8080"  # 如果使用node server服务启动，这里ip要填写node服务地址，如果单纯打开index.html，则需要配置本机ip
    response["Access-Control-Allow-Methods"] = "GET,POST,PUT,DELETE,OPTIONS,HEAD"
    response["Access-Control-Expose-Headers"] = "Cache-Control,Content-Language,Content-Length,Content-Type,Expires,Last-Modified,Pragma"
    response["Access-Control-Allow-Credentials"] = "true"
    return response
    ... ...
    ... ...

再次点击提交按钮，请求就能正常发送了

在页面中显示响应内容

我打算把接口返回的全部响应内容都显示在页面中，在github中找到了对应的issue：表单提交以后，如何把返回信息呈现在页面固定区域

这里需要配置接收适配器，在api组件中添加adaptor

        "api": {
          "method": "get",
          "url": "http://localhost:8000/data_factory/create_contract_data",
          "data": {
            "contract_name": "${contract_name}",
            "contract_classify_id": "${contract_classify}",
            "contract_type_id": "${contract_type}"
          },
            
          "adaptor": "return {\n    ...payload,\n    data: {\n        ...payload.data,\n        response: response.data\n    }\n}"
        },

response.data就是接口返回的数据，把它赋给一个变量 response，然后通过adaptor返回出去

然后需要把数据显示到前端

第一种方式，使用static静态展示

          {
            "type": "static",
            "label": "返回数据",
            "name": "${response|json}"
          }

"name": "${response|json}" 把结果以json格式输出（数据映射）

这种方式可读性不好，所以另一种方式是 json格式展示

          {
            "type": "control",
            "name": "response",
            "label": "接口返回数据",
            "body": {
              "type": "json",
              "levelExpand": 100
            }
          }

levelExpand，表示展开层级

"name": "response"，把adaptor中返回的response直接赋给name

第三种方式是可以把接口返回结果直接传给另一个组件：将提交返回内容发送到其它组件

首先在第一个form表单中添加reload参数

"reload": "resultForm?response=${response}",

resultForm 是另一个表单的名称

左侧response是随reload发送的参数，右侧${response}是获取adaptor中的响应内容

另一个表单的配置如下

      {
        "type": "form",
        "name": "resultForm",
        "title": "返回结果",
        "actions": [],
        "body": [
          {
            "type": "control",
            "name": "response",
            "body": {
              "type": "json",
              "levelExpand": 100
            }
          }
        ]
      }

最终结果

标签：...,name,回显,type,contract,发送,data,response,amis
来源： https://www.cnblogs.com/hanmk/p/16632705.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

低代码平台amis学习 三：发送网络请求并回显响应内容

配置api请求参数

处理跨域问题

在页面中显示响应内容

低代码平台amis学习三：发送网络请求并回显响应内容