Node.js笔记04--服务器即http协议

/*
* 不借助任何第三方库，去搭建Node原生服务器
* */

//1.引入Node内置的http模块
let http = require('http')
//引入一个内置模块，用于解析key=value&key=value.....这种形式的字符串为js中的对象
/*
备注：
  1.key=value&key=value.....的编码形式：urlencoded编码形式。
  2.请求地址里携带urlencoded编码形式的参数，叫做：查询字符串参数(query参数)。
* */
//引入的qs是一个对象，该对象身上有着很多有用的方法，最具代表性的：parse()
let qs = require('querystring')

//2.创造一个“服务员” ---- 创建服务对象
let server = http.createServer(function (request,response) {
  //让服务员开始干活，获取客人点的菜单
  /*
  * (1).request:请求对象，里面包含着客户端给服务器的“东西”
  * (2).response：响应对象，里面包含着服务器要返回给客户端的“东西”
  * */
  //获取客户端携带过来的urlencoded编码形式的参数
  let params = request.url.split('?')[1] //name=zhangsan&age=18
  //console.log(params)
  let objParams = qs.parse(params) //
  //console.log(objParams)
  let {name,age} =  objParams

  response.setHeader('content-type','text/html;charset=utf-8')
  response.end(`<h1>你好${name},你的年龄是${age}</h1>`)
})

//3.指定服务器运行的端口号(绑定端口监听)
server.listen(3000,function (err) {
  if (!err) console.log('服务器启动成功了')
  else console.log(err)
})

前言

HTTP设定了八种发送请求方式（也称为八大“动作”）。这八种方法没有任何本质上的区别。只是让请求，更加有语义化而已。
八种方法分别为：OPTIONS、HEAD、GET、POST、PUT、DELETE、TRACE、CONNECT

这八种方法最终经过“岁月沉淀”后，最常用的是这两种：GET、POST

GET
1. 含义：从指定的资源获取数据（一种“索取”的感觉）。
2. 什么时候使用GET请求较为合适？
(1)单纯获取数据的时。
(2)请求非敏感数据时。

POST
1.含义：向指定的资源提交要被处理的数据（一种“交差”的感觉）。
2.什么时候使用POST请求较为合适？
(1)传送相对敏感数据时。
(2)请求的结果有持续性的副作用，例如：传递的数据要写入数据库时。
备注：使用了POST不代表的绝对的安全。

常见的GET请求：
1.浏览器地址栏输入网址时（即浏览器请求页面时，且无法手动更改）。
2.可以请求外部资源的html标签，例如：

常见的POST请求：
1.发送Ajax时,明确指出了使用POST方式时。
2.form表单提交时明确指出使用POST方式

二者的区别

//引入express
const express = require('express')

//1.创建app服务对象
const app = express()
//禁止服务器返回X-Powered-By,如果不禁止客户就会知道是用express框架搭建的服务器,容易受到破坏
app.disable('x-powered-by')

//2.配置路由 ------ 对请求的url进行分类，服务器根据分类决定交给谁去处理。
/*
(1).在Node.js课程中，我们所有说的“路由”,默认都是指【后端路由】
(2).路由可以理解为：一组一组key-value的组合，key:请求方式 + URI路径 ， value:回调函数
(3).根据路由定义的顺序(写代码的顺序),依次定义好路由，随后放入一个类似数组的结构，当有请求时，依次取出匹配。若匹配成功，不再继续匹配了
(4).该url:http://localhost:3000/meishi 中的meishi叫什么? 1.URI名字 2.虚拟路径名字
*/
//根路由
app.get('/',function (request,response) {
/*
* 问题：得是什么样的请求，能交给这个回调函数处理？
*       1.请求方式必须为GET
*       2.请求的URI必须为:“/”
* */
console.log(request.query)
console.log(request.url)
response.send('ok')
})

//一级路由
app.get('/meishi',function (request,response) {
/*
* 问题：得是什么样的请求，能交给这个回调函数处理？
*       1.请求方式必须为GET
*       2.请求的URI必须为:“/meishi”
* */
response.send('我是美食页面1')
})

//二级路由
app.get('/meishi/c17',function (request,response) {
response.send('我是美食-火锅页面')
})

//根路由
app.post('/',function (request,response) {
response.send('你发的是post请求')
})

//3.指定服务器运行的端口号(绑定端口监听)
app.listen(3000,function (err) {
if (!err) console.log('服务器启动成功了')
else console.log(err)
})

特别说明:记得先初始化,再下载express包

• 是什么：超文本传输协议（属于应用层协议）
• 特点：无状态，现在cookie解决了无状态的问题（早期网页开发时，用cookie解决，现在是cookie和session配合使用）
• 作用：规定了服务器和客户端传递信息的规则（统称为报文，分为：请求报文、响应报文。）
• 版本：
  • http 1.0 （老版本） ---------- 不支持长连接
  • http 1.1 （主流版本）--------- 优点：支持长连接，弊端：同时发送资源的数量过小。
  • http 2.0 （最新版） ---------- 同时发送资源的数量稍有提升。
• 报文(请求报文、响应报文)的组成：
  1.报文首行
  2.报文头
  3.空行（仅仅作为一个分割）
  4.报文体

GET http://localhost:3000/?name=kobe&password=123 HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Upgrade-Insecure-Requests: 1
DNT: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.75 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
Referer: http://localhost:63347/0719_node/demo.html?_ijt=tphpp47dag8jevtqrnq44blv6p
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7
Cookie: Webstorm-9af2238=09820128-3adb-43e4-8242-a6f65c9e523a
空行
空行

请求报文首行
GET http://localhost:3000/?name=kobe&password=123 HTTP/1.1
-请求方式 协议名://主机地址:端口号/？urlencoded编码形式的参数 协议名/版本
请求报文头
Host: localhost:3000
–发送请求的目标主机：主机名:端口号
Connection: keep-alive
–浏览器告诉服务器，浏览器支持长连接。
Pragma: no-cache
– 不走缓存
Cache-Control: no-cache
– 不走缓存(强缓存)
Upgrade-Insecure-Requests: 1
– 浏览器告诉服务器可以使用 https或http1.1
DNT: 1
– 浏览器告诉服务器：禁止跟踪。最终是否跟踪，还得看服务器是否配合。
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.75 Safari/537.36
– 用户代理：之前该字段用于判断用户的浏览器品牌以及版本，但是现在不好用了。
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3
– 浏览器能够接收资源的类型及优先级，优先级不写默认是1,1的优先级是最高的。
Referer: http://localhost:63347/0719_node/demo.html?_ijt=tphpp47dag8jevtqrnq44blv6p
– 本次请求是“站”在哪里发出去的。 1.防盗链。 2.广告计费
Accept-Encoding: gzip, deflate, br
– 浏览器告诉服务器，浏览器所能接受的压缩文件类型。
Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7
– 浏览器告诉服务器，浏览器所能支持的语言种类，及权重。
Cookie: Webstorm-9af2238=09820128-3adb-43e4-8242-a6f65c9e523a
– Webstorm给你种下的cookie
空行

请求报文体
GET请求没有报文体,它在url中即报文首行已经体现(在url中以问号开头的urlencoded编码形式的查询字符串参数),浏览器发送的数据

5.2 POST请求报文（给服务器看的）-- 通过form表单发送的POST请求

POST http://localhost:3000/ HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Content-Length:22
Pragma: no-cache
Cache-Control: no-cache
Origin: http://localhost:63347
Upgrade-Insecure-Requests: 1
DNT: 1
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.75 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
Referer: http://localhost:63347/0719_node/demo.html?_ijt=tphpp47dag8jevtqrnq44blv6p
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7
Cookie: Webstorm-9af2238=09820128-3adb-43e4-8242-a6f65c9e523a
空行
name=kebi&password=123

请求报文首行
POST http://localhost:3000/ HTTP/1.1
-请求方式 协议名://主机地址:端口号/？urlencoded编码形式的参数 协议名/版本
请求报文头
Host: localhost:3000
–发送请求的目标主机：主机名:端口号
Connection: keep-alive
–浏览器告诉服务器，浏览器支持长连接。
Content-Length:22
–返回数据的长度(占用空间大小)
Pragma: no-cache
– 不走缓存
Cache-Control: no-cache
– 不走缓存(强缓存)
Origin: http://localhost:63347
– 精简版的Referer 1.防盗链。 2.广告计费
Upgrade-Insecure-Requests: 1
– 浏览器告诉服务器可以使用 https或http1.1
DNT: 1
– 浏览器告诉服务器：禁止跟踪。最终是否跟踪，还得看服务器是否配合。
Content-Type: application/x-www-form-urlencoded
– 浏览器告服务器,浏览器发送数据的类型
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.75 Safari/537.36
– 用户代理：之前该字段用于判断用户的浏览器品牌以及版本，但是现在不好用了。
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3
– 浏览器能够接收资源的类型及优先级，优先级不写默认是1,1的优先级是最高的。
Referer: http://localhost:63347/0719_node/demo.html?_ijt=tphpp47dag8jevtqrnq44blv6p
– 本次请求是“站”在哪里(源站)发出去的。 1.防盗链。 2.广告计费
Accept-Encoding: gzip, deflate, br
– 浏览器告诉服务器，浏览器所能接受的压缩文件类型。
Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7
– 浏览器告诉服务器，浏览器所能支持的语言种类，及权重。
Cookie: Webstorm-9af2238=09820128-3adb-43e4-8242-a6f65c9e523a
– Webstorm给你种下的cookie
空行

请求报文体
name=kebi&password=123
– urlencoded编码形式的请求体参数

备注:
1.form表单的post请求和get请求 参数均以urlencoded形式进行编码
2.get请求将urlencoded编码的参数放入请求地址携带给服务器,所以称之为:查询字符串参数
3.post请求将urlcoded编码的参数放入请求体,所以称之为:请求体参数

5.3 响应报文（给浏览器看的）
HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: text/html;charset=utf-8
Content-Length: 2
ETag: W/“2-eoX0dku9ba8cNUXvu/DyeabcC+s”
Date: Fri, 01 Nov 2019 08:24:19 GMT
Connection: keep-alive
空行
ok
报文首行
HTTP/1.1 200 OK
-协议名/版本 状态码 浏览器自动补上的东西
报文头
X-Powered-By: Express
–服务器所采用的框架
Content-Type: text/html;charset=utf-8
–告诉浏览器,服务器返回资源的类型
Content-Length: 2
–服务器返回数据的长度
ETag: W/“2-eoX0dku9ba8cNUXvu/DyeabcC+s”
–协商缓存必要字段
Date: Fri, 01 Nov 2019 08:24:19 GMT
–相应的日期+时间
Connection: keep-alive
–服务器告诉浏览器,下次请求时或许会采用长连接
空行

请求报文体
ok

5.4 Http状态码(服务器给客户端的东西)

作用
告诉客户端,当前服务器处理请求的结果
http状态码的分类
1xx : 服务器已经收到了本次请求,但是还需要进一步的处理才可以.
2xx : 服务器已经收到了本次请求,且已经分析,处理等…最终处理完毕.
3xx : 服务器已经收到了请求,还需要其他资源,或者重定向到其他文职,甚至交给其他服务器处理.
4xx : 一般指请求的参数或者地址有错误, 出现了服务器无法理解的请求(一般是前端的锅).
5xx : 服务器内部错误(不是因为请求地址或者请求参数不当造成的),无法响应用户请求(一般是后端人员的锅).
常见的几个状态码
200 : 成功(最理想状态)旧的网址
301 : 重定向,被请求的旧资源永久移除了(不可以访问了),将会跳转到一个新资源,搜索引擎在抓取新内容的同时也将旧的网址替换为重定位之后的网址
302 : 重定向,被请求的旧资源还在(仍然可以访问),但会临时跳转到一个新资源,搜索引擎在抓取新的内容而保存
304 : 请求资源重庆想到缓存中(命中了协商缓存)
404 : 资源未找到,一般是客户端请求了不存在的资源
500 : 服务器收到了请求,但是服务器内部产生了错误
502 : 连接服务器失败(服务器在处理一个请求的时候,或许需要其他服务器配合,但是联系 不到其他服务器)

请求报文体
ok