WebAPI系列之快速入门

Posted 2023-04-23

参考技术A 前言

随着上位机开发技术的广泛应用，很多小伙伴会有上位机与MES等系统进行数据交互的需求，这时候，我们就需要了解WebAPI的相关技术。

什么是WebAPI？

WebAPI是一个简单的构建HTTP服务的新框架，用于对接各种客户端（浏览器，移动设备），在.Net平台上，WebAPI是一个开源的、理想的、构建REST-ful服务的技术。

WebAPI部署在哪里？

WebAPI部署在IIS中，用于给外部应用提供数据。

为什么要使用WebAPI？

WebAPI本质是网络应用程序接口，网络应用可以通过API接口，可以实现存储服务、消息服务、计算服务等能力，利用这些能力可以进行开发出强大功能的web应用。

创建WebAPI

1、打开VS2019，创建一个新项目，项目模板选择ASP.NET Web应用程序（.NET Framework），如下所示：

2、创建完成后，取一个项目名称，然后点击下一步，在下面的页面中，选择模板为Web API，如下所示：

3、创建项目需要一点时间，由于我们选择好了Web API，所以创建好的项目界面自动会添加好Models/Controllers/Views等文件夹，如下所示：

4、在Models文件夹下，创建一个实体类，如下所示：

5、在Controllers文件夹下，右击创建控制器，这里注意要选择Web API 2控制器模板，名称为THMonitorController，继承ApiController，如下所示：

6、在THMonitorController控制器中，创建一个实体集合对象，同时添加两个Get开头的方法，如下所示：

public class THMonitorController : ApiController



THMonitor[] THMonitors = new THMonitor[]



newTHMonitor()Name="温度1",Value="22.3",Unit="℃",Desc="温度1",

newTHMonitor()Name="温度2",Value="22.1",Unit="℃",Desc="温度2",

newTHMonitor()Name="温度3",Value="32.3",Unit="℃",Desc="温度3",

newTHMonitor()Name="温度4",Value="22.3",Unit="℃",Desc="温度4",

newTHMonitor()Name="湿度1",Value="42.3",Unit="%",Desc="湿度1",

newTHMonitor()Name="湿度2",Value="42.1",Unit="%",Desc="湿度2",

newTHMonitor()Name="湿度3",Value="42.3",Unit="%",Desc="湿度3",

newTHMonitor()Name="湿度4",Value="42.3",Unit="%",Desc="湿度4",

;

public IEnumerableGetAllTHMonitor()



returnTHMonitors;



public THMonitor GetTHMonitorByName(string name)



THMonitor contact = THMonitors.FirstOrDefault(item => item.Name == name);

if(contact == null)



throw new HttpResponseException(HttpStatusCode.NotFound);



returncontact;



7、这样，最简单的一个WebAPI项目就完成了，直接运行即可，运行地址为https://localhost:44382/。

Web API测试

使用Postman接口工具来进行测试。

Postman是一款功能强大的HTTP调试与模拟插件。获取安装包，后台回复 Postman

1、启动Postman之后，在地址栏输入https://localhost:44382/，如果要获取所有的数据，请求方式选择Get，地址栏后面加个api/THMonitor，点击Send，可以看到返回的数据，结果显示为JSON格式。

2、如果想要查询某个数据，可以加个参数，地址栏为https://localhost:44382/api/THMonitor?Name=温度1，查询结果如下所示：

3、地址栏格式可以参考项目中的WebApiConfig.cs文件：

我是新阁上位机开发的付老师，用我的专业，成就你的梦想！

-END-

gulp系列之快速入门篇

快速开始

如果您以前已经全局安装了gulp，npm rm --global gulp 请先按照以下说明运行。有关更多信息，请阅读此Sip。

检查节点，npm和npx

node --version

npm --version

npx --version

如果尚未安装，请按照此处的说明进行操作。

安装gulp命令行实用程序

npm install --global gulp-cli

创建一个项目目录并浏览

npx mkdirp my-project

cd my-project

在您的项目目录中创建package.json文件

npm init

这将指导您为项目命名，版本，说明等。

在您的devDependencies中安装gulp软件包

npm install --save-dev gulp

验证您的gulp版本

gulp --version

确保输出与下面的屏幕截图匹配，否则您可能需要重新启动本指南中的步骤。

创建一个gulpfile

使用文本编辑器，在项目根目录中创建一个名为gulpfile.js的文件，其中包含以下内容：

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

测试一下

在项目目录中运行gulp命令：

gulp

要运行多个任务，可以使用gulp <task> <othertask>。

结果

默认任务将运行并且不执行任何操作。