文章目录
前言
上一篇文章我们重构了路由代码，详见 Node.js后端开发 - 基础篇 #14 web 服务器 part 6 重构路由代码，这篇文章我们讲怎么从浏览器上传递一些数据给服务器，一般来说两种最常见的传递数据的方式就是通过地址栏的参数，还有一种就是通过表单，它们就是我们常说的get 和 post 方式。get方式传递数据的内容是有限制的，因为它是在地址栏显示的，所以敏感信息肯定不能通过这种方式，它常用来查询。如果你要提交和修改数据，我们常用表单即post方式。
get方式请求发送数据
核心修改讲解
现在我们通过具体的案例来介绍，基于上篇文章的代码，如我们在浏览器中输入地址：http://localhost:3000/api/v1/records?a=123，浏览器它肯定就显示 “404 error page”，因为我们没有这个页面。
这个时候我们可以查看VSCode服务器终端输出的数据：
Request received /api/v1/records?a=123
Routing a request for /api/v1/records?a=123
而在我们的服务器代码 app.js 是这样定义的：handle['/api/v1/records'] = handler.api_records;
我们并没有像这样定义 handle['/api/v1/records?a=123'] = handler.api_records; 即使这样定义了，?a=123 这段数据也是无法确定的，就算a是确定的，a的值也是无法确定，它可以是456、789等，所以我们这里不需要去更改路由，我们想办法只取地址问号前面、端口号后面的路径即可。那么我们怎么取它的内容呢？关键代码如下：
var pathname = url.parse(request.url).pathname;这个我就不具体演示了。接下来我们要得到问号后面的内容 “a=123”，关键代码如下：
var params = url.parse(request.url, true).query;那么把 params 的值传递下去：route(handle, pathname, response, params);
依次传递顺序，从server.js--->router.js--->hanlder.js，那么我把修改的这三个文件复制粘贴出来，大家针对上篇文章的代码，覆盖这三个文件就行！里面我做了详细注释，如下：
server.js
var http = require('http');
var fs = require('fs');
var url = require('url');//url库，对url进行一些处理，可以取一些主机名、协议之类的
function startServer(route, handle) {
var onRequest = function (request, response) {
// console.log('Request received ' + request.url);
// http://localhost:3000/api/v1/records?a=123
// 取地址问号前面、端口号后面的路径。即 /api/v1/records
var pathname = url.parse(request.url).pathname;
console.log('Request received ' + pathname);
//解析地址端口号后面的数据，
//第一个参数：地址问号前面的数据
//第二个参数：地址问号后面的数据，true输出json对象，false输出字符串
var params = url.parse(request.url, true).query; //{"a":"123"}
//var params = url.parse(request.url, false).query;//"a=123"
route(handle, pathname, response, params);
}
var server = http.createServer(onRequest);
server.listen(3000, '127.0.0.1');
console.log('Server started on localhost port 3000');
}
module.exports.startServer = startServer;router.js
var fs = require('fs');
function route(handle, pathname, response, params) {
console.log('Routing a request for ' + pathname);
if (typeof handle[pathname] === 'function') {
handle[pathname](response, params);
} else {
response.writeHead(200, { 'Content-Type': 'text/html' });
fs.createReadStream(__dirname + '/404.html', 'utf8').pipe(response);
}
}
module.exports.route = route;handler.js
var fs = require('fs');
function home(response) {
response.writeHead(200, { 'Content-Type': 'text/html' });
fs.createReadStream(__dirname + '/index.html', 'utf8').pipe(response);
}
function review(response) {
response.writeHead(200, { 'Content-Type': 'text/html' });
fs.createReadStream(__dirname + '/review.html', 'utf8').pipe(response);
}
function api_records(response, params) {
response.writeHead(200, { 'Content-Type': 'application/json' });
// var jsonObj = {
// name: "yyh2019"
// };
// response.end(JSON.stringify(jsonObj));
response.end(JSON.stringify(params));
}
module.exports = {
home: home,
review: review,
api_records: api_records
}效果贴图
post方式请求发送数据
上面我们讲了客服端浏览器get请求发送数据 以及nodejs后端的处理响应的效果，如上图效果。下面我们来讲讲post请求发送数据(表单的数据)的效果。我们先来新建一个表单，把上篇文章的index.html代码，修改成如下：
修改后的index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>hfpp2012</title>
</head>
<body>
<form action="/api/v1/records" method="post">
name: <input type="text" name="name" /> age: <input type="text" name="age" />
<input type="submit" value="Submit">
</form>
</body>
</html>注意：表单提交的动作 action="/api/v1/records" method="post"
然后我们修改一下server.js的代码，如下：
server.js
var http = require('http');
var fs = require('fs');
var url = require('url');
var querystring = require('querystring');
function startServer(route, handle) {
var onRequest = function (request, response) {
var pathname = url.parse(request.url).pathname;
console.log('Request received ' + pathname);
var data = "";//定义一个空字符串
request.on("error", function (err) {//当错误的时候，输出错误信息
console.error(err);
}).on("data", function (chunk) {//接收数据的时候，把数据组合在一起
data += chunk;
}).on('end', function () {//接收完数据以后，把数据传给后端的处理函数
if (request.method === "POST") {//post请求的时候
//直接传入data，取到的是一个字符串
//querystring.parse(data) 把字符串解析成json对象。
route(handle, pathname, response, querystring.parse(data));
} else {//get请求的时候
var params = url.parse(request.url, true).query;
route(handle, pathname, response, params);
}
});
}
var server = http.createServer(onRequest);
server.listen(3000, '127.0.0.1');
console.log('Server started on localhost port 3000');
}
module.exports.startServer = startServer;最终效果贴图
然后我们在Visual Studio Code启动nodejs后端，如下：
bogon:hello-nodejs luminal$ node app
Server started on localhost port 3000在浏览上访问：http://localhost:3000/ ，然后在这个简单的表单中输入内容，如下
提交以后，我们可以看到如下，最终效果贴图：
更好的写法
还有官方推荐的、一些有经验的程序猿是这样写的，我们可以参考如下，我做了详细注释，这里就不过多介绍了！
server.js
var http = require('http');
var fs = require('fs');
var url = require('url');
var querystring = require('querystring');
function startServer(route, handle) {
var onRequest = function (request, response) {
var pathname = url.parse(request.url).pathname;
console.log('Request received ' + pathname);
//var data = "";
var data = [];//定义一个数组
request.on("error", function (err) {//当错误的时候，输出错误信息
console.error(err);
}).on("data", function (chunk) {//接收数据的时候，把数据组合在一起
//data += chunk;
data.push(chunk);
}).on('end', function () {//接收完数据以后，把数据传给后端的处理函数
if (request.method === "POST") {//post请求的时候
//1e6这个是我们高中数学学过的科学计数法，是一个数字。
//也就是当post数据量很大的时候，就把当前请求给取消掉
if (data.length > 1e6) {
request.connection.destroy();
}
data = Buffer.concat(data).toString();
route(handle, pathname, response, querystring.parse(data));
} else {
var params = url.parse(request.url, true).query;
route(handle, pathname, response, params);
}
});
}
var server = http.createServer(onRequest);
server.listen(3000, '127.0.0.1');
console.log('Server started on localhost port 3000');
}
module.exports.startServer = startServer;这里我们只是简单写一下，当然不只是get和post方式两种，比如还有put请求方式等
这节主要讲使用 GET 或 POST 请求发送数据，然后我们通过后端的函数把数据给解析出来
一些官方链接
url.parse
URL | Node.js v9.11.2 Documentation
扫一扫
754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
