前言:
如今朋友们对“js请求post数据”大致比较珍视,小伙伴们都想要分析一些“js请求post数据”的相关资讯。那么小编同时在网摘上网罗了一些关于“js请求post数据””的相关资讯,希望你们能喜欢,我们一起来了解一下吧!基于nodejs的服务端开发已经有express、koa2等成熟框架。熟练使用这些框架并不难,但背后的原理是怎样的,很多同学并没有做到知其所以然。本分享注重原理,从细节抠起来,循序渐进,特别适合零基础的同学。在掌握原理后,再去学习express、koa2框架,会理解得更加透彻。本次主题为如何基于nodejs实现处理GET、POST请求。
按照步骤一步步来,就会很快掌握~来加油吧!
1 初始化项目
1.1 创建项目目录
找个喜欢的地方,新建并初始化项目,执行以下命令:
1.2 编写服务脚本
在项目根目录下创建bin/。
启动web服务需要使用nodejs的http模块,打开 bin/ 编写代码:
配置入口文件,修改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 script and often not much else.
翻译大致意思是:
main字段是一个模块ID,是指向你程序的主入口。也就是说,如果你的package名叫foo,那么一个用户安装了你这个package,并且执行require("foo"),你的main模块的exports对象将会被返回。
这个模块ID应该相对于你的package根目录。
对于大多数的模块来说,设置main还是非常有意义的,除此之外也没有其他鸟用了。
【关于script字段】
官方说明的原文是这样的:
The “scripts” property is a dictionary containing script commands that are run at various times in the lifecycle of your package. The key is the lifecycle event, and the value is the command to run at that point.
scripts是一个包含了脚本命令的dictionary,可以在package不同的生命周期中被执行。key是生命周期事件,value是要运行的命令。
英语比较好的同学可以参看官方原文:
回到我们的项目来,项目的主入口文件是./bin/。
现在,在项目根目录下执行npm run dev,就等同于执行node ./bin/。 执行后,在控制台可以看到输出,说明服务已经正常启动:
浏览器打开,出现“hello nodejs”。
2 设置服务自动热启动
每次修改代码都要重启服务器才能生效很麻烦,使用nodemon来实现自动监测代码变化并重启。
另外,安装cross-env可以方便的跨平台设置环境变量(例如,windows用%ENV_VAR%,其他系统可能使用$ENV_VAR,不统一)
修改package.json:
再次执行npm run dev的时候,如果代码有改动,web服务会自动重启,这样就方便多啦。
3 处理GET请求
浏览器访问;name=demo,相当于我们发送了一个GET请求,并且传递了两个变量和值。
接下来我们实现:接收GET请求,并把GET请求传递的数据再返回给浏览器。
修改bin/:
浏览器访问;name=demo,可以看到返回的数据了。
【原理讲解】
接收GET请求数据还是很简单的,关键点就是使用const query = querystring.parse(url.split('?')[1])把url中?后面的参数直接解析好了。
4 下载安装postman
因为POST请求不能像GET请求一样通过浏览器的URL直接发起请求,所以在讲解处理POST请求之前,我们先postman这个工具软件。
postman是一款可以模拟各种请求的工具,方便我们进行POST调试,否则我们还要去做一个静态页。通过ajax等方式去请求。
官方建议下载桌面端APP,
5 处理POST请求
启动postman,我们把请求方式改为POST,输入请求地址。
点击下方的Body标签,可以看到发起POST请求的content-type有好多种。
这里我们以application/json和form-data为例,分别讲解如何接收POST数据。
5.1 接收application/json数据
首先我们要知道的是,POST数据是以二进制流的方式进行传输,所以要不断的接收数据,直到数据流结束。
修改bin/:
【原理讲解】
通过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/:
【原理讲解】
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开发后端服务最最基本的功能了,希望对你有所帮助。
标签: #js请求post数据