入门Vue+.NET 8 Web Api记录（一）

做自己感觉有意思的或者能解决自己需求的项目作为入门，我觉得是有帮助的，不会觉得那么无聊。

一个最简单的前后端分离项目应该是怎么样的？

我觉得就是前端有个按钮，点击向后端发送一个get请求，获取到数据后，将数据显示在前端上。

结合最近感兴趣的SemanticKernel，有了做这样的Demo学习的想法，用户点击按钮，返回一句夸人的话。

Vue：

前后端分离的一个很明显的好处就是，你可以使用多个前端使用同一个后端服务，比如我也用Avalona做了一个这样的客户端应用，也可以共用这个后端服务，如下所示：

开始使用.NET 8 Web Api

选择Web Api模板：

image-20240725092622106

其他信息：

image-20240725093117690

这里有几点可以注意：

配置https是什么意思？

配置HTTPS是指在网络服务器上设置和启用安全超文本传输协议（HTTPS）。HTTPS是HTTP的安全版本，它在HTTP协议的基础上添加了SSL/TLS加密层，以确保数据在客户端和服务器之间的传输过程中是加密的，从而保护数据的机密性和完整性。

启用OpenAPI支持是什么意思？

OpenAPI（以前称为Swagger规范）是一种用于描述、生成、消费和可视化RESTful Web服务的规范。它允许开发者定义API的各个方面，包括路径、操作、请求参数、响应和认证方法。通过使用OpenAPI规范，开发者可以更容易地创建、维护和使用API文档，从而提高开发效率和API的可理解性。

启用OpenAPI支持是指在软件项目中集成和配置OpenAPI规范，以便能够生成、使用和展示符合OpenAPI标准的API文档。这意味着项目将能够利用OpenAPI的各种工具和生态系统来简化API的设计、开发、文档编写和测试过程。

不使用顶级语句是什么意思？

在C#中，"不使用顶级语句"（Not using top-level statements）是指在编写代码时不采用C# 9.0引入的顶级语句特性。

使用控制器是什么意思？

控制器是MVC（Model-View-Controller）中的Controller，在Web API开发中，"使用控制器"（Using Controllers）是指采用一种设计模式，其中API的逻辑被组织到称为"控制器"的类中。控制器负责处理HTTP请求、执行相应的业务逻辑，并返回HTTP响应。

为了维护方便与规范化，自己再加上一层Model、一层Services：

image-20240725130842155

现在想一下自己想添加什么服务，想法是使用SemanticKernel接入大语言模型，当我们请求的时候让它返回一句夸人的话。

SemanticKernel现在就知道它是为了让LLM快速集成进我们的应用的就行了。

安装SemanticKernel：

image-20240725131101780

在Services中添加SemanticKernelService：

 public class SemanticKernelService
 {
     private readonly Kernel _kernel;
     public SemanticKernelService()
     {
         var handler = new OpenAIHttpClientHandler();
         var builder = Kernel.CreateBuilder()
        .AddOpenAIChatCompletion(
           modelId: "Qwen/Qwen2-7B-Instruct",
           apiKey: "你的apikey",
           httpClient: new HttpClient(handler));
         _kernel = builder.Build();
     }

     public async Task<string> Praiseyuzai()
     {
         var skPrompt = """                           
                       你是一个夸人的专家，回复一句话夸人。                         
                       你的回复应该是一句话，不要太长，也不要太短。                               
                       """;
         var result = await _kernel.InvokePromptAsync(skPrompt);
         var str = result.ToString();
         return str;
     }

 }

可能很多人看SemanticKernel的介绍会觉得只能用OpenAI的模型，其实只要兼容了OpenAI格式的在线模型都可以的，本地大模型的话也是可以通过实现接口实现接入的，本文选择的平台是硅基流动下的Qwen/Qwen2-7B-Instruct模型，免费使用。

由于不是OpenAI需要将请求转发到硅基流动提供的Api上，需要在模型中添加OpenAIHttpClientHandler类如下所示：

 public class OpenAIHttpClientHandler : HttpClientHandler
 {
     protected override async Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
     {
         UriBuilder uriBuilder;
         switch (request.RequestUri?.LocalPath)
         {
             case "/v1/chat/completions":
                 uriBuilder = new UriBuilder(request.RequestUri)
                 {
                     // 这里是你要修改的 URL
                     Scheme = "https",
                     Host = "api.siliconflow.cn",
                     Path = "v1/chat/completions",
                 };
                 request.RequestUri = uriBuilder.Uri;
                 break;
         }

         HttpResponseMessage response = await base.SendAsync(request, cancellationToken);

         return response;
     }

我们与大语言模型聊天，就是在提供一个Prompt，这里我们的Prompt如下：

  var skPrompt = """                           
                       你是一个夸人的专家，回复一句话夸人。                         
                       你的回复应该是一句话，不要太长，也不要太短。                               
                       """;

大语言模型会根据这个Prompt给我们回复。

现在项目结构如下所示：

image-20240725131839064

现在将构造的这个服务，添加到依赖注入容器中：

image-20240725131923106

更规范的做法应该是传入一个接口和一个实现类，本次入门直接传入实现类即可。

现在来看看控制器怎么写？

先看看模板自带的一个控制器：

 [ApiController]
 [Route("[controller]")]
 public class WeatherForecastController : ControllerBase
 {
     private static readonly string[] Summaries = new[]
     {
         "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
     };

     private readonly ILogger<WeatherForecastController> _logger;

     public WeatherForecastController(ILogger<WeatherForecastController> logger)
     {
         _logger = logger;
     }

     [HttpGet(Name = "GetWeatherForecast")]
     public IEnumerable<WeatherForecast> Get()
     {
         return Enumerable.Range(1, 5).Select(index => new WeatherForecast
         {
             Date = DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
             TemperatureC = Random.Shared.Next(-20, 55),
             Summary = Summaries[Random.Shared.Next(Summaries.Length)]
         })
         .ToArray();
     }
 }

模仿它的样子写一个控制器：

[ApiController]
[Route("[controller]")]
public class SemantickernelController : ControllerBase
{
    private readonly ILogger<SemantickernelController> _logger;
    private readonly SemanticKernelService _semanticKernelService;
    
    public SemantickernelController(ILogger<SemantickernelController> logger,SemanticKernelService semanticKernelService)
    {
        _logger = logger;
        _semanticKernelService = semanticKernelService;
    }

    [HttpGet]
    public async Task<string> Get()
    {
        _logger.LogInformation($"执行Praise请求 时间：{DateTime.Now}");
        var str = await _semanticKernelService.Praise();
        return str;
    }
 
}

在构造函数中注入了我们刚刚注册的服务类。

[HttpGet]
public async Task<string> Get()
{
   _logger.LogInformation($"执行Praise请求 时间：{DateTime.Now}");
   var str = await _semanticKernelService.Praise();
   return str;
}

这个的写法其实也不规范，后面可以使用ActionResult<T>替代，现在先不用管，能用就行。

现在启动项目，会跳出Swagger UI：

image-20240725132604898

可以在上面调试写的接口，试试刚刚创建的Get请求：

image-20240725132824604

我们刚刚写的

 _logger.LogInformation($"执行Praise请求 时间：{DateTime.Now}");

在调用接口的时候，就可以看到信息输出在控制台上了，如下所示：

image-20240725133048007

到时候为了让我们能够通过局域网访问，在Program中添加：

image-20240725133156224

到时候前端访问还需要解决一下跨域的问题，在Program中添加：

image-20240725133235285

即可。

到这里为止，我们就已经使用.NET 8 Web Api构建了一个简单的只有一个Get请求的后端服务了。

下期分享Vue与Avalonia中的部分。

posted @ 2024-07-25 13:58  mingupupup  阅读(850)  评论(0)  编辑  收藏  举报