- 一个表单项目,获取表单提交信息,展示在网页上
用原生node写网页是真的麻烦
创建模块
- 老套路 先创建模块
输出表单
const http = require('http');
http.createServer(function (req, res) {
res.writeHeader(200, {'Content-Type': 'text/html'});
res.end([
'<form method="post" action="/url">',
'<h1>My form</h1>',
'<fieldset>',
'<label>Personal Information</label>',
'<p>What is your name?</p>',
'<input type="text" name="name">',
'<p><button>Submit</button></p>',
'</form>'
].join(''));
}).listen(3000);
- 注意为了让html结构更加清楚,我们把响应文本内容写在一个数组内,再用数组的
jion的方法将其转换为字符串 - 需要注意的是
<form>标签中有/url以及post方法,另外输入框内还有个叫name的名字 - 下面是运行效果
1533544513193.png
- 当我们输入内容提交以后注意地址栏的变化
1533544546492.png
- 提交以后URL变了,不过响应结果是一样的,为了能让node能够对表单提交的请求做出正确的处理,这里需要学习关于检测请求方法和URL的相关内容
method和URL
按逻辑,当我们进行提交的时候需要给用户呈现一个不一样的东西,这个时候我们需要处理表单
const http = require('http'); http.createServer(function (req, res) { if ('/' == req.url) { res.writeHeader(200, {'Content-Type': 'text/html'}); res.end([ '<form method="post" action="/url">', '<h1>My form</h1>', '<fieldset>', '<label>Personal Information</label>', '<p>What is your name?</p>', '<input type="text" name="name">', '<p><button>Submit</button></p>', '</form>' ].join('')); } else if ('/url' == req.url) { res.writeHeader(200, {'Content-Type': 'text/html'}); res.end(`you sent a ${req.method} request`) } }).listen(3000);
- 这个时候我们直接访问是没有什么变化的,当我们直接访问/url以后就会跳转
1533545092697.png
- 当我们提交以后就会
1533545228321.png
- 如上所示,我们这里接触了两个变量 URL 和 method
- Node会将主机名后所有的内容都放在url属性中
- 关于method有几种不同的方法
- GET
- POST
- PUT
- DELETE
- PATCH
数据
当发送html 的时候,需要随着响应体定义
Content-Type头信息const http = require('http'); http.createServer(function (req, res) { if ('/' == req.url) { res.writeHeader(200, {'Content-Type': 'text/html'}); res.end([ '<form method="post" action="/url">', '<h1>My form</h1>', '<fieldset>', '<label>Personal Information</label>', '<p>What is your name?</p>', '<input type="text" name="name">', '<p><button>Submit</button></p>', '</form>' ].join('')); } else if ('/url' == req.url && 'POST' == req.method) { let body = ''; req.on('data',function (chunk) { body += chunk; }); req.on('end',function () { res.writeHeader(200,{'Content-Type':'text/html'}) res.end('<p>Content-Type:' + req.headers['content-type'] + '</p>' + '<p>Date:</p><pre>' + body + '</pre>'); }); } }).listen(3000);我们监听了data 和 end 事件,创建了一个body 自出穿用来接收数据块,仅当end 事件触发时, 我们就知道数据接收完全了
之所以可以这样逐块接收数据,因为node允许在数据到达服务器时就可以对其进行处理,因为数据是以不同的TCP包到达服务器的,这和显示情况也完全匹配,我们现货区一部分数据,然后在某个时刻在获取其余的数据
- 1533546078287.png
- 1533551136370.png
当我们在进行搜索的时候,,url中高亮的那部分为
q=<search term>搜索部分的url和表单内容一样都是经过编码的,也就解释了为什么Content-Type为urlencoded
-
这部分URL片段又被称为查询字符串
- node提供了一个
querystring的模块,可以方便的对这类字符串进行解析,这样我们就可以想处理头信息一样对其进行处理,下面是例子\
- node提供了一个
1533551437504.png
输出内容
1533551447887.png
- 如图所示, querystring模块讲一个字符串解析成一个对象,这个解析处理方式和node解析headers消息的方式类似,node将http请求数据中得headers信息从字符串解析成一个方便处理的headers对象
整合
- 现在我们要解析发送来的数据并展示出来
- 这里我们用
querystringparse方法去解析
const http = require('http');
const qs = require('querystring');
http.createServer(function (req, res) {
if ('/' == req.url) {
res.writeHeader(200, {'Content-Type': 'text/html'});
res.end([
'<form method="post" action="/url">',
'<h1>My form</h1>',
'<fieldset>',
'<label>Personal Information</label>',
'<p>What is your name?</p>',
'<input type="text" name="name">',
'<p><button>Submit</button></p>',
'</form>'
].join(''));
} else if ('/url' == req.url && 'POST' == req.method) {
let body = '';
req.on('data',function (chunk) {
body += chunk;
});
req.on('end',function () {
res.writeHeader(200,{'Content-Type':'text/html'})
res.end('<p>Your name is <b>'+ qs.parse(body).name+'</b></p>');
});
}
}).listen(3000);
- 效果
- 1533557405305.png
让程序更健壮
- 这里有一个问题,如果URL没有匹配到任何判断条件怎么办
- 解决这个问题我们可以在服务器不知道怎么处理该请求的时候,发送404给客户度阿女
- 还有别的解决办法 但是这里我们采用书上说的方法来解决
const http = require('http');
const qs = require('querystring');
http.createServer(function (req, res) {
if ('/' == req.url) {
res.writeHeader(200, {'Content-Type': 'text/html'});
res.end([
'<form method="post" action="/url">',
'<h1>My form</h1>',
'<fieldset>',
'<label>Personal Information</label>',
'<p>What is your name?</p>',
'<input type="text" name="name">',
'<p><button>Submit</button></p>',
'</form>'
].join(''));
} else if ('/url' == req.url && 'POST' == req.method) {
let body = '';
req.on('data',function (chunk) {
body += chunk;
});
req.on('end',function () {
res.writeHeader(200,{'Content-Type':'text/html'})
res.end('<p>Your name is <b>'+ qs.parse(body).name+'</b></p>');
});
} else {
res.writeHeader(404);
res.end('Not found')
}
}).listen(3000);
- 效果
- 1533557651911.png
