NodeJS 教学】NodeJS: 实操登录表单提交和后端处理 HTTP Form Post | How to process form data in NodeJS
☕ ☕ ☕ 如果觉得这些教学对你有用，那就请我喝杯咖啡吧！
我会继续为你创作更多免费的编程教学视频，让你轻松入门编程。
✅ 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后端程序
要怎么识别和处理GET请求
GET请求一般用来从服务器获取资源
像下载HTML源代码
照片或者视频等等
学完了GET请求
很自然的接下来就会学POST请求
这两种HTTP请求是最常见的
也是你在后端程序里必须掌握的知识点
学会了GET和POST请求
基本上你就打通了前后端互换信息的通道
这也意味着你正式步入新的里程碑
向全端程序开发挺进
POST请求一般用来向后端程序提交数据
像我们提交登录信息或者创建新账号
程序都是用HTTP POST请求
把数据从客户端传递到后端服务器
后端服务器这时候就需要
从POST请求里提取请求体 Body的数据
等一下我会在实操的环节给你演示这个部分
除了从表单里提交数据
POST请求也能提交JSON或者XML数据
同时也能用POST请求上载文件
这些操作都属于POST请求的范畴
今天实操的环节我们一起来制作一个
简易版的登录页面加后端处理
前端的部分
登录页面有两个输入框
让用户输入用户名和密码
然后在外加一个提交按钮
用来提交表单
后端的部分则负责接收从前端发过来请求数据
然后进行用户名和密码验证
如果验证成功
前端页面就会跳转至登录成功页面
如果登录失败
就跳转至登录失败页面
好的
那现在我们进入实操的部分
今天的工作目录(working directory)
是episode05-第五集
先去创建这个文件夹
今天的教学我会在第四集源代码的基础上再添加3个页面
所以接下来需要把第四集的内容复制到刚创建的文件里
全选这里的内容
copy
然后粘贴到第五集的文件夹里
好的
工作目录准备好了
可以开始编写代码
接下来需要创建三个HTML文件
第一个是login.html
里面会有一个大标题和一个登录表单
第二个文件是login-success.html
里面会有一个大标题显示成功登录
最后一个文件是login-fail.html
用来告诉用户登录失败
我们来创建第一个文件
先将它保存
文件名是login.html
再来创建第二个文件
login-success.html
也将保存一下
最后是login-fail.html
我们先从这个login-fail.html编写代码
插入<html>tag
<body>tag
最后是<h1>tag
在<h1>tag里我们输入Login fail
please try again
login-fail.html的内容搞定了
copy一下这里的内容
然后粘贴到login-success.html
改一下<h1>tag里的内容
将它改为Login success
然后把刚才copy的内容粘贴到login.html
把<h1>tag里的内容换成Login
接着我们在<h1>tag下面插入一个表单Form
我们需要在表单插入两个属性
一个是method, 一个是action
method是用来告诉表单要发POST请求还是GET请求
一般表单是用POST方法提交数据
所以我们method设置成POST
action是用来告诉表单
POST请求要发到后端哪一个URL
我们在这里输入/process-login
表单在提交的时候就会把数据发送到这个URL
接着我们在<form>表单里插入两个输入框和一个提交按钮
这些元素都是用<input>tag去实现
先插入用户名的输入框
<input> tag
type属性是text
text代表显示输入框
然后name是username
这个name属性是用来让后端程序
识别这个数据是用户输入的用户名
再插入一个密码输入框<input> tag
type属性是password
password类别会让浏览器显示密码输入框
接下来设置name属性
等于password
最后再添加一个提交按钮<input>tag
type属性是submit
这代表它是一个提交按钮
然后用value属性设置按钮上的文字
嗯
新添加的三个页面搞定了
现在去server.js添加这三页GET请求的路径
我们需要确认当用户在浏览器浏览这三个页面的时候
是显示正确的内容
而不是404页面不存在提示
好的
现在打开server.js添加新页面的GET请求路径
复制一下这个else if
然后粘贴
再粘贴两次
因为我们一共有三个新的页面
所以需要添加三个新的路径
把about改成login
下一个else if的about也要更改
改成login-success
这里也一样
需要更改
改成login-fail
新的GET路径我们加好了
现在打开Terminal启动NodeJS服务器测试一下这三个新路径
先去到第五集的工作目录
然后输入node server.js启动服务器
服务器启动了
那现在我们去浏览器浏览login.html页面
嗯
能正常显示login.html里的内容
但是忘了给输入框添加label
用户就不知道哪个输入框是用户名
哪个是密码
等一下需要为这个两个输入框添加label
那我们先去看看login-success和login-fail页面
嗯
都能正确显示页面里的内容
那我们现在回到login.html添加label
在输入框的前一行插入<label>tag
内容是Username
然后在<label>tag里添加一个for属性
将它设置成username
这样设置
就是将这个<label>tag和ID为username的输入框绑定
密码输入框也需要添加类似这样的label
label的内容是Password
label for属性是小写password
好的
现在直接去浏览器浏览login.html
这一次不需要重启服务器
因为刚才我们只更改了静态的html文件
并没有更改NodeJS后端的代码
嗯
现在输入框的左边显示了对应的label
这样用户就知道该输入什么信息
接下来我们要让NodeJS接收和处理从登陆表单传递过来的数据
先切换到server.js
我会在else的部分添加处理POST请求的代码
if语句是处理GET请求的代码
基于我们的程序目前只接受两种请求法
所以用if else语句就足够了
好的
现在开始在else的部分编写处理POST请求的逻辑
首先我们需要判断POST请求的路径
之前我们是让登陆表单提交的时候
把数据发到/process-login的路径
所以这里我们需要判断url是否等于/process-login
插入一个if语句
url
三个等于
/process-login
如果是登录表单发过来的数据
那就在下面开始提取请求体里的用户名和密码
现在先来和你讲解一下前端的数据是怎么被传递到后端的
因为这涉及到接下来要写的代码
不理解这个概念
接下来的代码就没办法编写了
前端的数据需要靠互联网传递至后端
你可以把互联网想象成一根大水管
我们的数据
就像水一样
在传输的时候需要通过水管
流向NodeJS后端服务器
这个概念在NodeJS称之为Stream
数据流
前端提交的文本数据在进入水管前
会从文本转换成二进制数据(Binary Data)
然后流向NodeJS后端服务器
在传递的过程中
数据源会被拆分成好几个部分
然后分批发送
最后NodeJS在另一方分批的接收数据
当数据分批抵达NodeJS服务器的时候
这些数据会先被储存在一个缓冲区Buffer
这个缓冲区其实是RAM里被划分出来的一片区域
之后NodeJS会根据情况把缓冲区里的数据传送到程序里
让程序开始读取这些数据
使用缓冲区的好处是它可以控制数据流的速度
当数据流流向后端程序速度超过程序能读取的速度
这些来不及读取的数据就会先保存在缓冲区里
等待程序读取
如果数据流来得慢
数据也需要被保存到缓冲区里
直到数据到达一定的量
才开始让后端程序读取
有了缓冲区
后端程序在读取请求数据的时候就能不慌不忙的有序进行
一个比较常见的Buffer应用场景就是YouTube视频播放器
如果网速慢
在打开视频后
会看到缓冲的提示
这说明的YouTube播放器
在等待缓冲区里的数据达到一定的量
才开始处理并播放视频
如果网速正常
YouTube就会一直不断的下载被拆分成好几个部分的视频
然后保存在缓冲区里
等待播发器读取
好的
相信你现在对数据流怎么个传递和接收有了初步的概念
那我们继续编写处理POST请求的代码
程序是分批读取缓冲区里的数据
所以我们需要创建一个Array
每读取一次
就把刚读取的数据保存在Array里
最后我们会把Array的分段数据合并
变成一个完整的数据
先创建一个变量body
然后将空Array赋予body
这个方括号是用来创建一个空Array
接着我们需要插入两个监听器
一个用来监听缓冲区里的数据是否可以读取
另外一个监听器用来监听请求数据是否已经全部被读取
先插入第一个request监听器
request.on
小括号这个监听器需要提供两个参数
第一个是要监听什么
然后第二个参数是回调函数callback
我们要监听的是data
输入data字符串
一旦缓冲数据可以读取
监听器就会调用第二个参数里的callback
这里输入一个箭头函数
箭头函数需要提供一个参数
将它命名chunk
这个参数会储存部分读取的数据
接下来
我们在函数体力我们将分段读的取数据添加到body array里
body.push()
然后在小括号里输入chunk
第一个监听器好了
接下来再植入第二个监听器
request.on()
现在要监听的是"end"
然后在第二个参数输入箭头函数
这部分很重要
因为这是分段数据从Buffer转换成程序能识别和调用的步骤
现在body array里有我们的分段数据
先打印出来让你看看
console.log(body)
来重启一下服务器
然后去到登录页面提交数据
Terminal这里显示array里有一行数据
但这一行数据我们看不懂
因为它是缓冲Buffer类型数据
等一下我们会将它转换成字符串
我们提交的数据量很小
所以body array只出现一行数据
如果数据量很大
像上传视频
body array就会出现很多行数据
接下来
我们合并一下body array里的数据
body
等于
Buffer.concat()
然后在小括号里输入body
Buffer.concat语句是用来合并body array里的Buffer数据
合并完之后
数据就会变成一个完整的Buffer数据
最后需要将它转换成字符串
直接在后面添加 .toString()就可以了
再重启一下服务器
看看这一回body变量里的数据是不是我们想要的数据
再提交一次数据
嗯
提交上来的数据从我们看不懂的Buffer类型数据变成了字符串
你看
这就是刚才我们在登录表单里提交的用户名和密码
这样NodeJS就能进一步处理这些数据了
接下来我们需要将这个字符串拆分
这时候就需要导入querystring模块了
因为这个模块里有一个函数能帮我们拆分这一行字符串
先创建一个qs变量
等于
require
querystring
然后用qs里的parse函数进行字符串拆分
这个parse函数会返回一个object
我们再一次再次把parse函数返回的object赋予body
现在来看看body里有什么数据
重启一下服务器
然后提交表单
嗯
我们看到这里显示一个object
里面有username和password属性
这样我们就可以调用body.username
和body.password来获取用户名和密码了
好的
接下来我们插入if else语句验证用户名密码
这里我们就不做复杂的验证了
一般账号验证需要连接数据库
今天只要提交的用户名是john
密码是john123
我就算它成功登录
在小括号输入body.username
三个等于
小写john
然后两个&符号
body.password
三个等于
小写john123
如果用户成功登陆
NodeJS就会命令前端跳转至login-success.html页面
要让前端跳转其他页面
我们需要将返回的状态代码设置成301
response.statusCode
等于301
除了设置状态码
还需要设置头部信息
response.setHeader
第一个参数字符串Location
第二个参数是跳转的页面
/login-success.html
复制这两行
然后粘贴到else的部分
因为登录失败后
前端也会跳转至其他页面
把success换成fail
让前端跳转至login-fail.html页面
最后在if else语句下面输入response.end()发送响应
okay
现在我们来测试一下吧
先重启服务器
然后提交登录表单
这一次我们先输入错的账号
嗯
因为输入的用户名密码不对
页面最终跳转至login-fail.html
这一次我们输入正确的用户名和密码
嗯
提交正确的登录信息最终会把我们带到login-success.html
刚才给你演示的登录页面和后端
是为了让你以最快的速度
了解NodeJS是怎么接收和处理来自前端的请求
所以我没在登录页面做过多的美化
你可以将之前用CSS美化过的登录页面
和今天学到的知识点结合
做出一个比较好看和可操作的登录页面
你可以把自己的作品用Codepen
发到自学编程社区里供其他同学欣赏和学习
今天的视频就到这里
希望你看完这集视频后对POST请求又有了新的理解
我们下个视频见
拜拜
Comments
Post a Comment