前言

良好的文档规范,对于前后端的沟通是很有必要的,减少没必要的误解和争执,前端也可以根据文档的格式先制定出页面的流程和提前mock数据开发

目标

前置条件

zircote/swagger-php document

正式内容

1. 基础了解定义文档的语法

  • 文档描述

@OA\Info(title=“Fapi”, version=“0.1”,description=“antdv5的接口前缀为/api/v2
当前版本为/api/
返回列表的格式有区别外其他一致”),

  • 文档中的api路径

@OA\Server(url=“http://www.github.com/",description="github",),

  • 预先定义好返回数据的格式

@OA\Schema(
schema=“Pagination”,
@OA\Property(property=“current”, type=“integer”),
@OA\Property(property=“total”, type=“integer”),
@OA\Property(property=“pageSize”, type=“integer”),
)

  • 分组每种接口的类别,如/user, /order /record 等,

@OA\Tag(name=“api-tag”, description=“Tag”)

  • 编写接口的声明

      @OA\Post(
          path="/api/index",
          summary="api name",
          operationId="UniqueOperationId",
          tags={"api-tag"},
          @OA\Parameter(in="query", name="fIDDomainFolder", required=false,schema={"type":"string"},description=""),
          @OA\Parameter(in="query", name="intActive", required=false,schema={"type":"integer"},description=""),
          @OA\Parameter(in="query", name="timetype", required=false,schema={"type":"string","enum":{"created_at","expired_at","update_at"}},description="时间类型"),
          @OA\Response(
           response="200",
           description="An example resource",
           @OA\JsonContent(
            @OA\Property(property="Pagination",type="object", ref="#/components/schemas/Pagination"),
          )
      ),
      )

2. 将定义好的注释声明生成openapi.json


$openapi = \OpenApi\Generator::scan([
    path . 'api',
    path . 'model',
]);
$openapi->toJson()

3. 生成好的json文件,在页面中引入后就可以提供给前端查看


<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Swagger UI</title>
    <link rel="stylesheet" type="text/css" href="./swagger-ui.css" />
    <link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
    <style>
      html
      {
        box-sizing: border-box;
        overflow: -moz-scrollbars-vertical;
        overflow-y: scroll;
      }

      *,
      *:before,
      *:after
      {
        box-sizing: inherit;
      }

      body
      {
        margin:0;
        background: #fafafa;
      }
    </style>
  </head>

  <body>
    <div id="swagger-ui"></div>

    <script src="./swagger-ui-bundle.js" charset="UTF-8"> </script>
    <script src="./swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
    <script>
    window.onload = function() {
      // Begin Swagger UI call region
      const ui = SwaggerUIBundle({
      urls: [
          {url: "swagger.json", name: 'main'},
          {url: "https://petstore.swagger.io/v2/swagger.json", name: 'example'},
      ],
        dom_id: '#swagger-ui',
        deepLinking: true,
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
        layout: "StandaloneLayout"
      });
      // End Swagger UI call region

      window.ui = ui;
    };
  </script>
  </body>
</html>