从零学习node.js之搭建http服务器(二)


Posted in Javascript onFebruary 21, 2017

前言

在上篇文章中我们了解了一下不同模块规范之间的联系与区别。本文我们正式开始node的学习,首先我们从搭建一个http服务器,能运行简单的程序开始说起。

一、hello world

最经典的hello world。首先我们创建一个server.js来保存我们的代码:

console.log( 'hello world' );

在终端输入node server.js运行:

node server.js

终端就会输出 hello world 的字样。可是我们一个node服务器程序,总是要在浏览器上访问的呀,这里就要用到node里自带的http模块了:

var http = require('http'); // 引入http模块

// 创建http服务器
// request : 从浏览器带来的请求信息
// response : 从服务器返回给浏览器的信息
http.createServer(function(request, response){
 response.writeHead(200, {'content-type': 'text/plain'}); // 设置头部信息,输出text文本
 response.write('hello world'); // 输出到页面中的信息
 response.end(); // 返回结束
}).listen(3000);
console.log('server has started...');

我们再次在终端输入node server.js运行,终端里会有输出 server has started… 的字样,表示服务器已创建并正在运行,然后我们在浏览器上访问127.0.0.1:3000,就可以看到页面中输出了hello world。

二、form表单

刚才我们只是在页面中输出了一段简单的文本,现在我们要在页面中呈现一个表单,可以让用户输入信息并进行提交:

// server.js
var http = require('http');

http.createServer(function(request, response){
var html = '<html>\
 <head>\
 <meta charset=UTF-8" />\
 </head>\
 <body>\
 <form action="/" method="post">\
 <p>username : <input type="text" name="username" /></p>\
 <p>password : <input type="password" name="password" /></p>\
 <p>age : <input type="text" name="age" /></p>\
 <p><input type="submit" value="submit" name="submit" /></p>\
 </form>\
 </body>\
 </html>';

 response.writeHead(200, {'content-type': 'text/html'}); // 输出html头信息
 response.write(html); // 将拼接的html字符串输出到页面中
 response.end(); // 结束
}).listen(3000);
console.log('server has started...');

修改server.js中的内容,重新运行:

node server.js

刷新页面后,我们发现页面中输出了3个文本框和1个提交按钮。因为我们的程序只是呈现页面,并没有做任何其他的处理,因此在页面中提交数据只是刷新当前页面。

注意: 我们每次修改node中的任何代码后,都要重新进行启动。

2.1 获取表单GET方式提交的数据

我们上面的代码中使用的是POST方式,不过这里要先讨论使用GET方式提交过来的数据,我们先不考虑数据的安全性,只是学习如何获取使用get方式提交过来的form表单数据,将post改为get,重新运行。

我们知道,使用get方式提交数据,会将数据作为URL参数传递过来,因此我们通过解析URL中的参数获取到数据,这里就用到了url模块中的方法:

// server.js
var http = require('http'),
url = require('url');

http.createServer(function(request, response){
 var html = '<html>\
 <head>\
 <meta charset=UTF-8" />\
 </head>\
 <body>\
 <form action="/" method="get">\
 <p>username : <input type="text" name="username" /></p>\
 <p>password : <input type="password" name="password" /></p>\
 <p>age : <input type="text" name="age" /></p>\
 <p><input type="submit" value="submit" name="submit" /></p>\
 </form>\
 </body>\
 </html>';
 
 var query = url.parse( request.url, true ).query;
 if( query.submit ){
 var data = '<p><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >back</a></p>'+
 '<p>username:'+query.username+'</p>'+
 '<p>password:'+query.password+'</p>'+
 '<p>age:'+query.age+'</p>';
 
 response.writeHead(200, {'content-type': 'text/html'});
 response.write(data);
 }else{
 response.writeHead(200, {'content-type': 'text/html'});
 response.write(html);
 }
 response.end(); // 结束
}).listen(3000);
console.log('server has started...');

我们再次运行提交后就能在页面中显示出数据了。

url.parse是用来解析URL字符串的,并返回解析后的URL对象。若我们只输出一下 url.parse(request.url)

url.parse(request.url);

result:
Url {
 protocol: null,
 slashes: null,
 auth: null,
 host: null,
 port: null,
 hostname: null,
 hash: null,
 search: '?username=111113&password=123&age=122&submit=submit',
 query: 'username=111113&password=123&age=122&submit=submit',
 pathname: '/',
 path: '/?username=111113&password=123&age=122&submit=submit',
 href: '/?username=111113&password=123&age=122&submit=submit'
}

如果将第2个参数设置为true,则会将返回结果中的query属性解析为一个对象,其他属性不变;默认值为false,即query属性是一个字符串:

url.parse(request.url, true);

result:
Url {
...
query: {
 username: '111113',
 password: '123',
 age: '122',
 submit: 'submit' },
...
}

因此我们可以通过如下语句判断是否有提交数据并获取提交数据,然后再输出到中即可:

var query = url.parse( request.url, true ).query;
/*
{
 username: '111113',
 password: '123',
 age: '122',
 submit: 'submit'
}
*/

2.2 获取表单POST方式提交的数据

现在我们使用post方式来提交数据。因为POST请求一般都比较“重” (用户可能会输入大量的内容),如果用阻塞的方式来处理处理,必然会导致用户操作的阻塞。因此node将post数据拆分为很多小的数据块,然后通过data事件(表示新的小数据块到达了)和end事件传递这些小数据块(表示所有的数据都已经接收完毕)。 所以,我们的思路应该是:在data事件中获取数据块,在end事件中操作数据。

// server.js
var http = require('http'),
querystring = require('querystring');

http.createServer(function(request, response){
 var html = '<html>\
 <head>\
 <meta charset=UTF-8" />\
 </head>\
 <body>\
 <form action="/" method="post">\
 <p>username : <input type="text" name="username" /></p>\
 <p>password : <input type="password" name="password" /></p>\
 <p>age : <input type="text" name="age" /></p>\
 <p><input type="submit" value="submit" name="submit" /></p>\
 </form>\
 </body>\
 </html>';
 
 if( request.method.toLowerCase()=='post' ){
 var postData = '';

 request.addListener('data', function(chunk){
 postData += chunk;
 });

 request.addListener('end', function(){
 var data = querystring.parse(postData);
 console.log( 'postData: '+postData );
 console.log(data);
 
 var s = '<p><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >back</a></p>'+
 '<p>username:'+data.username+'</p>'+
 '<p>password:'+data.password+'</p>'+
 '<p>age:'+data.age+'</p>';

 response.writeHead(200, {'content-type': 'text/html'});
 response.write(s);
 response.end();
 })
 }else{
 response.writeHead(200, {'content-type': 'text/html'});
 response.write(html);
 response.end();
 }
}).listen(3000);
console.log('server has started...');

这段代码与上段代码项目,主要有的几个变化是:

  1. 不再引入url模块, 改用引入querystring模块。因为我们不再对URL进行操作了,也没必要引入了;
  2. 使用request.method.toLowerCase()=='post'判断当前是否有数据提交;
  3. 在data事件进行数据的拼接,在end事件中进行的处理;
  4. response.end()写在了end事件内部,因为end事件是异步操作,因此必须得数据输出完成之后才能执行response.end()

我们在控制台中可以看出,postData是这样的一个字符串:

'username=123&password=123&age=23&submit=submit';

因此我们使用query.parse将postData解析为对象类型,以便获取提交过来的数据。

三、路由

现在我们所有的逻辑都是在根目录下进行的,没有按照url区分,这里我们按照功能进行路由拆分。以上面的post请求为例,我们可以拆分为:页面初始化和form提交后的处理。

页面初始化:

// starter.js 页面初始化

function start(request, response){
 var html = '<html>\
 <head>\
 <meta charset=UTF-8" />\
 </head>\
 <body>\
 <form action="/show" method="post">\
 <p>username : <input type="text" name="username" /></p>\
 <p>password : <input type="password" name="password" /></p>\
 <p>age : <input type="text" name="age" /></p>\
 <p><input type="submit" value="submit" name="submit" /></p>\
 </form>\
 </body>\
 </html>';
 
 response.writeHead(200, {"Content-Type":"text/html"});
 response.write( html );
 response.end();
}
exports.start = start;

展示获取的数据:

// uploader.js 展示获取的数据
var querystring = require('querystring');

function upload(request, response){
 var postData = '';

 request.addListener('data', function(chunk){
 postData += chunk;
 });
 
 request.addListener('end', function(){
 var data = querystring.parse(postData);
 console.log( 'postData: '+postData );
 console.log(data);

 var s = '<p><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >back</a></p>'+
 '<p>username:'+data.username+'</p>'+
 '<p>password:'+data.password+'</p>'+
 '<p>age:'+data.age+'</p>';

 response.writeHead(200, {'content-type': 'text/html'});
 response.write(s);
 response.end();
 })
}
exports.upload = upload;

然后在server.js中进行路由选择

// server.js
var http = require('http'),
url = require('url');

http.createServer(function(request, response){
 var pathname = url.parse(request.url).pathname;
 console.log(pathname);
 response.end();
}).listen(3000);
console.log('server has started...');

我们任意改变URL地址,会看到输出的每个地址的pathname(忽略/favicon.ico):

http://127.0.0.1:3000/ // 输出: /
http://127.0.0.1:3000/show/ // 输出: /show/
http://127.0.0.1:3000/show/img/ // 输出: /show/img/
http://127.0.0.1:3000/show/?username=wenzi // 输出: /show/

因此我们就根据pathname进行路由,对路由进行方法映射:

// server.js
var http = require('http'),
url = require('url'),
starter = require('./starter'),
uploader = require('./uploader');

http.createServer(function(request, response){
 var pathname = url.parse(request.url).pathname;
 var routeurl = {
 '/' : starter.start,
 '/show' : uploader.upload
 }

 if( typeof routeurl[pathname]=== 'function' ){
 routeurl[pathname](request, response);
 }else{
 console.log('404 not found!');
 response.end();
 }
}).listen(3000);
console.log('server has started...');

如果匹配到路由 / ,则执行 starter.start(request, response) ;如果匹配到路由 /show ,则执行 uploader.upload(request, response) 。如果都没匹配到,则显示404。

四、 图片上传并显示

在上面我们已经能成功提交数据了,这里来讲解如何进行图片上传并显示。使用node自带的模块处理起来非常的麻烦,这里我们使用别人已经开发好的formidable模块进行编写,它对解析上传的文件数据做了很好的抽象。

npm install formidable --save-dev

在starter.js中,我们添加上file控件:

// starter.js
function start(request, response){
 var html = '<html>\
 <head>\
 <meta charset=UTF-8" />\
 </head>\
 <body>\
 <form action="/upload" method="post" enctype="multipart/form-data">\
 <p>file : <input type="file" name="upload" multiple="multiple" /></p>\
 <p><input type="submit" value="submit" name="submit" /></p>\
 </form>\
 </body>\
 </html>';

 response.writeHead(200, {"Content-Type":"text/html"});
 response.write( html );
 response.end();
}
exports.start = start;

4.1 图片上传

首先我们进行的是图片上传操作,首先我们要确保当前目录中存在tmp和img目录。

在 uploader.js 中:

// uploader.js
var formidable = require('formidable'),
util = require('util'),
fs = require('fs');

function upload(request, response){
 if( request.method.toLowerCase()=='post' ){
 var form = new formidable.IncomingForm();

 form.uploadDir = './tmp/';
 form.parse(request, function(err, fields, files) {
 var oldname = files.upload.name,
 newname = Date.now() + oldname.substr(oldname.lastIndexOf('.'));
 fs.renameSync(files.upload.path, "./img/"+newname ); // 上传到 img 目录

 response.writeHead(200, {'content-type': 'text/plain'});
 response.write('received upload:\n\n');
 response.end(util.inspect({fields: fields, files: files}));
 });
 return;
 }
}
exports.upload = upload;

我们上传图片后跳转到upload路径,然后显示出相应的信息:

received upload:

{
 fields: { // 其他控件,如input, textarea等
 submit: 'submit'
},
files:{ // file控件
 upload:{
 domain: null,
 _events: {},
 _maxListeners: undefined,
 size: 5097,
 path: 'tmp\\upload_b1f7c3e83af224e9f3a020958cde5dcd',
 name: 'chrome.png',
 type: 'image/png',
 hash: null,
 lastModifiedDate: Thu Jan 12 2017 23:09:50 GMT+0800 (中国标准时间),
 _writeStream: [Object]
 }
 }
}

我们再查看img目录时,就会发现我们刚才上传的照片了。

4.2 图片显示

将图片上传到服务器后,怎样才能把图片显示在浏览器上呢。这里我们就使用到了fs模块来读取文件,创建一个shower.js来专门展示图片:

// shower.js
var fs = require('fs'),
url = require('url');

function show(request, response){
 var query = url.parse(request.url, true).query,
 imgurl = query.src;

 // 读取图片并进行输出
 // 这里读取链接中的src参数,指定读取哪张图片 /show?src=1484234660592.png
 fs.readFile('./img/'+imgurl, "binary", function(err, file){
 if(err) throw err;
 response.writeHead(200, {"Content-Type": "image/png"});
 response.write(file, "binary");
 response.end();
 })
}
exports.show = show;

然后在 server.js 中添加上 show 的路由映射:

var routeurl = {
 '/' : starter.start,
 '/upload' : uploader.upload,
 '/show' : shower.show // 添加
};

最后在 upload.js 中进行图片的引用:

form.parse(request, function(err, fields, files) {
 var oldname = files.upload.name,
 newname = Date.now() + oldname.substr(oldname.lastIndexOf('.'));
 fs.renameSync(files.upload.path, "./img/"+newname ); // 同步上传图片

 response.writeHead(200, {'content-type': 'text/html'});
 var s = '<p><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >back</a></p><p><img src="/show?src='+newname+'" /></p>'; // 显示刚才的图片
 response.write(s);
 response.end();
});

五、综合

刚才学习了上传数据和上传图片,这里我们将其综合一下,拟定一个题目:“设定用户名密码,并上传头像”。希望可以自己实现一下。

六、接口的实现

在第2部分学习了GET和POST请求,那么在这里写一个简单json或jsonp接口应该不是什么难事儿了吧。

创建一个 inter.js :

// inter.js
var url = require('url');

function init(request, response){
 if( request.method.toLowerCase()=='get' ){
 var query = url.parse(request.url, true).query;

 var data = {"code":0, "msg":"success", "data":[{"username":"wenzi", "age":26}, {"username":"bing", "age":25}]};
 if( query && query.callback ){
 // jsonp
 response.end( query.callback + '(' + JSON.stringify(data) + ')' );
 }else{
 // json
 response.end( JSON.stringify(data) );
 }
 }
}
exports.init = init;

在server中添加inter的引用和路由映射:

var routeurl = {
 '/' : starter.start,
 '/upload' : uploader.upload,
 '/show' : shower.show,
 '/inter' : inter.init // 添加
};

然后对 http://127.0.0.1:3000/inter 进行json请求或jsonp请求即可。

为大家提供一个查询API的中文地址:https://pinggod.gitbooks.io/nodejs-doc-in-chinese/content

总结

好了,以上就是这篇文章的全部内容了,这节还是写了不少的内容,最核心的就是讲解如何搭建一个简单的http服务器,进行数据和图片的提交与处理,在最后稍微讲了下接口的编写,后面有机会的话,会再具体讲解下接口的编写。下面会和大家分享node之文件操作,请大家继续关注三水点靠木。

Javascript 相关文章推荐
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
Vue实现根据hash高亮选项卡
May 27 Javascript
jQuery动态生成不规则表格(前后端)
Feb 21 #Javascript
jquery设置css样式的多种方法(总结)
Feb 21 #Javascript
JavaScript中 this 指向问题深度解析
Feb 21 #Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 #Javascript
从零学习node.js之模块规范(一)
Feb 21 #Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 #Javascript
JS中实现函数return多个返回值的实例
Feb 21 #Javascript
You might like
模拟flock实现文件锁定
2007/02/14 PHP
如何使用Strace调试工具
2013/06/03 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
php数组分页实现方法
2016/04/30 PHP
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
js实现验证码功能
2020/07/24 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
工程造价与管理专业应届生求职信
2013/11/23 职场文书
自我评价个人范文
2013/12/16 职场文书
银行求职信个人范文
2013/12/16 职场文书
结婚邀请函范文
2014/01/14 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
物业管理专业求职信
2014/06/11 职场文书
导游词欢迎词
2015/02/02 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS