在Vue项目中利用swagger配置自动生成访问后台WebApi代码的功能

最近在做Vue的前端项目，需要配置自动生成访问WebApi的代码，网上并没有找到相关教程，把我最终找到的解决方案放在这里帮助有需要的人。

WebApi后台配置

1. WebApi后台需要安装NuGet包Swashbuckle.AspNetCore。
2. 在Startup.cs文件中配置swagger：
   将如下代码添加到ConfigureServices方法中

services.AddSwaggerGen(c =>
            {
                c.SwaggerDoc("v1", new Info { Title = "My API", Version = "v1" });
            });

将如下代码添加到Configure方法中

			// Enable middleware to serve generated Swagger as a JSON endpoint.
            app.UseSwagger();

            // Enable middleware to serve swagger-ui (HTML, JS, CSS, etc.), 
            // specifying the Swagger JSON endpoint.
            app.UseSwaggerUI(c =>
            {
                c.SwaggerEndpoint("/swagger/v1/swagger.json", "My API V1");
                c.RoutePrefix = string.Empty;
            });

c.SwaggerEndpoint("/swagger/v1/swagger.json", “My API V1”);的作用是配置swagger.json文件的地址及swagger的版本，c.RoutePrefix = string.Empty;的作用是配置swagger页面的路由地址，等于string.Empty则表示主路由。

至此后台端的swagger已配置完成，运行项目结果如下所示：

swagger.json

Vue前端配置

首先打开终端输入以下命令安装swagger包：

npm install nswag

打开package.json文件，在"scripts"中添加代码：

"generate-client": "node_modules/.bin/nswag swagger2tsclient /input:%npm_package_devConfig_genClient_input% /output:%npm_package_devConfig_genClient_output%"

在package.json中添加代码：

"devConfig": {
    "genClient": {
      "input": "https://localhost:44333/swagger/v1/swagger.json",
      "output": "src/api-client/client.ts"
    }
  },

• input的作用是配置后台swagger.json文件的地址，swagger.json是前端swagger进行自动生成代码的输入值，前端依据swagger.json对WebApi的描述来生成相应的访问代码；
• output配置自动生成的代码的存放路径。

最终配置结果如下所示

在终端中运行以下命令：

npm run generate-client

generate-client就是上文package.json的script中新增的键。

命令执行后可以看到在src/api-client路径中生成了client.ts文件，client.ts就是访问WebApi的代码，其中包括WebApi端定义的Model代码。可以根据自己需要对自动生成的代码进行修改。