Node学习(三)03-处理POST请求、静态资源、404——Postman使用和设置参数&POST请求-浏览器提交数据给服务器&res.statusCode设置状态码&fs.readFile读取文件
2.4.4 处理浏览器POST方式提交的数据
浏览器要发送POST方式的请求比较麻烦,所以这里可以使用POSTMAN软件来模拟请求。
上一节,我们根据不同的url地址,对不同的请求,做出了不同的响应。但这些请求都是GET方式的请求,如果浏览器使用POST方式向服务器发送了一次请求,又该如何处理呢?
POST请求一般会提交数据给服务器,服务器在接收数据的时候也是分块接收的
1、初始结构
1.1、Postman使用界面和设置请求参数
1.2、设置本地node的接口js文件
061-处理POST请求.js
const http = require('http');
const server = http.createServer();
server.listen(3000, () => console.log('启动了'));
// 只要有浏览器发来请求,就会触发下面的事件
server.on('request', (req, res) => {
console.log('123');
console.log(req.method); // POST
});
1.3、打开终端,执行命令
node ./061-处理POST请求.js
此时显示,默认请求方式GET
打开Postman使用界面,设置请求参数,点击send按钮
Postman显示上图
node终端显示下图
2、完整结构
062-处理POST请求.js
const http = require('http');
const server = http.createServer();
server.listen(3000, () => console.log('启动了'));
// 只要有浏览器发来请求,就会触发下面的事件
server.on('request', (req, res) => {
// console.log('123');
// console.log(req.method); // POST
// POST请求,意思是浏览器提交数据给服务器
// 服务器肯定要接收这些数据,并把这些数据保存
// 如何接收POST提交过来的数据
/**
* 1. 给req注册data事件,当有数据提交过来就会触发,事件的作用是接收数据,接收大量数据的时候,是分块接收的
* 2. 给req注册end事件,当数据全部接收完毕,会触发
*/
// 先定义一个空字符串,里面准备存放接收到的数据
let str = '';
req.on('data', (chunk) => {
str += chunk; // 把接收到的一块数据拼接到str中
});
req.on('end', () => {
console.log(str); // id=1&name=zs&age=43
});
});
打开终端,执行命令
node ./062-处理POST请求.js
打开Postman使用界面,设置请求参数,点击send按钮
Postman显示上图
node终端显示下图
2.4.5 处理静态资源
- 静态资源指的是html文件中链接的外部资源,如css、js、image文件等等。
- 如果请求的a.html 文件中链接了外部文件(静态资源),比如css、images、js文件等,浏览器会自动再次发送请求,向服务器请求这些文件
- 服务器要判断浏览器请求的路径是否是静态资源,如果是静态资源把静态资源的内容返回给浏览器
前面已经统一处理了(2.4.3 根据不同 url 地址处理不同请求)。这里不在编写代码。
建议每个响应都告诉客户端我给你发送的 Content-Type 内容类型是什么,这里先保留,不用实现。
为不同的文件类型设置不同的 Content-Type
- .html:text/html
- .css:text/css
- .js:application/javascript
- .jpg:image/jpg
response.setHeader('Content-Type', 'text/css');
浏览器请求了静态资源文件,服务器就得做出响应,而且还要指定响应数据的类型,否则浏览器会把字符串当做纯文本处理。
// 案例中,使用的是index.html
// index.html中引入了index.css和index2.css
// index.html中使用了一张图片
// 下面是服务器接受到请求之后的处理方式
const http = require('http');
const fs = require('fs');
const server = http.createServer();
server.listen(5000, () => console.log('server start'));
server.on('request', (req, res) => {
// 判断,如果请求的是index.html,则读取文件,并返回内容
if (req.url === '/index.html') {
fs.readFile('./index.html', 'utf-8', (err, data) => {
if (err) {
return console.log(err);
}
res.end(data);
});
// } else if (path.extname(req.url) === '.css') {
} else if (req.url.endsWith('.css')) {
// 读取css文件,并且返回给浏览器
fs.readFile('.' + req.url, 'utf-8', (err, data) => {
if (err) {
return console.log(err);
}
res.end(data);
});
} else if (req.url.endsWith('.jpg') || req.url.endsWith('.png')) {
// 读取图片,并且返回给浏览器
// 读取图片的时候,不能转换成utf-8
fs.readFile('.' + req.url, (err, data) => {
if (err) {
return console.log(err);
}
res.end(data);
});
}
});
2.4.6 处理 404
-
404是一个响应状态码,表示请求的资源不存在
-
如果请求未处理的路径,服务器不会做任何的响应,此时浏览器处于等待状态
-
如果浏览器请求未处理的路径,统一设置响应码
404
,并做友好提示// 设置状态码为404 response.statusCode = 404; response.end('对不起,您请求的页面未找到');
-
具体做法:
- 当有浏览器的请求到达服务器,服务器使用fs.access()判断,判断浏览器请求的文件是否存在
- 如果请求的文件存在,则读取并返回这个文件;如果请求的文件不存在,则返回404
// 文件 07-处理404.js const fs = require('fs'); // 1. 加载http模块 const http = require('http'); // 2. 创建server对象 const server = http.createServer(); // 3. 监听端口,开启服务 server.listen(3000, () => console.log('又启动了')); // 4. 注册server的request事件,当浏览器发来请求会触发这个事件 server.on('request', (req, res) => { // res.end('hello,我是服务器'); // 下面的代码,无论浏览器请求什么,都返回index.html。是不对的 console.log(req.url); // 先判断浏览器请求的文件存在还是不存在,如果存在,则读取并返回;如果不存在则告诉浏览器404 fs.access('./manager' + decodeURIComponent(req.url), (err) => { if (err) { // 说明不存在 res.statusCode = 404; res.setHeader('Content-Type', 'text/html; charset=utf-8'); res.end('小朋友,你走错路了'); } else { // 说明文件存在,则读取文件,并响应给浏览器 fs.readFile('./manager' + decodeURIComponent(req.url), (err, data) => { if (err) throw err; res.end(data); }) } }); });
打开终端,执行命令
node ./07-处理404.js
打开Postman使用界面,设置请求参数,点击send按钮
Postman显示