基于REST风格的前后端分离的Web服务架构的.NET Framework实现第4讲《后端实现篇之查询功能》

       从这一讲开始，即将进入我们这个项目的核心地带。在这里，我们要实现出增删改查四个接口，以供前端调用。当然，现实当中的项目，不可能只有四个接口，但是无论多么复杂的项目，都可以由这四个接口扩展出来。所以，这四个接口是基础中的基础，非常重要。首先进行的是查询接口的实现，这是后续操作的基础，后面的操作都需要用查询接口来进行测试，所以我把查询接口放在第一个进行实现。我后续的实现操作，都是遵循先写前端访问代码，然后完成后端实现，最后通过前后端的集成来进行测试。

       1.查询接口前端访问代码实现

       由于我们后面的代码实现了两个查询接口，所以这里我们要重新修改一下index.html这个页面的代码。

       然后，在index.js文件中实现两个查询接口的方法。

       这样，我们前端查询的访问代码就完成了。

       2.查询接口后端实现

       首先，需要实现Controller类，这个类负责暴露我们的WebAPI微服务接口。我们先新建一个Controller类，在Controllers文件夹上右击、添加、控制器，如下图所示。

       选择Web API 2控制器 - 空，点击添加。

       控制器名称输入UserInfoController

       接下来我们编写查询接口的代码，这个分为两步，第一步先实现业务逻辑，业务逻辑可能要访问DAL层进行数据库操作，然后通过Controller调用业务逻辑，暴露出我们的查询接口。

       这里我们先建立业务逻辑类，这个就是新建一般的类文件，新建过程就不做说明了。名称为UserInfoBll，最终的代码如下图所示。

       UserInfoBll查询代码，这里我使用了异步操作的方式，并且实现了两个查询的业务方法，一个是查询全部用户信息，一个是通过id查询某个用户信息。

       UserInfoController查询代码，注意，这里要和BLL代码中使用同样的异步操作方式。代码中暴露了BLL两个方法的查询接口。

       后端已经准备完毕，接下来我们进行前后端的集成。

       3.查询接口前后端集成测试

       在进行前后端集成测试之前，需要打开后端的跨域访问功能，否则前端无法正常访问后端暴露出来的接口。打开后端跨域访问很简单，只需要两步就可以完成。首先，通过NuGet安装CORS模块。

       我这里已经安装好了，如果是没有安装的话，那点击安装按钮就可以了。然后，需要修改App_Start文件夹下面的WebApiConfig.cs文件。

       上图中，红色矩形框标注的，就是跨域访问的实现代码。完成后，即得要重新生成一下后端项目，这样才能把后端新增的代码重新进行编译。

       接下来，进行集成测试，先看看数据库的实际样子。

       这就是数据库保存数据的实际情况，我们以这个为基础来进行集成测试。首先进行全部用户信息获取的集成测试。

       上图就是点击获取全部按钮后，获取到的全部用户信息的前端展现。从图中可以看到，接口已经切换到后端暴露出来的服务接口，返回的数据格式为JSON类型，跨域访问是打开的。然后我们再进行单个用户信息查询的接口测试，这里我们需要在编号栏里面输入id，这也是在数据库里面保存的用户信息的id，输入完成后，点击获取单个按钮，如下图所示。

       从图中可以看到，前后端集成测试正常通过。到这里，我们这一讲的内容就算完成了，我们顺利的实现了查询功能的前后端，并且对查询功能的前后端进行了简单的集成。这里要重点说一下跨域访问这个功能，这个功能是出于安全性的角度来考虑的。我们可以用这个跨域功能来实现后端接口暴露时的安全性设置，通过设置跨域功能，可以让我们的后端更安全，也可以指定具体的IP地址来对后端暴露的接口进行访问。这里就不展开介绍跨域功能了，如果有感兴趣的同道中人，那可以单独和我讨论。