封装获取用户 post 提交的数据的方法|学习笔记

简介: 快速学习封装获取用户 post 提交的数据的方法

开发者学堂课程【Node.js 入门与实战封装获取用户 post 提交的数据的方法】学习笔记,与课程紧密联系,让用户快速学习知识

课程地址https://developer.aliyun.com/learning/course/588/detail/8292


封装获取用户post提交的数据的方法

 

目录:

一.读取 post 提交三大步骤

二.如何获取用户 post 提交数据的方法

三.封装的三个

 

一.读取post提交三大步骤

1. 读取 data.json 文件

2. 获取用户 post 提交的数据

3. 为用户提交的新闻增加一个 id 属性,并且将新闻对象 push 到 list 中

4. 将新的 List 数组,再写入到 data.json文件中

 

二.如何获取用户post提交数据的方法

首先声明一个数组,用来保存用户提交的数据。

每次提交一部分数据触发一次 data 事件,在 data 事件中把提交的数据 push 到数组当中。

接下来监听 end 事件,在 end 事件中,首先把在 data 事件中拿到的数据转成buffer 对象,转成 buffer 对象后,再把 buffer 对象转成一个字符串,转成字符串后调用 querystring 方法,把字符串转成 json 对象。

然后在新闻中增加一个 id,增加id需要用到 list,但是封装获取用户 post 提交数据的方法也可以不用在新闻中增加 id,可以选择不用。

获取 post 提交数据,监听两个事件,在on事件中可以拿到最终 post 的数据,但是需要把这个数据传递出去。

把用户 post 提交过来的数据传递出去,需要一个回调函数,通过回调函数把postBody 传出去,用户就可以拿到这个数据,但是在这之中 requset 对象是访问不到的,requst 对象只有在整个 requst 事件中才能访问得到,如果要拿到 requst对象,需要通过参数把 requst 对象传到另外一个 function 里才可以。

在 post 提交数据中,第一步读取 data.json 文件,读取之后调用 postBodyData 方法,方法中第一个参数是 requst,第二个是回调函数 function,回调函数中有postData,用 post 提交的数据可以在 postData 中拿到,拿到数据之后给数据增加一个 id 属性,需要把它 push 到l sit 之中,再将新的 lsit 数值,写入到 data.json文件中。

//封装一个获取用户 post 提交的数据的方法

function postBodyData()  {

var array = [ ];

req.on( 'data', function(chunk) {

array.push(chunk);

});

//监听 request 对象的 end 事件

//当 end 事件被触发的时候,表示上所有数据都已经提交完毕了 req.on( 'end' , function() {

//在这个事件中只要把 array 中的所有数据汇总起来就好了

//把 array 中的每个 buffer 对象,集合起来转换为一个 buffer 对象

// title=fffffff&url=ffffff&text=ffffff

// {title: 'fffff' , url: 'fffff', text: 'ffffff'}

/ /jSON.parse();

var postBody = Buffer.concat(array);

//console.log(postBody);

//把获取到的 buffer 对象转换为一个字符串postBody = postBody.toString( 'utf8');

//把 post 请求的查询字符串,转换为一个 json 对象postBody = querystring.parse(postBody);

// console.log(postBody);

// 在把新闻添加到 list 之前,为新闻增加一个id属性

postBody.id = list.length;

});

}

//1. 读取 data.json

readNewsData(function(List) {

//2. 读取用户 post 提交的数据

pstBodyData(req,function (postData) {

//3.在新闻增加一个 id 属性,并且将新闻对象 push 到 list 中

postData.id = list.length;

list.push(postData);

//4. 将新的 list 数组,在写入到 data.json 文件中writeNewsData(sON.stringify(list), function() {

//重定向

res.statusCode = 302;

res.statusMessage = ‘Found ' ;

res.setHeader( ' Location', '/"); 

res.end();

});

});

}else if (req.url.startswith( '/resources ') 8& req.method == 'get') {

//如果用户请求是以/resources 开头,并且是 get 请求,就认为用户是要请求静态资源

//resources/images/s.gif

res.render(path.join(__dirname,req.url));

}else {

res.writeHead(404,"Not Found', {

"Content-Type' : 'text/html; charset=utf-8'

});

res.end( '404,Page Not Found. " );

}).listen(9090,function() {

consoLe.log('http: //localhost:9090');});

});

输出结果为:

image.png

输入数据点击 submit 提交过来后

image.png

运行 data.json 中也有了 {"title" :

"388888" , "url" : "http://localhost:9090/submit" , "text" : " e000800" , "id":3}

证明读取用户 post 数据是正确的


三.封装的三个方法

1. 读取 data.json 文件数据

2. 写入 data.json 数据

3. 获取 post 提交的数据

 

相关文章
|
1月前
|
JSON JavaScript 中间件
POST 请求如何处理表单数据?
【10月更文挑战第24天】POST请求处理表单数据需要客户端和服务器端的协同工作,客户端负责将表单数据正确地编码并发送给服务器,服务器端则需要准确地接收、验证和处理数据,并向客户端返回合适的响应。
66 1
|
4月前
|
前端开发
第一种方式:使用form表单将前端数据提交到servelt(将前端数据提交到servlet)
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
第一种方式:使用form表单将前端数据提交到servelt(将前端数据提交到servlet)
|
3月前
|
前端开发
ThinkPHP6表单上传的数据获取的四种方式【请求对象调用,静态调用,助手函数调用,原生的get|post】
本文介绍了在ThinkPHP6中获取表单上传数据的四种方式:请求对象调用、静态调用(Facade)、助手函数调用以及原生的$_GET和$_POST数组。文章通过示例代码展示了每种方式的具体使用方法,并强调了在使用请求对象调用时引入正确的Request类的重要性。
|
5月前
|
运维 Serverless API
函数计算产品使用问题之如何处理GE 和POST请求
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
7月前
|
JSON 中间件 数据格式
在自定义服务器框架中处理 POST 请求
在自定义服务器框架中处理 POST 请求
|
7月前
|
XML JSON 前端开发
ajax中get和post的区别,datatype返回的数据类型有哪些?web开发中数据提交的几种方式,有什么区别。百度使用哪种方式?
ajax中get和post的区别,datatype返回的数据类型有哪些?web开发中数据提交的几种方式,有什么区别。百度使用哪种方式?
53 0
|
7月前
|
前端开发 JavaScript
解决Ajax发送DELETE请求时后台无法接收到参数的问题(Restful风格)
解决Ajax发送DELETE请求时后台无法接收到参数的问题(Restful风格)
197 0
|
Web App开发 网络协议 安全
GET和POST方式请求API接口数据返回
GET和POST方式请求API接口数据返回
182 0
|
JSON JavaScript 数据格式
post 方式提交一条新闻|学习笔记
快速学习 post 方式提交一条新闻
post 方式提交一条新闻|学习笔记
|
运维 前端开发 安全
问题记录:前后端交互无返回,后台服务正常
业务产线反馈商户入住提示服务连接失败,然后要到客户的账号密码,进入系统发现服务确实连接失败, 打开network查看请求的响应,发现请求石沉大海,根本没有到达服务器。
276 0