8、vs2022_添加ASP.NET Web API項目並配置

 一、添加ASP.NET Core Web API項目

1、右鍵解決方案，依次選擇：添加、新建項目
2、語言：C#，項目類型：Web或WebAPI，模版：ASP.NET Core Web API，命名WebApi_DEMO

3、選擇目標框架

 ps：配置HTTPS默認是勾選的，也可取消

4、創建后，將WebApi_DEMO設為默認啟動項，添加對CommonLib的引用

5、直接F5運行，如果是新系統首次運行會提示安裝證書

6、運行界面如下

 7、依次點擊：GET、Try it out、Execute，顯示明細信息，API項目創建完成

 

 二、配置跨域，為前端提供服務

1、在Program.cs文件中配置跨域，紅色代碼部分

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
//配置Swagger
builder.Services.AddSwaggerGen();
//配置跨域策略
builder.Services.AddCors(options =>{
    options.AddPolicy("CorsPolicy", policy =>
    {
        policy.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod();
    });
});
var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseAuthorization();
//使用跨域策略
app.UseCors("CorsPolicy");
app.MapControllers();

app.Run();

 2、測試跨域，前端使用VUE

<template>
  <button type="button" @click="getWeather">天氣預報</button>
</template>

<script setup>
// 安裝axios，npm install axios
import axios from "axios";
const getWeather = async () => {
  console.log("顯示天氣預報......");
  const res = await axios.get("http://127.0.0.1:8888/WeatherForecast");
  console.log(res.data);
};
</script>

3、前端成功獲取數據

 

 三、Swagger配置

1、【解決方法資源管理器】--【右擊項目名稱】-【屬性】-【生成】-【輸出】

選中文檔文件-生成包含API文檔的文件，

默認地址為bin\Debug\net6.0\xxx.xml，也可以自定義地址，在指定地址新建個空的xml文件即可。

 

 2、在Program.cs文件中配置Swagger，修改AddSwaggerGen代碼

//修改前
builder.Services.AddSwaggerGen();

//配置Swagger后
builder.Services.AddSwaggerGen(options => {
    #region 設置API文檔信息
    var ApiName = "NetCore項目框架";
    options.SwaggerDoc("v1", new OpenApiInfo
    {
        Version = "v1",
        Title = $"{ApiName} 接口文檔——Net 6",
        Description = $"{ApiName} HTTP API v1",
    });
    options.OrderActionsBy(o => o.RelativePath);
    #endregion
    #region 設置接口注釋
    //using System.Reflection;
    //獲取xml注釋文件目錄
    var xmlFilename = $"{Assembly.GetExecutingAssembly().GetName().Name}.xml";
    var xmlPath = Path.Combine(AppContext.BaseDirectory, xmlFilename);
    //默認的第二個參數是false，這個是controller的注釋，true時會顯示注釋，否則只顯示方法注釋
    options.IncludeXmlComments(xmlPath, true);
    var xmlModelname = "Medel.xml";//Model層的xml文件名
    var xmlModelPath = Path.Combine(AppContext.BaseDirectory, xmlModelname);
    #endregion
    #region 設置token
    //using Microsoft.OpenApi.Models;
    options.AddSecurityDefinition("Bearer", new OpenApiSecurityScheme(){
        Description = "在下框中輸入請求頭中需要添加Jwt授權Token：Bearer {token}（注意兩者之間是一個空格）",
        Name = "Authorization",        //jwt默認的參數名稱
        In = ParameterLocation.Header, //jwt默認存放Authorization信息的位置(請求頭中)
        Type = SecuritySchemeType.ApiKey,
        BearerFormat = "JWT",
        Scheme = "Bearer"
    });
    options.AddSecurityRequirement(new OpenApiSecurityRequirement{
        {
            new OpenApiSecurityScheme{
                Reference = new OpenApiReference {
                    Type = ReferenceType.SecurityScheme,
                    Id = "Bearer"
                }
            },
            new string[] { }
        }
    });
    #endregion
});

3、在WeatherForecast控制器的Get()方法上，添加注釋：天氣預報

 

4、F5運行