基于nodejs的服务端开发已经有express、koa2等成熟框架。熟练使用这些框架并不难,但背后的原理是怎样的,很多同学并没有做到知其所以然。本分享注重原理,从细节抠起来,循序渐进,特别适合零基础的同学。在掌握原理后,再去学习express、koa2框架,会理解得更加透彻。本次主题为如何基于nodejs实现处理GET、POST请求。
按照步骤一步步来,就会很快掌握~来加油吧!
1 初始化项目
1.1 创建项目目录
找个喜欢的地方,新建并初始化项目,执行以下命令:
1.2 编写服务脚本
在项目根目录下创建bin/www.js。
启动web服务需要使用nodejs的http模块,打开 bin/www.js 编写代码:
配置入口文件,修改package.json
【关于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。 执行后,在控制台可以看到输出,说明服务已经正常启动:
浏览器打开http://localhost:8000,出现“hello nodejs”。
2 设置服务自动热启动
每次修改代码都要重启服务器才能生效很麻烦,使用nodemon来实现自动监测代码变化并重启。
另外,安装cross-env可以方便的跨平台设置环境变量(例如,windows用%ENV_VAR%,其他系统可能使用$ENV_VAR,不统一)
修改package.json:
再次执行npm run dev的时候,如果代码有改动,web服务会自动重启,这样就方便多啦。
3 处理GET请求
浏览器访问http://localhost:8000?id=1&name=demo,相当于我们发送了一个GET请求,并且传递了两个变量和值。
接下来我们实现:接收GET请求,并把GET请求传递的数据再返回给浏览器。
修改bin/www.js:
浏览器访问http://localhost:8000?id=1&name=demo,可以看到返回的数据了。
【原理讲解】
接收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有好多种。
这里我们以application/json和form-data为例,分别讲解如何接收POST数据。
5.1 接收application/json数据
首先我们要知道的是,POST数据是以二进制流的方式进行传输,所以要不断的接收数据,直到数据流结束。
修改bin/www.js:
【原理讲解】
- 通过req.headers['content-type']获取请求的数据格式,如果是applicatin/json则进入下面的逻辑。
- 创建postData变量,用来存储post数据。
- 在接收数据流的时候,会不断触发request的data事件,postData持续累积数据。
- 当数据流接收完毕,会触发request的end事件,返回给客户端最终结果。
按照下图设置postman:
点击Send后,可在下方看到返回的JSON数据。
切换到Header标签,可以看到返回数据的content-type为application/json。
5.2 接收form-data数据
在项目开发时,特别是jQuery项目,我们经常使用formData提交数据,例如:
如果用5.1章节的方式,接收到的数据是这样的:
需要我们自行解析,比较麻烦。这里推荐安装multiparty插件。
修改bin/www.js:
【原理讲解】
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之后,可以看到数据已经正常返回了。
以上就是本期分享,对GET和POST请求的处理方式进行了讲解。这是基于Node.js开发后端服务最最基本的功能了,希望对你有所帮助。
閱讀更多 臥梅又聞花 的文章