- 理解表单使用post方式提交数据时后端接收数据的方法
- 理解表单使用get方式提交数据时后端接收数据的方法
- 理解post和get的区别
- 记住请求报文的组成
- 记住响应报文的组成
fs模块： 进行目录和文件操作
readFile: 读文件
writeFile: 覆盖写文件
appendFile: 追加写文件
readdir: 遍历目录
1. post表单提交
1550024077433.png
- 表单提交的必要条件
- 必须有form标签
- action：表单数据提交的位置，必须是一种后端技术来接收
- method： 表单提交的方式，post（常用）、 get（默认）
- 每个表单域都要有name属性和值
- 必须要有submit按钮
- 后端接收 --- post方式
//1. 监听data事件，循环接收post表单提交的数据
let str = '';
//参数1： 事件类型，data代表接收客户端数据事件
//参数2： 接收时触发的回调函数
// 使用post提交的表单数据可能会非常大，需要切割成一个个的小数据块进行接收
req.on('data', (chunk) => {
str += chunk;
})
//2. 监听end事件，接收完成后处理接收到的数据
//参数1： 事件类型，end代表接收数据完成时触发的回调函数
//参数2： 完成后触发的回调函数，在该函数中可以处理接收到的数据
req.on('end', () => {
console.log(str);
})
案例: 接收表单提交的用户和密码
- 创建index.html页面，设置表单
1550022255616.png
注意表单提交所需的三点。
- 创建服务器显示表单页
1550024154187.png
- 增加 /postData 的监听，来接收表单提交的数据
先用data事件来接收表单提交的数据，再用end事件来处理接收好的数据
接收到的str的结果： ==username=aaa&userpwd=123==
username 和 userpwd 是表单name的值
1550024200779.png
username=zs&userpwd=123&...
username 和 userpwd 是表单中name的值
zs 和 123 是自己填写的值
2. 每种表单域提交的方式
表单标签： form 、 ==input 、 select 、 textarea==
==表单提交的实际上是每个域的value值==
特殊:
select - option标签
name属性是设置在select标签中
value属性是设置在option标签中
如果在option标签中没有value，则会提交 option标签中的内容，但是强烈建议使用value属性
textarea 标签
name属性设置标签中
value就是两个标签之间的内容
1550026086743.png
3. get提交表单数据
get方式提交表单数据时，数据会以字符串方式显示在地址栏
显示方式： key1=value1&key2=value2&key3=value3&...
示例： http://127.0.0.1:8888/getData?username=weixiaobao&userpwd=123123
? 之后的部分就是表单提的数据，是一种 key=value&key=value的形式
key是表单域中name的值
要解析url地址可以使用url模块，该模块是一个系统模块
案例: url功能测试
1550027049545.png
执行结果:
1550027075186.png
重点:
pathname： 请求的url地址
query： ？之后的参数。 当parse方法设置参数2为true时，？之后的参数会被解析为对象形式
案例： 表单使用get方式提交数据
- 设置表单
1550027841076.png
-
创建服务器显示 index.html 页面
1550027907192.png
- 增加 /getData 的监听，来接收表单提交的数据
1550027939990.png
4. get和post的区别
==通过URL地址栏来区分post和get==
- 提交方式
-
get会将数据显式的拼接到url地址栏中 (字符串)
例如： /getData==?==id=10001==&==username=heiheihei==&==passwd=123456&key=value....
key=value方式传参，多个参数之间使用&符号隔开id、username、passwd等等（键/key）都是表单域的name值 1、heiheihei、123456等等（值/value）都是表单域的value值 -
post不会显示出来
- 传递数据量大小
-
post传递的数据量较大，理论上是无上限的
-
get会受到浏览器的地址栏的限制。有的是2k（IE6），有的是8K(chrome)
- 应用范围不一样
- post在绝大多数情况下都使用在表单提交中。
- get的应用范围比较广，只要能进行页面跳转，就能传递数据。在a标签的href中，location.href中等都能使用get方式。
5. 发表评论
- 保证表单能够正常提交
form： action （指定表单数据提交的位置） method （提交方式 post）
每个表单域都要有name属性和值
必须有submit按钮来提交表单
1550030463702.png
- 增加 /addpost 监听，在该分之中接收表单提交的数据
1550030752670.png
6. http协议
6.1 http协议概述
协议: 就是事先的一种约定、规则、规范、标准。（租房合同、工作合同）。
HTTP协议（HyperText Transfer Protocol ）：超文本传输协议，客户端（浏览器端）与WEB服务器端之间的交互协议。当浏览器和服务器进行数据交换时，html文件、图片、CSS、JS等都是基于HTTP协议进行传输的。
HTTP协议有两个版本: 1.0 和 1.1，目前使用的基本都是1.1
特点:
通常是基于 B/S 结构软件的。
无连接: 浏览器向服务器发送一次请求，服务器响应一次，链接即结束。
无状态: 无记忆。 服务器不能记住哪个浏览器访问过。
HTTP协议主要分为两大部分:
请求: 访问服务器的任何一个文件都是一次请求
响应: 服务器处理请求，将结果返回给浏览器。
6.2 请求协议/请求报文
请求分为3个部分: 请求行 请求头 请求主体
-
请求行: 请求方式、请求URL地址、协议版本号
-
请求头: 主机域名，端口号，客户端(浏览器)的信息等
-
请求主体: 发送给服务器的数据，get和post都会通过请求主体将数据发送给服务器
可以使用Chrome tools 或者 firebug 来查看请求和响应的信息（F12）
主要请求项:
- host： 主机名和端口号，80端口默认不显示
- accept：可接受的程序/文件类型
- accept-encoding： 可接受的压缩类型
- accept-language： 可接受的语言类型
案例1: 访问 127.0.0.1:3000/index，查看请求行和请求头
1550031744937.png
打开F12
1550031796127.png
1550031927884.png
案例2: 使用get方式提交数据，查看请求行、请求头和请求体
案例3: 使用post方式提交数据，查看请求行、请求头和请求体
6.3 响应协议/响应报文
响应也分为3部分: 响应行 响应头 响应主体
-
响应行: 协议版本号、响应结果状态码
-
响应头: 主要是服务器端的信息
-
响应主体: 就是从服务器返回给客户端的数据
主要响应项：
- content-type： 响应内容类型， content-type:text/html，服务器告诉浏览器，返回的这部分数据是文本类型，使用html方式来解析即可。
- content-length： 响应内容的长度 ，content-length:336, 从服务器返回给浏览器的数据总长度为336字节
6.4 多次请求和响应
1549973295308.png
6.5 常见状态码
常见的状态码如下:
200 ok ----- 请求成功
302 redirect|Found ----- 重定向
304 not modified ----- 未修改
403 forbidden ----- 禁止访问 （没有权限访问）
404 Not Found ----- 未找到页面
500 internal server error ----- 服务器内部错误 (可能是服务器本身有问题，或者代码错的太离谱)
6.6 req和res对象
req（request）：请求对象
url: 保存了浏览器的url地址
method: 请求方式
headers: 请求头信息
res（response）：响应对象
setHeader()： 设置响应头信息
writeHeader()： 设置响应头信息和状态码
write(): 设置响应体
end(): 将响应行、响应头、响应体一次性返回给浏览器
网友评论