封装获取用户 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请求处理表单数据需要客户端和服务器端的协同工作,客户端负责将表单数据正确地编码并发送给服务器,服务器端则需要准确地接收、验证和处理数据,并向客户端返回合适的响应。
83 1
|
4月前
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法,并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
|
3月前
|
前端开发
ThinkPHP6表单上传的数据获取的四种方式【请求对象调用,静态调用,助手函数调用,原生的get|post】
本文介绍了在ThinkPHP6中获取表单上传数据的四种方式:请求对象调用、静态调用(Facade)、助手函数调用以及原生的$_GET和$_POST数组。文章通过示例代码展示了每种方式的具体使用方法,并强调了在使用请求对象调用时引入正确的Request类的重要性。
|
7月前
|
XML JSON 前端开发
ajax中get和post的区别,datatype返回的数据类型有哪些?web开发中数据提交的几种方式,有什么区别。百度使用哪种方式?
ajax中get和post的区别,datatype返回的数据类型有哪些?web开发中数据提交的几种方式,有什么区别。百度使用哪种方式?
60 0
|
前端开发
前端学习笔记202305学习笔记第二十二天-登录页校验封装和token封装2
前端学习笔记202305学习笔记第二十二天-登录页校验封装和token封装2
78 0
|
前端开发
前端学习笔记202305学习笔记第二十二天-登录页校验封装和token封装1
前端学习笔记202305学习笔记第二十二天-登录页校验封装和token封装1
64 0
|
缓存 NoSQL 前端开发
若依系统(分离版)后台接口被调时,代码哪里判断了token是否超时?
若依系统(分离版)后台接口被调时,代码哪里判断了token是否超时?
1229 0
|
JSON 前端开发 JavaScript
layui上传文件弹出请求上传接口出现异常的终极解决方案(v2.68版本、ajax底层逻辑修改、debug快速定位)
layui上传文件弹出请求上传接口出现异常的终极解决方案(v2.68版本、ajax底层逻辑修改、debug快速定位)
1543 0
|
JSON 分布式计算 Hadoop
PUT 和 POST-更新Ⅰ之全局更新|学习笔记
快速学习 PUT 和 POST-更新Ⅰ之全局更新。
281 0
PUT 和 POST-更新Ⅰ之全局更新|学习笔记
|
JSON 分布式计算 Hadoop
PUT 和 POST_更新Ⅰ之全局更新 | 学习笔记
快速学习 PUT 和 POST_更新Ⅰ之全局更新
PUT 和 POST_更新Ⅰ之全局更新 | 学习笔记