【NodeJS 教学】NodeJS是怎么处理客户端发过来的GET请求参数 (node js获取http get参数) | NodeJS: How To Parse GET Query String — Transcript

Full transcript

1. 0:03Hi 大家好 我是文轩
2. 0:04欢迎再次收看文轩解码
3. 0:07今天NodeJS教学视频来到了第四集
4. 0:10这一集也是NodeJS后端程序开发系列的第四集
5. 0:13如果你还没看前三集
6. 0:15欢迎等一下去到列表里翻看
7. 0:17顺便提醒你一下
8. 0:19每一集的源代码在视频发布后都会上传到Github让你下载
9. 0:23Github的链接就在描述栏里
10. 0:25如果在编写NodeJS程序的时候遇到了问题
11. 0:28也可以去到自学编程社区里分享你的问题
12. 0:31社区里的同学和我都很乐意为你排忧解难
13. 0:35创建这个社区的宗旨
14. 0:37就是想让能大家一起互相学习
15. 0:38一起进步
16. 0:40我们在上一集说到了NodeJS后端程序
17. 0:43怎么识别普通的GET请求
18. 0:45然后针对这些GET请求返回HTML页面
19. 0:48其实GET请求还有另外一种用法
20. 0:50那就是让前端发送GET请求的时候连带着参数
21. 0:54一起发送到NodeJS后端
22. 0:56NodeJS这时候就可以利用
23. 0:58这些GET参数动态获取数据
24. 1:00那这些所谓的参数是怎么体现的呢
25. 1:03我先说说在什么地方我们最常见这些GET参数
26. 1:07相信大家都有网购的习惯
27. 1:09一般我们在搜索某种商品的时候
28. 1:12如果你有在意地址栏里的URL
29. 1:14通常都是一长串的字符串
30. 1:17接下来我会用Amazon.com去演示GET请求参数
31. 1:21其他网站像淘宝天猫和ebay的操作也是大差不差的
32. 1:25当用户在Amazon购物网站输入关键字搜索某件商品的时候
33. 1:29一旦按下Enter键
34. 1:31页面就会跳到搜索成绩
35. 1:33网页的地址从Amazon.com换成了这一个
36. 1:38系统在原来的网址后面添加了一些字符串
37. 1:41我们来拆解一下这个网址
38. 1:43我们将网址分成两个部分
39. 1:45以问号作为分界线
40. 1:48左边是访问的页面
41. 1:49amazon.com/s
42. 1:52这是搜索页面
43. 1:54问号右边就是GET Query String
44. 1:56也就是GET请求参数
45. 1:59这里一共有两个GET参数
46. 2:01它是以&符号作为分界线
47. 2:04第一个GET参数是k
48. 2:06它的值是我们刚搜索的关键字
49. 2:09第二个参数是ref
50. 2:11我猜Amazon是用这个参数记录我们从哪个页面搜索商品
51. 2:15Amazon的后端程序会根据这个k参数
52. 2:18返回和这个关键字相关的商品
53. 2:21如果手动更改这个k参数
54. 2:23你觉得搜索成绩会变吗
55. 2:26嗯
56. 2:27答对了
57. 2:28是会变的
58. 2:29假设我们将k参数的值从laptop换成table
59. 2:33Amazon就会返回和table相关的商品
60. 2:36使用这样带有GET参数的链接有一个好处
61. 2:39那就是除了可以直接从链接里得知搜索关键字
62. 2:43更重要的是
63. 2:44用户可以把链接通过邮件或者信息发给好友
64. 2:47点击就可以直接去到table的搜索页面
65. 2:50而不是让好友先访问Amazon.com
66. 2:53然后在搜索输入框里输入table关键字
67. 2:56这样比发一个链接麻烦得多了
68. 2:58你说是不是
69. 3:00今天实操的部分
70. 3:02我们会用GET请求参数切换页面的语言
71. 3:05我会在上一集源代码的基础上添加这个切换语言的功能
72. 3:09让你体验一下GET请求参数是怎么发送和被处理的
73. 3:13好的
74. 3:14那现在我们进入实操的部分
75. 3:17今天的工作目录是episode04-第四集
76. 3:21先创建episode04-第四集的文件夹
77. 3:34然后从第三集的文件夹复制所有的内容
78. 3:37粘贴到第四集的文件夹里
79. 3:52这个文件夹里有server.js和一个html文件夹
80. 3:57html文件夹里有3个页面
81. 4:00等一下我们会复制这三页
82. 4:02将它转换成中文版本
83. 4:04全选这三个文件
84. 4:07copy
85. 4:10然后paste
86. 4:12重新命名一下新粘贴的文件
87. 4:15将copy换成-zh
88. 4:24这代表中文版本
89. 4:26然后将剩余的页面也改成这样的命名格式
90. 4:41好的
91. 4:41我们的工作目录准备好了
92. 4:43现在可以开始编写代码
93. 4:46首先我们打开刚才复制的文件
94. 4:48将里面的内容换成中文
95. 4:56全选带-zh的文件
96. 5:07先翻译404-zh.html
97. 5:11将里面404 Page not found换成404页面不存在
98. 5:22接下来将About us换成关于我们
99. 5:29最后将index-zh.html里的homepage换成首页
100. 5:42好的
101. 5:42那接下来我们开始编辑server.js
102. 5:56我们之前在createServer里编写了识别GET请求的代码
103. 6:00如果用户请求的页面是主页或者about.html
104. 6:04NodeJS会返回对应的页面
105. 6:06如果请求页面不是主页和about.html
106. 6:09NodeJS就会返回404.html
107. 6:13稍后我们会更改这里的代码
108. 6:15让程序读取GET请求参数
109. 6:17然后根据这些参数切换中英文页面
110. 6:21当用户在浏览器输入这个地址
111. 6:23NodeJS就会显示中文版的about.html
112. 6:27如果把lang等于zh换成lang等于en
113. 6:31页面就会切换到英文版
114. 6:34如果把请求参数拿走
115. 6:36系统会默认显示英文版
116. 6:38GET请求参数lang
117. 6:40是NodeJS程序需要捕捉的数据
118. 6:43那我们要怎么读取URL里的GET请求参数呢
119. 6:47答案就是
120. 6:48使用JavaScript URL object
121. 6:51URL object提供了一些便捷的方法
122. 6:54能让我们快速获得GET请求参数
123. 6:56NodeJS官方也是比较建议
124. 6:58我们使用这样方法获取GET请求参数
125. 7:01获取GET请求参数的代码我们会在这里输入
126. 7:04因为它是属于GET方法的范畴
127. 7:07先创建一个常量保存URL object
128. 7:11const
129. 7:12requestURL
130. 7:15等于
131. 7:17new URL
132. 7:18小括号
133. 7:20URL object需要提供两个参数
134. 7:23第一个是当前访问的页面
135. 7:25这个数据可以从url变量获取
136. 7:29第二个参数是基本URL
137. 7:32基本URL指的是http
138. 7:34127.0.0.1
139. 7:363000
140. 7:38基本URL可以从IP和PORT常量获得
141. 7:42我们把这两个常量移到上面去
142. 8:00然后输入http
143. 8:06冒号
144. 8:07两个//
145. 8:09ip常量
146. 8:12冒号
147. 8:14然后port常量
148. 8:17我们把requestURL打印一下
149. 8:19看看这个URL object有些什么属性
150. 8:33打开Terminal
151. 8:35先去工作目录
152. 8:47然后启动服务器
153. 8:49输入node server.js
154. 8:52按Enter键启动
155. 8:54服务器启动了
156. 8:55现在打开浏览器
157. 8:57浏览我们的首页
158. 8:59复制首页的地址
159. 9:00然后粘贴到地址栏
160. 9:10这是我们刚打印的URL object
161. 9:12这都是URL的属性
162. 9:14有hostname
163. 9:15port
164. 9:16pathname等等
165. 9:18尝试在网址添加一个lang请求参数
166. 9:23问号
167. 9:25lang
168. 9:26等于
169. 9:27zh
170. 9:28然后刷新
171. 9:30先不管这个404
172. 9:32先说说URL object里的属性
173. 9:35这一次
174. 9:36在searchParams属性里的
175. 9:37URLSearchParams object出现了
176. 9:39lang
177. 9:40zh
178. 9:41之前这里是空的
179. 9:43这就说明了URLSearchParams
180. 9:45有我们想要的GET请求参数数据
181. 9:48要想得到lang参数
182. 9:50我们需要调用searchParams里的一个方法(method)
183. 9:52叫get()
184. 9:54我把lang参数值打印出来给你看看
185. 10:03console.log
186. 10:07requestURL
187. 10:10.
188. 10:11searchParams
189. 10:15.
190. 10:16get
191. 10:19lang
192. 10:20通过这个语句
193. 10:22我们就能获取lang参数里的值
194. 10:24去浏览器测试一下
195. 10:26看看NodeJS能不能获取lang请求参数
196. 10:29先重启一下服务器
197. 10:31需要同时按下ctrl 和 c 键
198. 10:36现在来刷新页面
199. 10:40嗯
200. 10:41这个语句是可以获取lang请求参数值
201. 10:44我们尝试把zh换成en
202. 10:50嗯
203. 10:50这里显示en
204. 10:52证明这个get方法是可以获取lang请求参数值的
205. 10:55但是我们现在有一个问题
206. 10:57那就是不管我访问哪一个页面
207. 11:00只要后面加了lang请求参数
208. 11:02NodeJS服务器就会显示Page Not Found
209. 11:05这是为什么呢
210. 11:07我来告诉你
211. 11:08这是因为url判断的部分出现了问题
212. 11:12url常量值现在是包括请求参数的
213. 11:15所以第一和第二个判断语句都没办法被满足
214. 11:19只能跳到else显示404页面
215. 11:21很明显继续使用request.url已经不合适了
216. 11:25那我们还有什么选择呢？
217. 11:27requestURL object里有一个属性叫pathname
218. 11:30我们可以用这个属性获取当前的页面路径
219. 11:33但不包括请求参数
220. 11:36首页的pathname是/
221. 11:38那我们现在去about.html看看嗯
222. 11:48pathname显示/about.html
223. 11:52这正是是我们想要的路径名
224. 11:55这说明可以用requestURL object里的pathname作为替代
225. 11:59先把const换成let
226. 12:02等一下会在下面重设这个url变量
227. 12:11然后在这里输入url
228. 12:13等于
229. 12:15requestURL
230. 12:18.
231. 12:19pathname
232. 12:21来测试一下
233. 12:23看看访问about.html和首页的时候是否显示正确的页面
234. 12:28先重启一下服务器
235. 12:42嗯
236. 12:43现在这两个页面不再显示404
237. 12:46都能正确显示页面的内容
238. 12:48好的
239. 12:48404页面的问题解决了
240. 12:51现在我们要开始根据lang请求参数进行语言切换
241. 12:55先创建lang常量
242. 12:59const
243. 13:01lang
244. 13:02然后赋予它requestURL
245. 13:07.
246. 13:08searchParams
247. 13:11.
248. 13:12get("lang")
249. 13:18定义完lang
250. 13:19还要定义一个变量叫selector
251. 13:22这是用来保存语言字符串
252. 13:25let
253. 13:26selector
254. 13:29接下来插入一个if else语句
255. 13:31用来判断lang参数值
256. 13:41首先要判断lang值是不是等于null
257. 13:46lang
258. 13:48三个等于
259. 13:49null
260. 13:51如果在地址栏里不提供lang请求参数
261. 13:54lang值是null
262. 13:56这正好可以用来设置默认语言
263. 13:58除了判断lang是否等于null
264. 14:01还要判断 lang是否等于en
265. 14:04两条竖线
266. 14:06lang
267. 14:08三个等于
268. 14:10字符串en
269. 14:12如果lang值为null
270. 14:14或者
271. 14:15lang值为en
272. 14:17都需要把selector设置成空字符串
273. 14:25接着再添加一个else if 语句
274. 14:27用来判断lang是否等于zh
275. 14:45如果是等于zh
276. 14:47就将selector设置成-zh
277. 14:58最后在else的部分输入selector
278. 15:01等于
279. 15:03空字符串
280. 15:05如果lang值是其他的值
281. 15:07NodeJS就默认显示英文版
282. 15:10接下来我们需要把selector变量
283. 15:12值入到sendResponse的第一个参数
284. 15:14这样才能让sendResponse函数读取正确的页面
285. 15:18先把index.html删掉
286. 15:28插入反引号
287. 15:30index
288. 15:32然后selector变量
289. 15:37.html
290. 15:41现在第一个参数变成了动态的文件名
291. 15:44当selector是空字符串
292. 15:47文件名就等于index.html
293. 15:49如果selector是-zh
294. 15:52文件名就会变成index
295. 15:54-
296. 15:55zh
297. 15:56把下面的文件名也改一下
298. 15:59记得要用反引号
299. 16:20好的
300. 16:20改完了
301. 16:21把所有的console log都删掉
302. 16:23然后重启服务器开始测试
303. 16:49我们先去英文版的首页
304. 16:51嗯
305. 16:52正确显示英文
306. 16:54现在尝试切换去中文
307. 16:56在后面添加/
308. 16:58问号
309. 17:00lang
310. 17:02等于
311. 17:03zh
312. 17:06嗯
313. 17:07页面这里显示乱码
314. 17:09这是因为页面的字符集(charset)没设置好
315. 17:12所以浏览器才显示不了中文字体
316. 17:15我们需要在HTML文件的头部里添加utf8字符集(charset)
317. 17:20在这里插入<head> tag
318. 17:24然后meta
319. 17:26charset
320. 17:30等于
321. 17:31utf8
322. 17:34其他中文页面也需要添加这些代码
323. 17:37先复制头部的代码
324. 17:39然后粘贴到各个中文页面去
325. 17:52这一次肯定不会再显示乱码
326. 17:54我们刷新页面看看
327. 17:57嗯
328. 17:58现在能正常显示中文标题
329. 18:01那我们去about.html的中文页面看看
330. 18:09然后切换到英文版
331. 18:11将zh改成en
332. 18:15嗯
333. 18:15是能正常切换到英文页面的
334. 18:18最后我们测试一下404页面
335. 18:20随便输入一个页面
336. 18:22abc.html吧
337. 18:28然后再把en换成zh
338. 18:34嗯
339. 18:34完全能依照GET请求参数正常切换页面
340. 18:38刚才我们是手动在地址栏里输入lang请求参数切换语言
341. 18:43现在给你布置一项任务
342. 18:45那就是在index和about页面里添加一个链接
343. 18:48让用户从现在的语言切换到其他的语言
344. 18:51比如说在英文页面添加一个切换到中文页面的链接
345. 18:55完成任务后你还可以在自学编程社区里留个言
346. 18:58告诉我答案
347. 19:00okay
348. 19:01今天关于GET请求参数的分享就到这里
349. 19:03如果觉得视频对你有帮助
350. 19:05记得帮忙点个赞
351. 19:07如果你是第一次观看我的视频
352. 19:09欢迎订阅关注频道
353. 19:11我每周五会定时给你送上和自学编程相关的视频
354. 19:14让你从零基础入门编程
355. 19:17好的
356. 19:17那我们下个视频见
357. 19:19拜拜！