文章目录
1. 关键知识点简介
-
GET请求用url模块的parse方法解析request.url获取参数
-
POST请求用request.on监听数据的接收,因为post数据是多段分发的,不像GET请求直接发送一段字符串,post数据是异步接收的,我们必须等到post数据接收完成之后再进行处理。
2. 本文最终的目录结构
windows、linux如何自动生成目录结构:
点击查看
│ get.js ----------- 处理get请求
│ index.js ----------- 用户注册登录验证案例
│ post.js ----------- 处理post请求
│ postGet.js ----------- 同时处理get和post请求
│ staticServer.js ----------- 静态服务器模块
│
├─public ----------- 存放mime.json
│ mime.json
│
└─static ----------- 静态文件根目录
form.html ----------- form表单:用户注册(POST方式)
form1.html ----------- form表单:用户登录(GET方式)
postGet.html ---------- form表单(GET和POST数据同时发送)
index.css
index.html ----------- 用户登录注册首页(ajax发送)
index.js
jquery-3.1.1.min.js
post.html ----------- post.js所需的表单
这里不会讲解node静态服务器的搭建,如果想学习请看我上一篇文章:
Node之搭建静态服务器
3. 处理GET请求
新建一个get.js文件:
const http = require('http');
const url = require('url');
http.createServer( (req, res) => {
if(req.url === '/favicon.ico') {
res.end();
return
}
console.log("req.url === > ", req.url);
// get 数据处理
console.log(url.parse(req.url))
let {query:{a, b} } = url.parse(req.url, true);
console.log("a === ", a);
console.log("b === ", b);
res.end("{code: 0}");
}).listen(8080, ()=>{
console.log('running...');
})
node get启动服务器,在网页访问
http://localhost:8080/?a=1&b=2
,服务端打印结果如下:
可以看到,request.url是查询字符串,而url.parse(request.url)将查询字符串转换成对象的形式,最后我们想要的是对象里边的query属性,因此我们用ES6的对象解构语法将参数a和参数b给解构出来。不熟悉ES6请看:
ES6学习地址
因此,
get数据的处理就是通过url模块的parse方法,将字符串转换成对象,再通过query属性拿到参数
。
4. 处理POST请求
新建一个post.js文件:
const http = require('http');
const querystring = require('querystring');
http.createServer( (req, res) => {
if(req.url === '/favicon.ico') {
res.end();
return
}
console.log("req.url === > ", req.url);
// post 数据处理
let str = '';
req.on('data', chunk => {
str += chunk //数据拼接
})
req.on('end', () => {
console.log("post数据接收完毕");
let {a, b} = querystring.parse(str);
console.log('a====>',a);
console.log('b====>',b);
})
res.end("{code: 0}");
}).listen(8080, ()=>{
console.log('running...');
})
static文件夹下,新建一个post.html文件,用来模拟post数据发送:
<!--body内容-->
<form method="POST" action="http://localhost:8080/index">
<div>
<input type="text" name="a">
</div>
<div>
<input type="text" name="b">
</div>
<button type="submit">提交</button>
</form>
node post启动服务器,接着浏览器打开post.html,输入内容点击提交,将POST数据提交到刚刚运行的本地服务器里让其进行处理:
服务端打印结果:
可以看到此时request.url里面就不包含查询字符串了,因为查询字符串被放到了请求体里,在post.js中:
- 过滤掉favicon.ico的影响
-
request.on(“data”, function)的方式不断接收分段发送的POST数据
,最后将结果存放到一个变量
str
中 -
request.on(“end”, function)的方式处理客户端发送过来的POST请求
,
end表示数据已经接收完毕
。接下来的处理跟GET请求的处理大同小异,只是换了个模块而已,通过
querystring模块
的parse方法将str转换成对象,再取里面的值即可。 - response.end()方法结束请求。
5. GET请求与POST请求处理的区别
如下图所示
6. 同时处理POST与GET请求
新建一个postGet.js文件:
const http = require('http');
const querystring = require('querystring');
const url = require('url');
http.createServer( (req, res) => {
if(req.url === '/favicon.ico') {
res.end();
return
}
// get 数据处理
let {query:{c, d} } = url.parse(req.url, true);
console.log("c === ", c);
console.log("d === ", d);
// post 数据处理
let str = '';
req.on('data', chunk => {
str += chunk
})
req.on('end', () => {
console.log("post数据接收完毕");
// console.log("str====>", str);
let {a, b} = querystring.parse(str);
console.log('a====>',a);
console.log('b====>',b);
})
res.end("{code: 0}");
}).listen(8080, ()=>{
console.log('running...');
})
static下新建一个postGet.html文件:
<!--body内容-->
<form method="POST" action="http://localhost:8080/index?c=111&d=222">
<div>
<input type="text" name="a">
</div>
<div>
<input type="text" name="b">
</div>
<button type="submit">提交</button>
</form>
在postGet.html里同时发送GET和POST请求,直接在form表单的action属性添加
查询字符串?c=111&d=222
发送GET请求,
method设置为POST发送表单数据
(POST请求)。
在postGet.js中,我们按照上文所讲的处理方式对POST请求与GET请求进行不同的处理。
浏览器运行postGet.html,填写如下内容:
点击提交,可以看到服务端打印结果:
7. form表单实现注册与登录功能
新建一个处理注册与登录的程序入口index.js:
const http = require('http');
const querystring = require('querystring');
const path = require('path');
const url = require('url');
const staticServer = require('./staticServer');
// 模拟已注册用户
let user = {
zhangsan: '123456',
lisi: 'root',
}
http.createServer( (req, res) => {
if(req.url === '/favicon.ico') {
res.end();
return
}
// 处理get数据
let {pathname, query: {name, password}} = url.parse(req.url, true);
console.log('name====>',name);
console.log('password====>',password);
// 处理post数据
let data = '';
req.on('data', chunk => {
data += chunk;
})
// 数据接收完毕
req.on('end', () => {
let {name: post_name, password: post_password} = querystring.parse(data);
console.log('post_name====>', post_name);
console.log('post_password====>', post_password);
// 响应头 主要为了解决乱码问题
res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
if(pathname === '/login'){
if(user[name] && user[name] === password){
res.end('{"code": 0, "message":"登录成功"}');
}else {
res.end('{"code": 1, "error":"用户名或密码错误"}');
}
}else if(pathname === '/register'){
if(!post_name || !post_password){
res.end('{"code": 1, "error":"用户名或密码为空"}');
}else if(user[post_name]){
res.end('{"code": 1, "error":"用户名存在"}');
}else{
res.end('{"code": 0, "message":"注册成功"}');
// 存进用户列表
user[post_name] = post_password;
}
}else{
staticServer(req, res, path.join(__dirname, 'static'));
}
})
}).listen(8080, () => {
console.log('running...');
})
7.1 功能点分割
-
模块引入:
分别是http(启动服务器)、querystring(处理POST请求)、path(静态服务器的根目录拼接)、url(处理GET请求)、staticServer(自定义静态服务器模块)。
-
模拟数据库用户数据:
这里定义了一个user对象,存放两个用户(用户名和密码),可以模拟数据库已经存放的数据,用于验证。
-
解析数据:
POST请求用querystring模块解析,GET请求用url模块解析
-
设置响应头:
为了防止中文乱码,我们需要设置响应头的编码格式为utf8
-
根据不同行为执行不同处理:
本文定义状态码0为成功,1为失败
-
如果请求路径是/login,则进行登录验证处理,若用户存在且密码正确,则返回成功信息,否则发送失败信息。
-
如果请求路径是/register,则进行用户注册,若用户已经存在与user,则返回用户名已存在,注册失败。否则返回注册成功信息,并将用户信息添加至user。
-
如果请求路径并非前面两种,则默认让其访问静态服务器staticServer,成功则将静态数据展示到网页,失败则返回404页面。
-
其他:
另一方面,细心的人可能还注意到,这里还对了post的name和password进行了重命名,这是为了防止与上面的GET的参数命名冲突。
接下来新建一个用来用户注册的form.html:
<!--body内容-->
<form method="POST" action="http://localhost:8080/register">
<div>
用户名:<input type="text" name="name">
</div>
<div>
密码:<input type="text" name="password">
</div>
<button type="submit">提交</button>
</form>
和用来用户登录的form1.html:
<!--body内容-->
<form method="GET" action="http://localhost:8080/login">
<div>
用户名:<input type="text" name="name">
</div>
<div>
密码:<input type="text" name="password">
</div>
<button type="submit">提交</button>
</form>
7.2 form表单实现注册与登录功能效果展示
node index启动服务器。
首先我们先进行登录验证,由于在index.js中我们已经定义了一个user对象,因此我们可以将user里面的默认数据用来进行登录验证,首先访问我们的首页index.html,如下:
访问localhost:8080/form1.html访问登录页:
用户名输入zhangsan,密码输入123455,点击登录可以看到返回结果:
再用一个不存在的用户数据验证:
接下来进行用户注册,访问localhost:8080/form.html访问注册页:
先注册一个用户名已存在的用户,密码任意,点击提交,可以看到返回结果:
然后注册一个不存在的用户,这里注册用户名wangwu,密码123,返回结果:
接着用我们刚注册的用户信息进行登录:
在这,我们的注册登录功能就已经基本实现了,接下来我们再讲讲ajax发送请求。
8. AJAX实现注册与登录功能
首先我们把静态服务器那一章的三个静态文件index.html、index.js、index.css放置到静态服务器根目录下,
传送门
。 然后修改index.html:
<body>
<h1>hello nodejs</h1>
<form>
<div>
用户名:<input type="text" id="name">
</div>
<div>
密码:<input type="text" id="password">
</div>
<input type="button" value="登录" id="login"/>
<input type="button" value="注册" id="register"/>
</form>
<script src="./index.js"></script>
<script src="./jquery-3.1.1.min.js"></script>
<script>
$('#register').on('click', () => {
$.ajax({
method: 'POST',
url: "http://localhost:8080/register",
data: {name:$("#name").val(), password:$("#password").val()},
dataType: 'json',
success:(data) => {
console.log("data====>",data);
},
error: (err) => {
console.log("err====>",err);
}
})
})
$('#login').on('click', () => {
$.ajax({
method: 'GET',
url: "http://localhost:8080/login",
data: {name:$("#name").val(), password:$("#password").val()},
dataType: 'json',
success:(data) => {
console.log("data====>",data);
},
error: (err) => {
console.log("err====>",err);
}
})
})
</script>
</body>
这里要注意form表单可有可无,而且必须将登录和注册按钮的type设置成button而不是submit,不然它会发送两次请求!一次是form表单submit的默认请求,一次是我们自定义的ajax请求。
我们设计的注册采取的是POST请求,注册则采用GET,因此在发送AJAX请求时要设置metho。
8.1 AJAX实现注册与登录功能演示效果
再输入一个不存在的用户名验证错误数据:
接着我们注册用户:
首先我们输入一个已经存在的用户名进行注册:
然后我们用没注册过的用户名注册,并进行登录:
码了7400+个字总结,肝了好多个小时,如果对您有帮助,可以一键三连或点个赞支持一下噢!谢谢您的支持!祝您生活愉快,幸福美满!