01.03 Node.js零基础处理GET、POST请求

Node.js零基础处理GET、POST请求

Node.js零基础处理GET、POST请求

基于nodejs的服务端开发已经有express、koa2等成熟框架。熟练使用这些框架并不难,但背后的原理是怎样的,很多同学并没有做到知其所以然。本分享注重原理,从细节抠起来,循序渐进,特别适合零基础的同学。在掌握原理后,再去学习express、koa2框架,会理解得更加透彻。本次主题为如何基于nodejs实现处理GET、POST请求

按照步骤一步步来,就会很快掌握~来加油吧!

1 初始化项目

1.1 创建项目目录

找个喜欢的地方,新建并初始化项目,执行以下命令:

Node.js零基础处理GET、POST请求

1.2 编写服务脚本

在项目根目录下创建bin/www.js。

Node.js零基础处理GET、POST请求

启动web服务需要使用nodejs的http模块,打开 bin/www.js 编写代码:

Node.js零基础处理GET、POST请求

配置入口文件,修改package.json

Node.js零基础处理GET、POST请求

【关于main字段】

官方说明的原文是这样的:

The main field is a module ID that is the primary entry point to your program. That is, if your package is named foo, and a user installs it, and then does require("foo"), then your main module’s exports object will be returned.

This should be a module ID relative to the root of your package folder.

For most modules, it makes the most sense to have a main>

翻译大致意思是:

main字段是一个模块ID,是指向你程序的主入口。也就是说,如果你的package名叫foo,那么一个用户安装了你这个package,并且执行require("foo"),你的main模块的exports对象将会被返回。

这个模块ID应该相对于你的package根目录。

对于大多数的模块来说,设置main还是非常有意义的,除此之外也没有其他鸟用了。

【关于script字段】

官方说明的原文是这样的:

The “scripts” property is a dictionary containing>

scripts是一个包含了脚本命令的dictionary,可以在package不同的生命周期中被执行。key是生命周期事件,value是要运行的命令。

英语比较好的同学可以参看官方原文:https://docs.npmjs.com/files/package.json

回到我们的项目来,项目的主入口文件是./bin/www.js。

现在,在项目根目录下执行npm run dev,就等同于执行node ./bin/www.js。 执行后,在控制台可以看到输出,说明服务已经正常启动:

Node.js零基础处理GET、POST请求

浏览器打开http://localhost:8000,出现“hello nodejs”。

2 设置服务自动热启动

每次修改代码都要重启服务器才能生效很麻烦,使用nodemon来实现自动监测代码变化并重启。

另外,安装cross-env可以方便的跨平台设置环境变量(例如,windows用%ENV_VAR%,其他系统可能使用$ENV_VAR,不统一)

Node.js零基础处理GET、POST请求

修改package.json:

Node.js零基础处理GET、POST请求

再次执行npm run dev的时候,如果代码有改动,web服务会自动重启,这样就方便多啦。

3 处理GET请求

浏览器访问http://localhost:8000?id=1&name=demo,相当于我们发送了一个GET请求,并且传递了两个变量和值。

接下来我们实现:接收GET请求,并把GET请求传递的数据再返回给浏览器。

修改bin/www.js:

Node.js零基础处理GET、POST请求

浏览器访问http://localhost:8000?id=1&name=demo,可以看到返回的数据了。

Node.js零基础处理GET、POST请求

【原理讲解】

接收GET请求数据还是很简单的,关键点就是使用const query = querystring.parse(url.split('?')[1])把url中?后面的参数直接解析好了。

4 下载安装postman

因为POST请求不能像GET请求一样通过浏览器的URL直接发起请求,所以在讲解处理POST请求之前,我们先postman这个工具软件。

postman是一款可以模拟各种请求的工具,方便我们进行POST调试,否则我们还要去做一个静态页。通过ajax等方式去请求。

官方建议下载桌面端APP,www.getpostman.com/downloads/

5 处理POST请求

启动postman,我们把请求方式改为POST,输入请求地址http://localhost:8000/。

点击下方的Body标签,可以看到发起POST请求的content-type有好多种。

Node.js零基础处理GET、POST请求

这里我们以application/json和form-data为例,分别讲解如何接收POST数据。

5.1 接收application/json数据

首先我们要知道的是,POST数据是以二进制流的方式进行传输,所以要不断的接收数据,直到数据流结束。

修改bin/www.js:

Node.js零基础处理GET、POST请求

【原理讲解】

  1. 通过req.headers['content-type']获取请求的数据格式,如果是applicatin/json则进入下面的逻辑。
  2. 创建postData变量,用来存储post数据。
  3. 在接收数据流的时候,会不断触发request的data事件,postData持续累积数据。
  4. 当数据流接收完毕,会触发request的end事件,返回给客户端最终结果。

按照下图设置postman:

Node.js零基础处理GET、POST请求

点击Send后,可在下方看到返回的JSON数据。

Node.js零基础处理GET、POST请求

切换到Header标签,可以看到返回数据的content-type为application/json。

Node.js零基础处理GET、POST请求

5.2 接收form-data数据

在项目开发时,特别是jQuery项目,我们经常使用formData提交数据,例如:

Node.js零基础处理GET、POST请求

如果用5.1章节的方式,接收到的数据是这样的:

Node.js零基础处理GET、POST请求

需要我们自行解析,比较麻烦。这里推荐安装multiparty插件。

Node.js零基础处理GET、POST请求

修改bin/www.js:

Node.js零基础处理GET、POST请求

【原理讲解】

1.为何使用contentType.indexOf('multipart/form-data') !== -1来判断是不是multipart/form-data类型?

因为通过form-data提交的数据content-type的值是类似

multipart/form-data;boundary=----WebKitFormBoundaryMxVY9JCuXKMvmRuL

的形式,因此使用indexOf()。

2.let form = new multiparty.Form()可方便的解析form-data数据。fields里可以获取提交的数据变量及值,files里获取提交的文件数据。

3.使用JSON.stringify()将对象转化为JSON字符串返回给客户端。

点击Send之后,可以看到数据已经正常返回了。

Node.js零基础处理GET、POST请求

以上就是本期分享,对GET和POST请求的处理方式进行了讲解。这是基于Node.js开发后端服务最最基本的功能了,希望对你有所帮助。


分享到:


相關文章: