【NodeJS 教學】NodeJS後端程序怎麼知道用戶瀏覽的頁面？ (NodeJS GET請求 入門教學) | How to handle GET requests in NodeJS server — Transcript

Full transcript

1. 0:00Hi 大家好 我是文轩
2. 0:02欢迎再次收看文轩解码
3. 0:04等一下看完这个视频觉得它对你有帮助的话
4. 0:07记得帮忙点个赞
5. 0:08我们在浏览器和手机app里看新闻
6. 0:11看视频
7. 0:12还有刷社交网络
8. 0:13互联网每天都要生成海量的请求响应
9. 0:16每点一次赞
10. 0:17回一次信息
11. 0:18请求响应流程会在你不经意的瞬间完成任务
12. 0:22一般普罗大众
13. 0:23他们不需要知道请求响应的细节
14. 0:26但作为一名Full Stack Developer (全栈/全端程序员)
15. 0:28就必须清楚知道请求响应的周期
16. 0:31客户端 (浏览器、手机app) 是怎么发送请求
17. 0:33后端服务器该怎么响应
18. 0:35我会在接下来的视频和你分享这方面的知识
19. 0:38包括前端页面是怎么发送请求到NodeJS后端服务器
20. 0:42和NodeJS服务器要怎么处理这些请求
21. 0:47如果之前看过这个关于HTTP和HTTPS的视频
22. 0:51都知道客户端和后端服务器
23. 0:53是通过一个叫HTTP的通信协议进行数据传输的
24. 0:57HTTP是HyperText Transfer Protocol的缩写
25. 1:01中文叫超文本传输协议
26. 1:03这个协议规范了客户端和后端服务器
27. 1:05在请求响应的周期里该做些什么
28. 1:08这包括 在传输数据前
29. 1:10客户端和服务器必须先建立一个TCP链接
30. 1:14才可以互相交换信息
31. 1:16还有客户端在发送请求的时候
32. 1:17必须依照HTTP协议里请求格式
33. 1:20不然就会造成服务器没办法识别客户端的请求
34. 1:24换句话说
35. 1:25HTTP协议就是在帮助我们
36. 1:27标准化客户端和后端服务器的数据交换流程
37. 1:31不管是谁家的浏览器和后端服务器
38. 1:33只要它们想进行无障碍数据交换
39. 1:36就必须根据HTTP协议里的规范进行开发
40. 1:39等一下我会切换到Chrome浏览器
41. 1:41带你看看浏览器收发数据的全过程
42. 1:44当我们打开一个网站的首页
43. 1:46像 google.com
44. 1:48就在我们按下Enter键的那一刻
45. 1:50请求响应流程就正式被启动
46. 1:53一般用户是不会知道浏览器究竟在背后做了些什么
47. 1:56今天我就使用Chrome开发者工具
48. 1:58为你解密整个过程
49. 2:00先打开开发者工具
50. 2:03右键
51. 2:04Inspect
52. 2:06然后点击Network Panel
53. 2:12这里等一下会显示网页的请求和响应
54. 2:16现在去到地址栏这里输入google.com
55. 2:20当我下按Enter键
56. 2:22右边的列表就会出现各种请求
57. 2:26嗯
58. 2:27你看这个列表
59. 2:28满满的请求
60. 2:30我们来点击第一个请求
61. 2:34从这个Header Panel里我们能看到这是一个GET请求
62. 2:37我们刚才在地址栏里输入google.com
63. 2:40其实是命令浏览器去google.com
64. 2:42获取首页的HTML源代码
65. 2:45一般GET请求主是要从后端服务器里获取数据
66. 2:49点击Response看看返回的数据
67. 2:52嗯
68. 2:53这里显示的是首页HTML源代码
69. 2:56浏览器会根据这些源代码进行页面渲染
70. 2:59显示最终的页面
71. 3:01在General的部分还有其他的属性
72. 3:04像Status Code状态码
73. 3:07200代表请求成功
74. 3:09服务器正常返回该返回的数据
75. 3:11下面这里还有请求和响应的头部信息
76. 3:18我说一下Response头部信息里的Content Type
77. 3:22这里显示text/html
78. 3:25说明返回的数据是文本类别的HTML源代码
79. 3:29我们除了能通过GET获取HTML源代码
80. 3:32也可以通过GET请求获取
81. 3:34像视频(video/mp4)和
82. 3:35JSON数据(application/json)
83. 3:36然后浏览器会根据返回的Content Type
84. 3:38做适当的渲染
85. 3:40剩余的请求有些是去下载图片
86. 3:51有些则是下载JavaScript文件
87. 3:55它们都是用GET请求去获取这些资源
88. 3:58刚才演示了浏览器是怎么通过GET请求去获取HTML页面
89. 4:02我会在接下来的实操部分
90. 4:04从后端服务器的角度切入
91. 4:06解密后端服务器怎么针对客户端
92. 4:08发过来的请求进行处理和反馈
93. 4:11okay
94. 4:12那现在切换到VS Code编辑器
95. 4:17打开Terminal
96. 4:19先去到工作目录(working directory)
97. 4:21工作目录指的是当前工作的文件夹
98. 4:24我们今天的所有的文件都会保存在这个工作目录里
99. 4:27NodeJS程序也会从这里启动
100. 4:30今天的工作目录是episode03-第三集
101. 4:36里面有一个server.js文件
102. 4:39这是在第二集里编写的server.js
103. 4:41我把它复制到了这个目录
104. 4:44等一下我会在这个server.js基础上添加新的代码
105. 4:50快速给你温习一下这些代码
106. 4:54代码一开始导入了HTTP模块
107. 4:57然后用HTTP模块创建NodeJS后端服务器
108. 5:01服务器会在运行时监听端口3000
109. 5:04从这个端口收集来自客户端的请求
110. 5:08但是这个服务器不管你访问哪一个页面
111. 5:10它都始终如一的在页面显示一样的响应
112. 5:13这样的服务器不太实用
113. 5:15所以等一下我会针对这个响应做一些更改
114. 5:19接下来我们会在NodeJS服务器里添加3个HTML文件
115. 5:23服务器会根据用户想访问的页面读取对应的HTML文件
116. 5:27然后把这些HTML源代码返回到客户端
117. 5:31好的
118. 5:32现在开始编写代码
119. 5:34我们要添加3个新文件
120. 5:36第一个是index.html
121. 5:39第二个是about.html
122. 5:41最后一个是404.html
123. 5:44index.html是我们的首页
124. 5:47里面会有一个大标题显示 "Homepage"
125. 5:50about.html 里也会有一个大标题
126. 5:53这个大标题显示 "About us"
127. 5:55还有最后一个404.html用来显示页面不存
128. 6:00"404 - Page not found"
129. 6:03先创建第一个文件
130. 6:06保存一下
131. 6:08在工作目录里创建一个新的文件夹
132. 6:12等一下把所有的HTML文件都统一保存在这个文件夹里
133. 6:16将这个文件夹命名html
134. 6:19然后第一个HTML文件命名index.html
135. 6:26再创建about.html
136. 6:39最后一个是404.html
137. 6:54好的
138. 6:55所有的HTML文件已经创建好了
139. 6:58接下来我们开始在每个文件里添加HTML源代码
140. 7:02先插入基本html代码
141. 7:04<html> tag
142. 7:06<body>主体
143. 7:09和<h1>tag用来显示大标题
144. 7:13然后把这些代码复制到其他的页面里
145. 7:15这样就不要重新输入了
146. 7:29回到index.html
147. 7:31首页的大标题是Homepage
148. 7:36保存一下
149. 7:39about.html的标题是About us
150. 7:43最后在404.html里显示
151. 7:46404 - Page Not Found
152. 7:54okay
153. 7:54HTML页面的部分我们就完成了
154. 7:57现在要开始NodeJS后端的部分
155. 8:00打开server.js文件
156. 8:20我们会在监听器这里识别前端发过来的请求
157. 8:24request object里有一个属性叫url
158. 8:27它可以返回请求页面的url
159. 8:29尝试打印request.url看看
160. 8:32然后再启动服务器
161. 8:54现在去浏览器输入随便随便访问一个页面
162. 9:23这是我刚才在浏览器访问的页面
163. 9:25hello.html和world.html
164. 9:29每当用户访问页面
165. 9:30NodeJS后端程序都知道用户想要访问哪一个页面
166. 9:34request里也有一个属性叫method
167. 9:37可以用来识别请求方法是GET还是POST
168. 9:41打印request.method看看
169. 9:47重启服务器
170. 9:54刷新一下页面
171. 9:56嗯
172. 9:57这是一个GET请求
173. 9:59那我们访问首页看看
174. 10:04嗯
175. 10:04这也是GET请求
176. 10:07所以现在我们知道如果搭配使用
177. 10:09request.url和request.method
178. 10:11就可以在NodeJS里得到用户请求的页面
179. 10:14还有请求的方法
180. 10:16接下来
181. 10:17我们用if else语句来判断用户访问哪一个页面
182. 10:20然后根据请求返回对应的HTML页面
183. 10:24先插入第一个if else语句
184. 10:34在if条件判断语句里判断response.method
185. 10:37是不是"等于"大写GET
186. 10:43如果是GET请求
187. 10:45再插入一个if else 语句
188. 10:47这是用来判断用户是访问主页
189. 10:50about.html还是其他的页面
190. 10:57我们把request.method和request.url赋予变量
191. 11:00方便等一下调用
192. 11:02const
193. 11:04method
194. 11:06等于
195. 11:08request.method
196. 11:13const
197. 11:15url
198. 11:16等于 request.url
199. 11:24把request.method换成method
200. 11:37然后在这里判断url是否等于斜杠
201. 11:44这个斜杠代表根目录
202. 11:46也就是主页的意思
203. 11:50接下来要判断url是否等于/about.html
204. 11:55我们需要在else 后面加一个if
205. 12:00然后在小括号插入url
206. 12:04三个等于
207. 12:06斜杠
208. 12:07about.html
209. 12:09最后添加一个else语句
210. 12:11如果用户访问的页面既不是主页
211. 12:14也不是about.html
212. 12:16NodeJS就返回404
213. 12:17告诉用户想访问的网页不存在
214. 12:20好的
215. 12:21所有的条件判断都到位了
216. 12:23那接下来我们要做的是
217. 12:25根据请求URL
218. 12:27去读取对应的HTML源代码
219. 12:29然后把这些源代码通过response object里end()函数
220. 12:32发给用户的浏览器
221. 12:34先创建一个sendResponse函数
222. 12:37用来统一读取和发送HTML源代码
223. 12:41const
224. 12:42sendResponse
225. 12:45等于
226. 12:47然后输入箭头函数
227. 12:55sendResponse函数需要3个参数
228. 12:57第一个是文件名
229. 13:01第二个是返回给用户的状态码
230. 13:08第三个参数是response object
231. 13:14要读取服务器里的文件
232. 13:16我们需要先导入fs模块
233. 13:18fs是file system的缩写
234. 13:31导入fs模块后
235. 13:32就可以使用fs.readFile函数读取HTML文件
236. 13:39readFile函数需要提供两个参数
237. 13:41第一个是文件名
238. 13:43第二个回调函数
239. 13:45回调函数会在成功读取文件后被调用
240. 13:48文件名我们可以从filename参数这里获得
241. 13:52readFile需要我们提供文件的路径
242. 13:54不能只提供文件名
243. 13:56这里输入
244. 13:58点
245. 13:59点代表当前目录
246. 14:01也是就是我们的episode03文件夹
247. 14:05然后斜杠html
248. 14:08在输入一个斜杠
249. 14:10然后才输入文件名
250. 14:13当程序运行的时候
251. 14:15readFile函数就会去episode03文件夹里的
252. 14:18html文件夹读取对应的HTML文件
253. 14:22第二个参数是回调函数
254. 14:24先输入箭头函数
255. 14:31readFile回调函数有两个参数
256. 14:34第一个是error
257. 14:37另外一个是data
258. 14:41能猜到这两个参数的作用吗
259. 14:44如果成功读取文件
260. 14:46error值是undefined
261. 14:48data会被赋予文件内容
262. 14:51要是在读取文件时报错
263. 14:53error就会被赋予报错信息
264. 14:56在函数体里插入一个if else
265. 14:58用来判断readFile是否成功读取文件
266. 15:08然后在小括号里输入error
267. 15:13一般在NodeJS里都会先判断程序有没有报错
268. 15:16这是因为如果readFile出现错误
269. 15:19这就会优先被处理
270. 15:21如果报错的话
271. 15:22我们将返回的状态码设置成500
272. 15:33然后用response.end()函数发送报错信息
273. 15:37一般后端程序不会把实际的报错信息返回给用户
274. 15:40只会笼统的告诉用户发生了什么问题
275. 15:43这是避免暴露过多的服务器信息
276. 15:47我们在end函数里输入简短的报错信息就可以了
277. 15:50“Sorry internal error”
278. 15:58我们还需要设置response object的Content Type
279. 16:01告诉浏览器返回的信息是什么格式
280. 16:04Sorry internal error是文本
281. 16:06可以这样设置
282. 16:08response.setHeader
283. 16:17Content Type
284. 16:23text斜杠plain
285. 16:28if的部分好了
286. 16:30else的部分和if差不多
287. 16:32也需要设置状态码和内容格式
288. 16:35输入response.statusCode
289. 16:45等于 statusCode
290. 16:48这个statusCode是从参数得来
291. 16:51接着设置内容格式
292. 16:53response.setHeader
293. 17:04Content-Type
294. 17:11text
295. 17:12html
296. 17:14text斜杠html代表服务器会发送HTML源代码
297. 17:19最后用end函数发送读取的data
298. 17:23response.end
299. 17:27data
300. 17:30好的
301. 17:31sendResponse函数搞定了
302. 17:33现在要开始调用这个函数
303. 17:35先去请求页面判断的部分
304. 17:39然后在请求页面等于主页的
305. 17:41if语句里输入
306. 17:42sendResponse
307. 17:46小括号
308. 17:49第一个参数输入index.html字符串
309. 17:53这是我们要读取的首页HTML文件
310. 17:57第二个参数输入200状态码
311. 18:00第三个参数输入response object
312. 18:07接着这里也输入sendResponse
313. 18:14要读取的文件是about.html
314. 18:19返回的状态码是200
315. 18:23然后response object
316. 18:28页面不存在的部分
317. 18:30输入sendResponse
318. 18:35然后读取404.html
319. 18:42状态码是404
320. 18:44表示页面不存在
321. 18:46这个状态码估计之前在别人的网站也看过
322. 18:50然后最后一个参数是response object
323. 18:54好的
324. 18:55现在我们来测试一下刚才编写的代码
325. 18:57先把这一行删掉
326. 19:04然后重启服务器
327. 19:09在浏览器打开首页
328. 19:14嗯
329. 19:14现在是显示Homepage大标题
330. 19:17不再是之前的Hello From NodeJS Server
331. 19:29状态码是200
332. 19:38去about.html看看
333. 19:45嗯，也是显示About us大标题
334. 19:49状态码也是200
335. 19:51现在测试一下不存在的页面
336. 19:54尝试打开hello.html
337. 20:02嗯
338. 20:03浏览器会显示页面不存在的信息
339. 20:07返回的状态码是404
340. 20:09是对的
341. 20:13好的
342. 20:13今天关于GET请求的入门篇就分享到这里
343. 20:16下一集
344. 20:17我会继续和你聊GET请求偏高级一点的应用
345. 20:20看看GET请求还能变出什么花样
346. 20:23如果你是第一次观看我的编程教学视频
347. 20:25欢迎你点赞分享和关注频道
348. 20:28我会在每周五定时给你推送和编程相关的视频
349. 20:31让你从零基础轻松入门编程
350. 20:34好的
351. 20:34那我们下个视频见
352. 20:36拜拜