<template>
  <a-row :gutter="[8, 8]" >
    <a-col span="12" >
      <a-card title="数据服务使用的前提" style="height: 400px" >
        具备APPID, 是否有APPID 可以在数据服务-开放接口的右上方查看，不具备则创建APPID
      </a-card>
    </a-col>
    <a-col span="12" >
      <a-card title="数据接口调用流程"  style="height: 400px" >
        <div>1. 按照需求找到要请求的方法地址，一般格式为 /api/{version}/xxx</div>
        <div>2. 查询请求参数，对请求参数进行赋值</div>
        <div>3. 根据方法发起HTTP 请求调用</div>
        <div>4. 验证返回结果是否满足要求</div>
      </a-card>
    </a-col>
    <a-col span="12" >
      <a-card title="签名" style="height: 400px" >
        <div>签名使用的方法是md5。对除了sign 外的所有url参数的值进行签名</div>
        <code-mirror-tsx :body-json="signature"  />
      </a-card>
    </a-col>
    <a-col span="12" >
      <a-card title="数据返回结构" style="height: 400px" >
        <code-mirror-tsx :body-json="response"  />
      </a-card>
    </a-col>
  </a-row>

</template>
<script lang='ts' setup >
import { CodeMirrorTsx } from '@/components/CodeMirror/index'

const response = `
/**
    * code 值为200 代表请求成功，其他状态码为失败，当失败时候，msg 会提示失败原因
    * data 是查询的数据集合
    */
{
    "code":200,
    "msg":"222",
    "data":[],
    "sum":0 
  }`

const signature = `
      原始请求地址：/api/v1/device?page=1&pageSize=20&appId=123
      进行签名 分别对 page,pageSize,appId 的值进行md5
      sign = md5(page+pageSize+appId) // + 代表字符串拼接
      签名后请求地址：/api/v1/device?page=1&pageSize=20&appId=123&sign=xxxxxxxxx`

</script>
<style lang='less' scoped >
</style>
