在Vue项目中利用swagger配置自动生成访问后台WebApi代码的功能
最近在做Vue的前端项目,需要配置自动生成访问WebApi的代码,网上并没有找到相关教程,把我最终找到的解决方案放在这里帮助有需要的人。
WebApi后台配置
- WebApi后台需要安装NuGet包Swashbuckle.AspNetCore。
- 在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代码。可以根据自己需要对自动生成的代码进行修改。