入门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天前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
32 19
|
2天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
23 13
|
2天前
|
JavaScript 前端开发
【前端web入门第一天】03 综合案例 个人简介与vue简介
该网页采用“从上到下,先整体再局部”的制作思路,逐步分析并编写代码实现个人简介页面。内容涵盖尤雨溪的背景、学习经历及主要成就,同时介绍其开发的Vue.js框架特点。代码结构清晰,注重细节处理,如使用快捷键提高效率,预留超链接位置等,确保最终效果符合预期。
|
2天前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
|
4天前
|
SQL 关系型数据库 数据库
七天.NET 8操作SQLite入门到实战详细教程(选型、开发、发布、部署)
七天.NET 8操作SQLite入门到实战详细教程(选型、开发、发布、部署)
|
4天前
|
开发框架 .NET Java
C#/.NET/.NET Core自学入门指南
C#/.NET/.NET Core自学入门指南
|
11天前
|
数据库 开发者 Java
颠覆传统开发:Hibernate与Spring Boot的集成,让你的开发效率飞跃式提升!
【8月更文挑战第31天】在 Java 开发中,Spring Boot 和 Hibernate 已成为许多开发者的首选技术栈。Spring Boot 简化了配置和部署过程,而 Hibernate 则是一个强大的 ORM 框架,用于管理数据库交互。将两者结合使用,可以极大提升开发效率并构建高性能的现代 Java 应用。本文将通过代码示例展示如何在 Spring Boot 项目中集成 Hibernate,并实现基本的数据库操作,包括添加依赖、配置数据源、创建实体类和仓库接口,以及在服务层和控制器中处理 HTTP 请求。这种组合不仅简化了配置,还提供了一套强大的工具来快速开发现代 Java 应用程序。
24 0
|
11天前
|
Java Spring Maven
Struts 2遇见Spring:这个组合如何颠覆你的Web开发?
【8月更文挑战第31天】在现代Web开发中,Struts 2与Spring的结合使用能显著增强应用的模块化和可维护性。本文将介绍如何整合这两个框架,并提供代码示例。首先,在`pom.xml`中添加Struts 2和Spring的依赖,然后在`struts.xml`中配置Struts 2以识别Spring插件。接着,在Spring配置文件中定义bean,并在Struts 2的Action类中使用`@Autowired`注解进行自动注入。
22 0
|
11天前
|
开发者 iOS开发 C#
Uno Platform 入门超详细指南:从零开始教你打造兼容 Web、Windows、iOS 和 Android 的跨平台应用,轻松掌握 XAML 与 C# 开发技巧,快速上手示例代码助你迈出第一步
【8月更文挑战第31天】Uno Platform 是一个基于 Microsoft .NET 的开源框架,支持使用 C# 和 XAML 构建跨平台应用,适用于 Web(WebAssembly)、Windows、Linux、macOS、iOS 和 Android。它允许开发者共享几乎全部的业务逻辑和 UI 代码,同时保持原生性能。选择 Uno Platform 可以统一开发体验,减少代码重复,降低开发成本。安装时需先配置好 Visual Studio 或 Visual Studio for Mac,并通过 NuGet 或官网下载工具包。
19 0
|
11天前
|
开发者 前端开发 开发框架
JSF与移动应用,开启全新交互体验!让你的Web应用轻松征服移动设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,移动设备的普及使得构建移动友好的应用变得至关重要。尽管JSF(JavaServer Faces)主要用于Web应用开发,但结合Bootstrap等前端框架,也能实现优秀的移动交互体验。本文探讨如何在JSF应用中实现移动友好性,并通过示例代码展示具体实现方法。使用Bootstrap的响应式布局和组件可以确保JSF页面在移动设备上自适应,并提供友好的表单输入和提交体验。尽管JSF存在组件库较小和学习成本较高等局限性,但合理利用其特性仍能显著提升用户体验。通过不断学习和实践,开发者可以更好地掌握JSF应用的移动友好性,为Web应用开发贡献力量。
18 0
下一篇
DDNS