四、使用 Web api 扩展您的应用

如果你用过 ASP。 asp.net Web API 的早期版本.NET,您可能还记得 Web API 控制器通常继承自APIController。 这在 ASP 中已经改变.NET Core,作为 MVC 和 Web API 统一的一部分。 因此,每个 Web API 控制器都继承自Controller类,它也是每个 MVC 控制器的基类。

在本章中,我们将完成一个 Web API 项目的工作示例。 在本章中,我们将涵盖以下内容:

  • Web api
  • Web API 配置
  • Web API 的路线
  • 使用 Web API 应用

了解 Web API

构建 web 应用可能是一种有益的体验。 接触到广泛的潜在用户所带来的满足感可以胜过花在微调应用和修复 bug 上的令人沮丧的夜晚。 但有些手机用户要求只有原生手机应用才能提供更流畅的体验。

移动浏览器在低带宽的情况下可能会遇到性能问题,在这种情况下,HTML5 应用只能在服务器端后台很重的情况下发挥作用。 Web API 及其 RESTful 端点是用对移动友好的服务器端代码构建的。

Web api 的例子

为了创建一个软件,多年的智慧告诉我们,我们在构建软件时应该考虑用户。 如果没有用例,它的特性实际上毫无用处。 通过围绕用户故事设计特性,揭示与用户操作直接相关的公共端点是有意义的。 因此,您最终将得到一个为更多用户工作的更精简的 web 应用。

如果你需要更多的说服力,这里是一个 Web API 的特性和好处的概述:

  • 它允许您构建现代的轻量级 web 服务,只要您不需要 SOAP,这对您的应用来说是一个很好的选择
  • 使用它比以往任何使用 ASP 完成的工作都要容易.NETWindows Communication Foundation(WCF)服务
  • 它支持 RESTful 端点
  • 它适用于各种客户端,包括移动端和网络端
  • 与 ASP 统一.NET MVC,可以包含/不包含您的 web 应用

从零开始创建新的 Web API 项目

让我们构建一个名为Patient Records的示例 web 应用。 在这个应用中,我们将从头创建一个 Web API 来允许以下任务:

  • 增加一个新病人
  • 编辑现有患者
  • 删除现有患者
  • 查看特定患者或患者列表

这四个操作构成了我们系统中所谓的 CRUD 操作:创建、读取、更新或删除患者记录。

按照下面的步骤,我们将在 Visual Studio 2015 中创建一个新项目:

  1. 创建一个新的 Web API 项目。
  2. 添加 API 控制器。
  3. 为 CRUD 操作添加方法。

前面的步骤已经扩展为详细的说明,如下截图:

  1. In Visual Studio 2015, click File | New | Project. You can also press Ctrl + Shift + N on your keyboard.

    Creating a new Web API project from scratch

  2. On the left panel, locate the Web node below Visual C#, then select ASP.NET Core Web Application (.NET Core), as shown in the following screenshot:

    Creating a new Web API project from scratch

  3. With this project template selected, type in a name for your project, for example PatientRecordsApi, and choose a location on your computer, as shown in the following screenshot:

    Creating a new Web API project from scratch

  4. 您还可以选择右下角的复选框为您的解决方案文件创建一个目录,并/或将您的新项目添加到源代码控制中。 点击OK继续。

  5. In the dialog that follows, select Empty from the list of the ASP.NET Core Templates, then click OK, as shown in the following screenshot:

    Creating a new Web API project from scratch

  6. 或者,您可以选中Microsoft Azure的复选框,将您的项目托管在云中。 点击确定继续。

构建您的 Web API 项目

在解决方案资源管理器中,您可能会看到正在恢复您的引用。 这发生在每次你创建一个新项目或添加新的引用到你的项目必须通过NuGet恢复,如下截图所示:

Building your Web API project

遵循以下步骤,修复您的引用,并构建您的 Web API 项目:

  1. Right click on your project, and click Add | New Folder to add a new folder, as shown in the following screenshot:

    Building your Web API project

  2. Perform the preceding step three times to create new folders for your Controllers, Models, and Views, as shown in the following screenshot:

    Building your Web API project

  3. Right click on your Controllers folder, then click Add | New Item to create a new API controller for patient records on your system, as shown in the following screenshot:

    Building your Web API project

  4. In the dialog box that appears, choose Web API Controller Class from the list of options under .NET Core, as shown in the following screenshot:

    Building your Web API project

  5. 命名您的新 API 控制器,例如PatientController.cs,然后单击添加继续。

  6. In your new PatientController, you will most likely have several areas highlighted with red squiggly lines due to a lack of necessary dependencies, as shown in the following screenshot. As a result, you won't be able to build your project/solution at this time:

    Building your Web API project

在下一节中,我们将学习如何配置您的 Web API,以便它在配置文件中具有适当的引用和依赖项。

在 Web 应用中配置 Web API

当一个特定的 URL 被请求时,web 服务器如何知道向浏览器发送什么? 答案在于您的 Web API 项目的配置。

设置依赖项

在本节中,我们将学习如何使用 IDE 自动设置依赖项,或者通过编辑项目的配置文件手动设置依赖项:

  1. To pull in the necessary dependencies, you may right-click on the using statement for Microsoft.AspNet.Mvc and select Quick Actions and Refactorings.... This can also be triggered by pressing Ctrl + . (period) on your keyboard or simply by hovering over the underlined term, as shown in the following screenshot:

    Setting up dependencies

  2. Visual Studio should offer you several possible options, from which you can select the one that adds the package Microsoft.AspNetCore.Mvc.Core for the namespace Microsoft.AspNetCore.Mvc. For the Controller class, add a reference for the Microsoft.AspNetCore.Mvc.ViewFeatures package, as shown in the following screenshot:

    Setting up dependencies

    添加 Microsoft.AspNetCore.Mvc.Core 1.0.0 包

  3. If you select the latest version that's available, this should update your references and remove the red squiggly lines, as shown in the following screenshot:

    Setting up dependencies

    更新您的参考资料,并删除红色的波浪线

  4. The preceding step should automatically update your project.json file with the correct dependencies for the Microsoft.AspNetCore.Mvc.Core, and Microsoft.AspNetCore.Mvc.ViewFeatures, as shown in the following screenshot:

    Setting up dependencies

  5. The "frameworks" section of the project.json file identifies the type and version of the .NET Framework that your web app is using, for example netcoreapp1.0 for the 1.0 version of .NET Core. You will see something similar in your project, as shown in the following screenshot:

    Setting up dependencies

  6. Click the Build Solution button from the top menu/toolbar. Depending on how you have your shortcuts set up, you may press Ctrl + Shift + B or press F6 on your keyboard to build the solution. You should now be able to build your project/solution without errors, as shown in the following screenshot:

    Setting up dependencies

在运行 Web API 项目之前,打开Startup.cs类文件,用Configure()方法中的app.UseMvc()调用替换app.Run()语句/块(及其内容)。 要将Mvc添加到项目中,请在ConfigureServices()方法中添加对services.AddMvcCore()的调用。 要编译此代码,请添加对Microsoft.AspNetCore.Mvc的引用。

Web API 项目的一部分

让我们来仔细看看PatientController这门课。 自动生成的类有以下方法:

  • public IEnumerable<string> Get()
  • public string Get(int id)
  • public void Post([FromBody]string value)
  • public void Put(int id, [FromBody]string value)
  • public void Delete(int id)

Get()方法只是返回一个JSON对象作为一个可枚举的值字符串,而Get(int id)方法是一个覆盖的变量,它为指定的 ID 获取特定的值。

Post()Put()方法可用于创建和更新实体。 请注意,Put()方法将 ID 值作为第一个参数,以便它知道要更新哪个实体。

最后,我们有Delete()方法,可以使用该方法删除使用指定 ID 的实体。

这些操作将工作最好与一个对象-关系映射(ORM)框架(如*实体框架,我们将在第六章、【显示】使用实体框架与数据库进行交互的代码。 同时,我们将在 API 控制器代码中创建占位符对象和值。*

**## 运行 Web API 项目

你可以在一个可以显示 JSON 数据的 Web 浏览器中运行 Web API 项目。

如果你使用谷歌 Chrome 浏览器,我建议使用JSONView 扩展(或其他类似的扩展)正确显示 JSON 数据。

上述扩展也可在 GitHub 在以下 URL:

https://github.com/gildas-lormeau/JSONView-for-Chrome

如果您使用Microsoft Edge,您可以直接在浏览器中查看原始 JSON 数据。 一旦您的浏览器准备好了,您就可以从 Visual Studio 的顶部工具栏中选择您想要的浏览器。 点击Debug按钮旁边的小三角形图标,然后选择浏览器,如下图所示:

Running the Web API project

在上面的截图中,您可以看到安装了多种浏览器,包括 Firefox、谷歌 Chrome、Internet Explorer 和 Edge。 要选择一个不同的浏览器,只需点击浏览与… ,在菜单中选择一个不同的。

现在,点击Debug按钮(也就是绿色的play按钮)来查看 Web API 项目在您的 Web 浏览器中的运行情况,如下面的截图所示。 如果你没有设置一个 web 应用,你将无法从根 URL 浏览网站:

Running the Web API project

如果你看到这个错误,不要担心,你可以更新 URL 来包含 API 控制器的路径; 例如,见http://localhost:12345/api/Patient

请注意,您的端口号可能有所不同。 现在,你应该能够看到 API 控制器吐出的视图列表,如下面的截图所示:

Running the Web API project

添加路由来处理预期的 URL 路径

在经典 ASP 时代,应用 URL 路径通常反映物理文件路径。 这在 ASP 中继续.NET web 表单,尽管引入了自定义 URL 路由的概念。 ASP.NET MVC,路由被设计为迎合功能而不是物理路径。

ASP.NET Web API 延续了这一较新的传统,它能够在代码中设置自定义路由。 您可以在启动代码中使用流畅的配置或使用方括号包围的声明性属性为应用创建路由。

了解路线

为了理解使用路由的目的,让我们关注一下路由在应用中的特性和好处。 这适用于 ASP。 asp.net MVC 和 asp.net.NET Web API:

  • 通过定义路由,您可以为 URL 访问引入可预测的模式
  • 这使您能够更好地控制如何将 url 映射到您的控制器
  • 人类可读的路径也是 seo 友好的,这对于搜索引擎优化非常好
  • 当涉及到揭示系统中的底层 web 技术和物理文件名时,它提供了某种程度的隐晦

设置路由

让我们从这个简单的类级属性开始,它为你的 API 控制器指定一个路由,如下所示:

[Route("api/[controller]")] 
public class PatientController : Controller 
{ 
  // ... 
} 

在这里,我们可以剖析属性(在方括号中看到,用于影响它下面的类)和它的参数,以了解发生了什么:

  • Route属性表明我们将为这个控制器定义一个路由。
  • 在后面的括号中,路由路径用双引号定义。
  • 该路径的第一部分是字符串字面值api/,它声明到 API 方法调用的路径将以术语api开始,后跟一个正斜杠。
  • 路径的其余部分是方括号中的单词controller,它指的是控制器名称。 根据约定,控制器名是控制器类名的一部分,该类名位于术语Controller之前。 对于类PatientController,控制器名称就是单词Patient
  • 这意味着该控制器的所有 API 方法都可以使用以下语法访问,其中MyApplicationServer应该替换为您自己的服务器或域名:http://MyApplicationServer/api/Patient

对于方法调用,可以定义带参数或不带参数的路由。 下面的例子演示了这两种类型的路由定义:

[HttpGet] 
public IEnumerable<string> Get() 
{ 
    return new string[] { "value1", "value2" }; 
} 

在本例中,Get()方法执行与 HTTP 动词HttpGet相关的操作,该动作声明在该方法的正上方的属性中。 这标识了在不带任何参数的情况下通过浏览器访问控制器的默认方法,这意味着可以使用以下语法访问此 API 方法:

http://MyApplicationServer/api/Patient 

要包含参数,我们可以使用以下语法:

[HttpGet("{id}")] 
public string Get(int id) 
{ 
    return "value"; 
} 

这里,HttpGet属性与"{id}"参数耦合,用双引号括起来的花括号。 方法的覆盖版本还包括一个名为id的整数值,以与期望的参数相对应。

如果不指定任何参数,则id的值等于default(int),即为零。 它可以在不带任何参数的情况下调用,语法如下:

http://MyApplicationServer/api/Patient/Get 

为了传递参数,你可以在控制器名称后添加任何整数值,语法如下:

http://MyApplicationServer/api/Patient/1 

这将把数字1分配给整数变量id

测试路线

要测试上述路由,只需从 Visual Studio 运行应用并访问不带参数的指定 url。

Testing routes

上图显示了进入以下路径的结果:

http://MyApplicationServer/api/Patient/1 

从客户端应用中使用 Web API

如果 Web API 公开公共端点,但没有客户端应用来使用它,那么它真的存在吗? 不需要太过理性,让我们来讨论一下使用客户机应用的可能方法。

你可以做以下任何事情:

  • 使用外部工具使用 Web API
  • 使用移动应用使用 Web API
  • 使用 Web 客户端使用 Web API

使用外部工具进行测试

如果没有设置客户机应用,可以使用外部工具,如Fiddler。 Fiddler 是一个免费的工具,现在可以从 Telerik 获得,在http://www.telerik.com/download/fiddler,如下截图所示:

Testing with external tools

您可以使用 Fiddler 检查在您的机器上检索和提交的 url。 您还可以使用它来触发任何 URL,并更改请求类型(Get、Post 等)。

从移动应用中使用 Web API

因为本章主要是关于 ASP.NET Core Web API,我们不会详细讲移动应用开发。 但是,需要注意的是,Web API 可以为您的移动应用项目提供后端。

移动应用可能包括 Windows 移动应用,iOS 应用,Android 应用,以及任何你可以为今天的智能手机和平板电脑构建的现代应用。 您可以参考您所选择的特定平台的文档,以确定需要什么来调用 RESTful API。

从 Web 客户端使用 Web API

在这种情况下,web 客户端指的是任何能够调用 RESTful API 的 HTML/JavaScript 应用。 至少,您可以使用直接的 JavaScript 构建一个完整的客户端解决方案来执行必要的操作。 为了获得更好的体验,您可以使用 jQuery 和许多流行的 JavaScript 框架之一。

一个 web 客户端也可以是一个更大的 ASP 的一部分.NET MVC 应用或单页应用(SPA)。 只要您的应用输出 HTML 页面中包含的 JavaScript,您就可以构建一个与后端 Web API 一起工作的前端。

总结

在本章中,我们已经了解了 ASP 的基本结构.NET Web API 项目,并观察了在 asp.net 中 Web API 与 MVC 的统一。 净的核心。 我们还学习了如何使用 Web API 作为后端来为各种前端应用提供支持。

在下一章中,我们将学习更多关于使用 HTML5、JavaScript 和 CSS3 开发交互式前端 UI 的知识。 我们将关注使用 JavaScript 来使用 Web API,同时介绍客户端工具,如 Bower、Grunt 和 Gulp。**