【NodeJS 教學】NodeJS後端程序怎麼知道用戶瀏覽的頁面？ (NodeJS GET請求 入門教學) | How to handle GET requests in NodeJS server
☕ ☕ ☕ 如果觉得这些教学对你有用，那就请我喝杯咖啡吧！
我会继续为你创作更多免费的编程教学视频，让你轻松入门编程。
✅ https://bit.ly/3kCOpFK
✅ (免费) JavaScript教程系列：
https://bit.ly/310cHle
✅ 更多精彩的JavaScript入门课程：
http://bit.ly/js-for-beginners
✅ JavaScript相关书籍：
1：The Definitive Guide: Master the World's Most-Used Programming Language - 7th Edition (强烈推荐👍)
https://amzn.to/31s30uH
✅（通告）”Codetisan 自学编程社区“ 已经正式开通啦，三人行必有我师，同学们再也不用独自一人闷头自学编程了，快去社区里和其他小伙伴们互动吧！
▶︎ https://bit.ly/2AHylzN
🔆订阅我的YouTube频道，让你从一个0基础编程的菜鸟快速成为编程大师！🔆
http://bit.ly/2TBkXo1
▶︎ 文轩解码更精彩的平台 ◀︎
‣‣ Blogger ：https://bit.ly/2yMz0PC
‣‣ Twitter: https://bit.ly/2R74FS1
‣‣ Facebook: https://bit.ly/35crcmz
‣‣ Instagram: https://bit.ly/2KH6Wjw
‣‣ Github: https://bit.ly/2SHtsx4
#nodejs教学 #编程入门 #javascript
文字版内容：
Hi 大家好 我是文轩
欢迎再次收看文轩解码
等一下看完这个视频觉得它对你有帮助的话
记得帮忙点个赞
我们在浏览器和手机app里看新闻
看视频
还有刷社交网络
互联网每天都要生成海量的请求响应
每点一次赞
回一次信息
请求响应流程会在你不经意的瞬间完成任务
一般普罗大众
他们不需要知道请求响应的细节
但作为一名Full Stack Developer (全栈/全端程序员)
就必须清楚知道请求响应的周期
客户端 (浏览器、手机app) 是怎么发送请求
后端服务器该怎么响应
我会在接下来的视频和你分享这方面的知识
包括前端页面是怎么发送请求到NodeJS后端服务器
和NodeJS服务器要怎么处理这些请求
如果之前看过这个关于HTTP和HTTPS的视频
都知道客户端和后端服务器
是通过一个叫HTTP的通信协议进行数据传输的
HTTP是HyperText Transfer Protocol的缩写
中文叫超文本传输协议
这个协议规范了客户端和后端服务器
在请求响应的周期里该做些什么
这包括 在传输数据前
客户端和服务器必须先建立一个TCP链接
才可以互相交换信息
还有客户端在发送请求的时候
必须依照HTTP协议里请求格式
不然就会造成服务器没办法识别客户端的请求
换句话说
HTTP协议就是在帮助我们
标准化客户端和后端服务器的数据交换流程
不管是谁家的浏览器和后端服务器
只要它们想进行无障碍数据交换
就必须根据HTTP协议里的规范进行开发
等一下我会切换到Chrome浏览器
带你看看浏览器收发数据的全过程
当我们打开一个网站的首页
像 google.com
就在我们按下Enter键的那一刻
请求响应流程就正式被启动
一般用户是不会知道浏览器究竟在背后做了些什么
今天我就使用Chrome开发者工具
为你解密整个过程
先打开开发者工具
右键
Inspect
然后点击Network Panel
这里等一下会显示网页的请求和响应
现在去到地址栏这里输入google.com
当我下按Enter键
右边的列表就会出现各种请求
嗯
你看这个列表
满满的请求
我们来点击第一个请求
从这个Header Panel里我们能看到这是一个GET请求
我们刚才在地址栏里输入google.com
其实是命令浏览器去google.com
获取首页的HTML源代码
一般GET请求主是要从后端服务器里获取数据
点击Response看看返回的数据
嗯
这里显示的是首页HTML源代码
浏览器会根据这些源代码进行页面渲染
显示最终的页面
在General的部分还有其他的属性
像Status Code状态码
200代表请求成功
服务器正常返回该返回的数据
下面这里还有请求和响应的头部信息
我说一下Response头部信息里的Content Type
这里显示text/html
说明返回的数据是文本类别的HTML源代码
我们除了能通过GET获取HTML源代码
也可以通过GET请求获取
像视频(video/mp4)和
JSON数据(application/json)
然后浏览器会根据返回的Content Type
做适当的渲染
剩余的请求有些是去下载图片
有些则是下载JavaScript文件
它们都是用GET请求去获取这些资源
刚才演示了浏览器是怎么通过GET请求去获取HTML页面
我会在接下来的实操部分
从后端服务器的角度切入
解密后端服务器怎么针对客户端
发过来的请求进行处理和反馈
okay
那现在切换到VS Code编辑器
打开Terminal
先去到工作目录(working directory)
工作目录指的是当前工作的文件夹
我们今天的所有的文件都会保存在这个工作目录里
NodeJS程序也会从这里启动
今天的工作目录是episode03-第三集
里面有一个server.js文件
这是在第二集里编写的server.js
我把它复制到了这个目录
等一下我会在这个server.js基础上添加新的代码
快速给你温习一下这些代码
代码一开始导入了HTTP模块
然后用HTTP模块创建NodeJS后端服务器
服务器会在运行时监听端口3000
从这个端口收集来自客户端的请求
但是这个服务器不管你访问哪一个页面
它都始终如一的在页面显示一样的响应
这样的服务器不太实用
所以等一下我会针对这个响应做一些更改
接下来我们会在NodeJS服务器里添加3个HTML文件
服务器会根据用户想访问的页面读取对应的HTML文件
然后把这些HTML源代码返回到客户端
好的
现在开始编写代码
我们要添加3个新文件
第一个是index.html
第二个是about.html
最后一个是404.html
index.html是我们的首页
里面会有一个大标题显示 "Homepage"
about.html 里也会有一个大标题
这个大标题显示 "About us"
还有最后一个404.html用来显示页面不存
"404 - Page not found"
先创建第一个文件
保存一下
在工作目录里创建一个新的文件夹
等一下把所有的HTML文件都统一保存在这个文件夹里
将这个文件夹命名html
然后第一个HTML文件命名index.html
再创建about.html
最后一个是404.html
好的
所有的HTML文件已经创建好了
接下来我们开始在每个文件里添加HTML源代码
先插入基本html代码
<html> tag
<body>主体
和<h1>tag用来显示大标题
然后把这些代码复制到其他的页面里
这样就不要重新输入了
回到index.html
首页的大标题是Homepage
保存一下
about.html的标题是About us
最后在404.html里显示
404 - Page Not Found
okay
HTML页面的部分我们就完成了
现在要开始NodeJS后端的部分
打开server.js文件
我们会在监听器这里识别前端发过来的请求
request object里有一个属性叫url
它可以返回请求页面的url
尝试打印request.url看看
然后再启动服务器
现在去浏览器输入随便随便访问一个页面
这是我刚才在浏览器访问的页面
hello.html和world.html
每当用户访问页面
NodeJS后端程序都知道用户想要访问哪一个页面
request里也有一个属性叫method
可以用来识别请求方法是GET还是POST
打印request.method看看
重启服务器
刷新一下页面
嗯
这是一个GET请求
那我们访问首页看看
嗯
这也是GET请求
所以现在我们知道如果搭配使用
request.url和request.method
就可以在NodeJS里得到用户请求的页面
还有请求的方法
接下来
我们用if else语句来判断用户访问哪一个页面
然后根据请求返回对应的HTML页面
先插入第一个if else语句
在if条件判断语句里判断response.method
是不是"等于"大写GET
如果是GET请求
再插入一个if else 语句
这是用来判断用户是访问主页
about.html还是其他的页面
我们把request.method和request.url赋予变量
方便等一下调用
const
method
等于
request.method
const
url
等于 request.url
把request.method换成method
然后在这里判断url是否等于斜杠
这个斜杠代表根目录
也就是主页的意思
接下来要判断url是否等于/about.html
我们需要在else 后面加一个if
然后在小括号插入url
三个等于
斜杠
about.html
最后添加一个else语句
如果用户访问的页面既不是主页
也不是about.html
NodeJS就返回404
告诉用户想访问的网页不存在
好的
所有的条件判断都到位了
那接下来我们要做的是
根据请求URL
去读取对应的HTML源代码
然后把这些源代码通过response object里end()函数
发给用户的浏览器
先创建一个sendResponse函数
用来统一读取和发送HTML源代码
const
sendResponse
等于
然后输入箭头函数
sendResponse函数需要3个参数
第一个是文件名
第二个是返回给用户的状态码
第三个参数是response object
要读取服务器里的文件
我们需要先导入fs模块
fs是file system的缩写
导入fs模块后
就可以使用fs.readFile函数读取HTML文件
readFile函数需要提供两个参数
第一个是文件名
第二个回调函数
回调函数会在成功读取文件后被调用
文件名我们可以从filename参数这里获得
readFile需要我们提供文件的路径
不能只提供文件名
这里输入
点
点代表当前目录
也是就是我们的episode03文件夹
然后斜杠html
在输入一个斜杠
然后才输入文件名
当程序运行的时候
readFile函数就会去episode03文件夹里的
html文件夹读取对应的HTML文件
第二个参数是回调函数
先输入箭头函数
readFile回调函数有两个参数
第一个是error
另外一个是data
能猜到这两个参数的作用吗
如果成功读取文件
error值是undefined
data会被赋予文件内容
要是在读取文件时报错
error就会被赋予报错信息
在函数体里插入一个if else
用来判断readFile是否成功读取文件
然后在小括号里输入error
一般在NodeJS里都会先判断程序有没有报错
这是因为如果readFile出现错误
这就会优先被处理
如果报错的话
我们将返回的状态码设置成500
然后用response.end()函数发送报错信息
一般后端程序不会把实际的报错信息返回给用户
只会笼统的告诉用户发生了什么问题
这是避免暴露过多的服务器信息
我们在end函数里输入简短的报错信息就可以了
“Sorry internal error”
我们还需要设置response object的Content Type
告诉浏览器返回的信息是什么格式
Sorry internal error是文本
可以这样设置
response.setHeader
Content Type
text斜杠plain
if的部分好了
else的部分和if差不多
也需要设置状态码和内容格式
输入response.statusCode
等于 statusCode
这个statusCode是从参数得来
接着设置内容格式
response.setHeader
Content-Type
text
html
text斜杠html代表服务器会发送HTML源代码
最后用end函数发送读取的data
response.end
data
好的
sendResponse函数搞定了
现在要开始调用这个函数
先去请求页面判断的部分
然后在请求页面等于主页的
if语句里输入
sendResponse
小括号
第一个参数输入index.html字符串
这是我们要读取的首页HTML文件
第二个参数输入200状态码
第三个参数输入response object
接着这里也输入sendResponse
要读取的文件是about.html
返回的状态码是200
然后response object
页面不存在的部分
输入sendResponse
然后读取404.html
状态码是404
表示页面不存在
这个状态码估计之前在别人的网站也看过
然后最后一个参数是response object
好的
现在我们来测试一下刚才编写的代码
先把这一行删掉
然后重启服务器
在浏览器打开首页
嗯
现在是显示Homepage大标题
不再是之前的Hello From NodeJS Server
状态码是200
去about.html看看
嗯，也是显示About us大标题
状态码也是200
现在测试一下不存在的页面
尝试打开hello.html
嗯
浏览器会显示页面不存在的信息
返回的状态码是404
是对的
好的
今天关于GET请求的入门篇就分享到这里
下一集
我会继续和你聊GET请求偏高级一点的应用
看看GET请求还能变出什么花样
如果你是第一次观看我的编程教学视频
欢迎你点赞分享和关注频道
我会在每周五定时给你推送和编程相关的视频
让你从零基础轻松入门编程
好的
那我们下个视频见
拜拜
Comments
Post a Comment