入门Vue+.NET 8 Web Api记录(一)

简介: 入门Vue+.NET 8 Web Api记录(一)

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

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

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

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

Vue:

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

开始使用.NET 8 Web Api

选择Web Api模板:

其他信息:

这里有几点可以注意:

配置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:

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

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

安装SemanticKernel:

在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给我们回复。

现在项目结构如下所示:

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

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

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

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

[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:

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

我们刚刚写的

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

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

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

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

即可。

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

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

合集: C# , ASP.NET Core Web Api

相关文章
|
2月前
|
JSON 安全 API
电商API入门问答:开发者必知的10个基础问题
本文详解电商API的10个基础知识,涵盖定义、用途、认证、安全等内容,帮助开发者快速入门并提升开发效率。
101 0
|
2月前
|
缓存 监控 安全
电商API集成入门:从零开始搭建高效接口
在数字化电商时代,API集成成为企业提升效率、实现系统互联的关键。本文从零开始,逐步讲解如何搭建高效、可靠的电商API接口,适合初学者学习。内容涵盖API基础、认证安全、请求处理、性能优化等核心步骤,并提供Python代码示例与数学公式辅助理解。通过实践,读者可掌握构建优质电商API的技巧,提升用户体验与系统性能。
123 0
|
5月前
|
JSON 算法 API
一文掌握 1688 商品详情 API 接口:从入门到实战
1688是国内领先的综合电商批发平台,提供海量商品资源。其商品详情API助力开发者与企业获取商品的详细信息(如属性、价格、库存等),广泛应用于电商数据分析、比价系统及采购场景。API支持GET/POST请求,需传入通用参数(app_key、timestamp等)与业务参数(如product_id)。返回JSON格式数据,包含商品标题、价格、图片链接等详情,提升业务效率与决策精准度。
|
4月前
|
JSON API 开发工具
电商API接口入门指南
本文介绍了API的基础知识及其在电商领域的实际应用。首先,阐释了API的概念、运作机制及参数与返回值的作用,帮助读者理解如何通过API实现软件间的交互。接着,以获取电商商品列表为例,详细讲解了从选择平台、引入SDK到编写代码调用API的全流程。示例代码采用Python语言,利用requests库发送请求并解析JSON数据,为开发者提供了清晰的实践指导。
|
5月前
|
搜索推荐 API 开发者
京东商品列表 API 接口全解析:从入门到精通
京东商品列表API是京东开放平台为开发者提供的核心数据接口,支持批量获取商品基础信息、价格、库存状态等多维度数据。它具备数据丰富性、灵活筛选与分页查询、稳定高效等特点,可满足市场分析、选品优化、比价工具及推荐系统开发等需求,为电商业务创新提供坚实支撑。通过标准化通道,助力第三方高效、合法地利用京东海量商品数据。
|
3月前
|
JSON 编解码 API
Go语言网络编程:使用 net/http 构建 RESTful API
本章介绍如何使用 Go 语言的 `net/http` 标准库构建 RESTful API。内容涵盖 RESTful API 的基本概念及规范,包括 GET、POST、PUT 和 DELETE 方法的实现。通过定义用户数据结构和模拟数据库,逐步实现获取用户列表、创建用户、更新用户、删除用户的 HTTP 路由处理函数。同时提供辅助函数用于路径参数解析,并展示如何设置路由器启动服务。最后通过 curl 或 Postman 测试接口功能。章节总结了路由分发、JSON 编解码、方法区分、并发安全管理和路径参数解析等关键点,为更复杂需求推荐第三方框架如 Gin、Echo 和 Chi。
|
3月前
|
自然语言处理 算法 API
阿里云增值税发票识别NET Rest API调用示例
本文介绍了使用NET代码调用阿里云增值税发票识别API的实现方式。通过示例代码,详细展示了如何构造请求、设置签名以及发送HTTP请求的具体步骤。代码中涵盖了请求参数的处理、签名生成逻辑(如HMAC-SHA256算法)以及调用API后的结果处理。此外,还提供了运行结果的截图和参考文档链接,帮助开发者更好地理解和应用该接口。
212 4
|
4月前
|
数据挖掘 API 开发者
京东商品详情 API 接口全攻略:从入门到精通
京东商品详情API接口是京东开放平台为开发者提供的服务,用于获取商品详细信息。通过调用接口,开发者可获得商品属性、价格、库存、促销信息等数据,适用于电商应用、价格比较工具及数据分析平台等场景。支持GET/POST请求方式,参数包括API版本、密钥等。示例代码展示了如何使用Python的requests库调用该接口,并获取JSON格式的返回数据,包含商品基本信息、价格、库存和用户评价等内容。
214 16
|
5月前
|
中间件 Go
Golang | Gin:net/http与Gin启动web服务的简单比较
总的来说,`net/http`和 `Gin`都是优秀的库,它们各有优缺点。你应该根据你的需求和经验来选择最适合你的工具。希望这个比较可以帮助你做出决策。
210 35
|
9月前
|
开发框架 前端开发 JavaScript
ASP.NET Web Pages - 教程
ASP.NET Web Pages 是一种用于创建动态网页的开发模式,采用HTML、CSS、JavaScript 和服务器脚本。本教程聚焦于Web Pages,介绍如何使用Razor语法结合服务器端代码与前端技术,以及利用WebMatrix工具进行开发。适合初学者入门ASP.NET。