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

 https://youtu.be/7e1wQDBxxek

☕ ☕ ☕ 如果觉得这些教学对你有用，那就请我喝杯咖啡吧！
我会继续为你创作更多免费的编程教学视频，让你轻松入门编程。
✅ 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 大家好 我是文轩 欢迎再次收看文轩解码 今天NodeJS教学视频来到了第四集 这一集也是NodeJS后端程序开发系列的第四集 如果你还没看前三集 欢迎等一下去到列表里翻看 顺便提醒你一下 每一集的源代码在视频发布后都会上传到Github让你下载 Github的链接就在描述栏里 如果在编写NodeJS程序的时候遇到了问题 也可以去到自学编程社区里分享你的问题 社区里的同学和我都很乐意为你排忧解难 创建这个社区的宗旨 就是想让能大家一起互相学习 一起进步 我们在上一集说到了NodeJS后端程序 怎么识别普通的GET请求 然后针对这些GET请求返回HTML页面 其实GET请求还有另外一种用法 那就是让前端发送GET请求的时候连带着参数 一起发送到NodeJS后端 NodeJS这时候就可以利用 这些GET参数动态获取数据 那这些所谓的参数是怎么体现的呢 我先说说在什么地方我们最常见这些GET参数 相信大家都有网购的习惯 一般我们在搜索某种商品的时候 如果你有在意地址栏里的URL 通常都是一长串的字符串 接下来我会用Amazon.com去演示GET请求参数 其他网站像淘宝天猫和ebay的操作也是大差不差的 当用户在Amazon购物网站输入关键字搜索某件商品的时候 一旦按下Enter键 页面就会跳到搜索成绩 网页的地址从Amazon.com换成了这一个 系统在原来的网址后面添加了一些字符串 我们来拆解一下这个网址 我们将网址分成两个部分 以问号作为分界线 左边是访问的页面 amazon.com/s 这是搜索页面 问号右边就是GET Query String 也就是GET请求参数 这里一共有两个GET参数 它是以&符号作为分界线 第一个GET参数是k 它的值是我们刚搜索的关键字 第二个参数是ref 我猜Amazon是用这个参数记录我们从哪个页面搜索商品 Amazon的后端程序会根据这个k参数 返回和这个关键字相关的商品 如果手动更改这个k参数 你觉得搜索成绩会变吗 嗯 答对了 是会变的 假设我们将k参数的值从laptop换成table Amazon就会返回和table相关的商品 使用这样带有GET参数的链接有一个好处 那就是除了可以直接从链接里得知搜索关键字 更重要的是 用户可以把链接通过邮件或者信息发给好友 点击就可以直接去到table的搜索页面 而不是让好友先访问Amazon.com 然后在搜索输入框里输入table关键字 这样比发一个链接麻烦得多了 你说是不是 今天实操的部分 我们会用GET请求参数切换页面的语言 我会在上一集源代码的基础上添加这个切换语言的功能 让你体验一下GET请求参数是怎么发送和被处理的 好的 那现在我们进入实操的部分 今天的工作目录是episode04-第四集 先创建episode04-第四集的文件夹 然后从第三集的文件夹复制所有的内容 粘贴到第四集的文件夹里 这个文件夹里有server.js和一个html文件夹 html文件夹里有3个页面 等一下我们会复制这三页 将它转换成中文版本 全选这三个文件 copy 然后paste 重新命名一下新粘贴的文件 将copy换成-zh 这代表中文版本 然后将剩余的页面也改成这样的命名格式 好的 我们的工作目录准备好了 现在可以开始编写代码 首先我们打开刚才复制的文件 将里面的内容换成中文 全选带-zh的文件 先翻译404-zh.html 将里面404 Page not found换成404页面不存在 接下来将About us换成关于我们 最后将index-zh.html里的homepage换成首页 好的 那接下来我们开始编辑server.js 我们之前在createServer里编写了识别GET请求的代码 如果用户请求的页面是主页或者about.html NodeJS会返回对应的页面 如果请求页面不是主页和about.html NodeJS就会返回404.html 稍后我们会更改这里的代码 让程序读取GET请求参数 然后根据这些参数切换中英文页面 当用户在浏览器输入这个地址 NodeJS就会显示中文版的about.html 如果把lang等于zh换成lang等于en 页面就会切换到英文版 如果把请求参数拿走 系统会默认显示英文版 GET请求参数lang 是NodeJS程序需要捕捉的数据 那我们要怎么读取URL里的GET请求参数呢 答案就是 使用JavaScript URL object URL object提供了一些便捷的方法 能让我们快速获得GET请求参数 NodeJS官方也是比较建议 我们使用这样方法获取GET请求参数 获取GET请求参数的代码我们会在这里输入 因为它是属于GET方法的范畴 先创建一个常量保存URL object const requestURL 等于 new URL 小括号 URL object需要提供两个参数 第一个是当前访问的页面 这个数据可以从url变量获取 第二个参数是基本URL 基本URL指的是http 127.0.0.1 3000 基本URL可以从IP和PORT常量获得 我们把这两个常量移到上面去 然后输入http 冒号 两个// ip常量 冒号 然后port常量 我们把requestURL打印一下 看看这个URL object有些什么属性 打开Terminal 先去工作目录 然后启动服务器 输入node server.js 按Enter键启动 服务器启动了 现在打开浏览器 浏览我们的首页 复制首页的地址 然后粘贴到地址栏 这是我们刚打印的URL object 这都是URL的属性 有hostname port pathname等等 尝试在网址添加一个lang请求参数 问号 lang 等于 zh 然后刷新 先不管这个404 先说说URL object里的属性 这一次 在searchParams属性里的 URLSearchParams object出现了 lang zh 之前这里是空的 这就说明了URLSearchParams 有我们想要的GET请求参数数据 要想得到lang参数 我们需要调用searchParams里的一个方法(method) 叫get() 我把lang参数值打印出来给你看看 console.log requestURL . searchParams . get lang 通过这个语句 我们就能获取lang参数里的值 去浏览器测试一下 看看NodeJS能不能获取lang请求参数 先重启一下服务器 需要同时按下ctrl 和 c 键 现在来刷新页面 嗯 这个语句是可以获取lang请求参数值 我们尝试把zh换成en 嗯 这里显示en 证明这个get方法是可以获取lang请求参数值的 但是我们现在有一个问题 那就是不管我访问哪一个页面 只要后面加了lang请求参数 NodeJS服务器就会显示Page Not Found 这是为什么呢 我来告诉你 这是因为url判断的部分出现了问题 url常量值现在是包括请求参数的 所以第一和第二个判断语句都没办法被满足 只能跳到else显示404页面 很明显继续使用request.url已经不合适了 那我们还有什么选择呢？ requestURL object里有一个属性叫pathname 我们可以用这个属性获取当前的页面路径 但不包括请求参数 首页的pathname是/ 那我们现在去about.html看看嗯 pathname显示/about.html 这正是是我们想要的路径名 这说明可以用requestURL object里的pathname作为替代 先把const换成let 等一下会在下面重设这个url变量 然后在这里输入url 等于 requestURL . pathname 来测试一下 看看访问about.html和首页的时候是否显示正确的页面 先重启一下服务器 嗯 现在这两个页面不再显示404 都能正确显示页面的内容 好的 404页面的问题解决了 现在我们要开始根据lang请求参数进行语言切换 先创建lang常量 const lang 然后赋予它requestURL . searchParams . get("lang") 定义完lang 还要定义一个变量叫selector 这是用来保存语言字符串 let selector 接下来插入一个if else语句 用来判断lang参数值 首先要判断lang值是不是等于null lang 三个等于 null 如果在地址栏里不提供lang请求参数 lang值是null 这正好可以用来设置默认语言 除了判断lang是否等于null 还要判断 lang是否等于en 两条竖线 lang 三个等于 字符串en 如果lang值为null 或者 lang值为en 都需要把selector设置成空字符串 接着再添加一个else if 语句 用来判断lang是否等于zh 如果是等于zh 就将selector设置成-zh 最后在else的部分输入selector 等于 空字符串 如果lang值是其他的值 NodeJS就默认显示英文版 接下来我们需要把selector变量 值入到sendResponse的第一个参数 这样才能让sendResponse函数读取正确的页面 先把index.html删掉 插入反引号 index 然后selector变量 .html 现在第一个参数变成了动态的文件名 当selector是空字符串 文件名就等于index.html 如果selector是-zh 文件名就会变成index - zh 把下面的文件名也改一下 记得要用反引号 好的 改完了 把所有的console log都删掉 然后重启服务器开始测试 我们先去英文版的首页 嗯 正确显示英文 现在尝试切换去中文 在后面添加/ 问号 lang 等于 zh 嗯 页面这里显示乱码 这是因为页面的字符集(charset)没设置好 所以浏览器才显示不了中文字体 我们需要在HTML文件的头部里添加utf8字符集(charset) 在这里插入<head> tag 然后meta charset 等于 utf8 其他中文页面也需要添加这些代码 先复制头部的代码 然后粘贴到各个中文页面去 这一次肯定不会再显示乱码 我们刷新页面看看 嗯 现在能正常显示中文标题 那我们去about.html的中文页面看看 然后切换到英文版 将zh改成en 嗯 是能正常切换到英文页面的 最后我们测试一下404页面 随便输入一个页面 abc.html吧 然后再把en换成zh 嗯 完全能依照GET请求参数正常切换页面 刚才我们是手动在地址栏里输入lang请求参数切换语言 现在给你布置一项任务 那就是在index和about页面里添加一个链接 让用户从现在的语言切换到其他的语言 比如说在英文页面添加一个切换到中文页面的链接 完成任务后你还可以在自学编程社区里留个言 告诉我答案 okay 今天关于GET请求参数的分享就到这里 如果觉得视频对你有帮助 记得帮忙点个赞 如果你是第一次观看我的视频 欢迎订阅关注频道 我每周五会定时给你送上和自学编程相关的视频 让你从零基础入门编程 好的 那我们下个视频见 拜拜！