进阶之初探nodeJS


Posted in NodeJs onJanuary 24, 2017

一、前言

在"初探nodeJS"随笔中,我们对于node有了一个大致地了解,并在最后也通过一个示例,了解了如何快速地开启一个简单的服务器。

今儿,再次看了该篇随笔,发现该随笔理论知识稍多,适合初级入门node,固萌生一个想法--想在该篇随笔中,通过一步步编写一个稍大一点的node示例,让我们在整体上更加全面地了解node。

so,该篇随笔是建立在"初探nodeJS"之上的,固取名为"进阶之初探nodeJS"。

好了,侃了这多,那么我们即将实现一个什么样的示例呢?

示例说明,如下:

用户通过url之127.0.0.1/login进入登入页面,待用户输入账户名后(密码选项输不输都无所谓,只是为了页面合理),点击提交,进入home页面。

node服务端,怎么处理的呢?通过URL判断,当为/login时,服务端读取login.html的内容,并将其传递到前端显示;当为/home时,服务端读取home.html的内容,并将login.html中提交的账号名与home.html中的模板替换,最后将结果传递到前端显示。

大体流程,如下:

进阶之初探nodeJS

示例最终实现效果,如下:

进阶之初探nodeJS

好了,了解示例需求,下面我们就一起来一步一步实现上述Demo吧。

二、前端文件准备

要实现上述效果,我们首先简单地准备两个页面login.html、home.html以及一张贺岁图片,显而易见,供接下来node读取它们并将它们呈现到浏览器中,使用。

在上述说明中,已讲过node服务器是通过路由来判断,加载哪张页面,固我们将login.html中form的action写作'./home',以达到我们的目的,请求方式嘛,使用的当然是post咯。

且,因为我们要将在login.html中填写的账户名动态地与home.html结合,固home.html中的“称呼”位置,不能写死,因此我们利用{name}来占位,随后利用node动态替换。

好了,简易编写的login.html、home.html以及贺岁图,如下:

<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <style>
 form {
 text-align:center;
 }
 </style>
</head>
 <body>
 <form action="./home" method="post">
 账户:<input type="text" name="name"/><br/>
 密码:<input type="password" name="password"/><br/>
 <input type="submit" value="提交"/>
 </form> 
 </body>
</html>

login.html
<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <style>
 body {
 text-align:center;
 }
 span {
 color: blue;
 }
 </style>
</head>
 <body>
 <div>
 <span>{name}</span>,新de一年,一定要开心哦~
 </div>
 <img src="./getPic"/> 
 </body>
</html>

home.html

进阶之初探nodeJS

三、编写node服务

上述中,我们所需要的前端文件已经准备完毕,接下来就是通过node来编写服务,将它们串联起来咯。

首先,我们搭建一个主文件,取名为main.js吧,作用不言而喻,主入口嘛,如果我们在代码编写完毕后,想要启动服务,就node main.js就OK咯。

如下:

'use strict';
var http = require('http');
var server = http.createServer();
server.on('request',function(req, res){
 //排除favicon.ico请求
 if(req.url != '/favicon.ico'){
 //TODO
 }else{
 res.end();
 }; 
}).listen('80');
console.log('Server running!');

接着,我们就一起来逐步完善这个主文件。

在“前言”中我们提过,当一个请求来到服务中,我们采取获取URL的路径,来判断接下来的操作,已到达降低耦合性的目的。

所以,在主程序中,我们得利用url这个模块,来获得url中的相关路径,并通过正则来得到第一个路径名,通过接下来的路由模块,处理。

如下:

'use strict';
var http = require('http');
var url = require('url');
var server = http.createServer();
server.on('request',function(req, res){
 if(req.url != '/favicon.ico'){
 //获取路径
 let pathname = url.parse(req.url).pathname;
 pathname = pathname.match(/\w+/)[0];
 //router具体,待写...
 router[pathname](req, res);
 }else{
 res.end();
 }; 
}).listen('80');
console.log('Server running!');

好了,接下来,我们就一起来编写router这个模块吧。

在我们示例中,router无外乎就是处理login、home以及图片请求getPic,所以,我们将router模块基本骨架,暂定如下:

'use strict';
var router = {
 login: function(req, res){
 //TODO 
 },
 home: function(req, res){
 //TODO
 },
 getPic: function(req, res){
 //TODO
 }
};
module.exports = router;

且,我们发现login、home以及getPic这三个操作,有很多共通之处,如都会读取服务端本地文件,以及将读取的文件,写入响应体中,固我们将这些操作提取出来,作为operation模块。

在operation模块中,我们需要使用到node内置'fs'这个模块来读取文件,'fs'模块我们将会用到如下方法:

1、fs.readFileSync--同步读取文件

2、fs.readFile--异步读取文件

3、fs.writeFileSync--同步写入文件

4、fs.writeFile--异步写入文件

需要注意的是,读取图片也就使用的fs.readFileSync/fs.readFile,不过就是第二个参数还需加上'binary',二进制嘛。

'use strict';
var fs = require('fs');
var operationFile = {
 readFileSync: function(path, callback){//同步读取文件
 let data = fs.readFileSync(path, 'utf-8');
 syncOperation(callback, data, '同步读取文件完毕');
 },
 readFileAsync: function(path, callback){//异步读取文件
 fs.readFile(path, function(err, data){
 asyncOperation(err, callback, data, '异步读取文件成功');
 }); 
 },
 writeFileSync: function(path, data, callback){//同步写入文件
 fs.writeFileSync(path, data);
 syncOperation(callback, null, '同步写入文件完毕'); 
 },
 writeFile: function(path, data, callback){//异步写入文件
 fs.writeFile(path, data, function(err){
 asyncOperation(err, callback, null, '异步写入文件完毕');
 });
 },
 readImg: function(path, callback){//异步读取图片
 fs.readFile(path, 'binary', function(err, file){
 asyncOperation(err, callback, file, '异步读取图片完毕');
 });
 } 
};
function syncOperation(callback, data, msg='操作成功'){
 if(typeof callback === 'function'){
 callback(data);
 }else{
 console.log(msg);
 } 
}
function asyncOperation(err, callback, data, msg='操作成功'){
 if(err){
 console.log(err);
 }else if(typeof callback === 'function'){
 callback(data);
 }else{
 console.log(msg);
 } 
}
module.exports = operationFile;

operation模块

另外,我们在login.html中提交表单时,使用到了post请求,那么在node服务中应该怎么接收传来的实体呢?

node是采用的监听'data'来接收post方法实体信息,通过'end'来监听接收信息完毕事件。

而,node接收get请求参数就没这么复杂,直接获取url后的查询字符串即可。

好了,我们将获取post、get请求参数,也写为一个模块,取名为getQuery,如下:

'use strict';
var url = require('url');
var querystring = require('querystring');
module.exports = {
 fromGet: function(req, res, callback){
 var data = url.parse(req.url, true).query;
 callback(data); 
 },
 fromPost: function(req, res, callback){
 var data = '';
 req.on('data', function(chunk){
 data += chunk;
 });
 req.on('end', function(){
 data = querystring.parse(data);
 callback(data);
 });
 }
};

getQuery模块

最后,就是在router模块中,引入operation、getQuery模块,完善login、home以及getPic方法咯。

在这里需要注意的是getPic方法,因为是处理的图片,所以响应头得写成'image/jpeg',如下:

res.writeHead(200, {'Content-Type':'image/jpeg'});

好了,大致思路已理清,详细代码请见github.

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

NodeJs 相关文章推荐
nodejs分页类代码分享
Jun 17 NodeJs
NodeJS学习笔记之Connect中间件模块(一)
Jan 27 NodeJs
Nodejs中的this详解
Mar 26 NodeJs
Nodejs下用submit提交表单提示cannot post错误的解决方法
Nov 21 NodeJs
NodeJs模拟登陆正方教务
Apr 28 NodeJs
NodeJs安装npm包一直失败的解决方法
Apr 28 NodeJs
nodejs调取微信收货地址的方法
Dec 20 NodeJs
nodejs提示:cross-device link not permitted, rename错误的解决方法
Jun 10 NodeJs
图解NodeJS实现登录注册功能
Sep 16 NodeJs
nodejs语言实现验证码生成功能的示例代码
Oct 13 NodeJs
NodeJS多种创建WebSocket监听的方式(三种)
Jun 04 NodeJs
如何利用nodejs实现命令行游戏
Nov 24 NodeJs
用nodejs搭建websocket服务器
Jan 23 #NodeJs
NodeJS遍历文件生产文件列表功能示例
Jan 22 #NodeJs
nodejs实现发出蜂鸣声音(系统报警声)的方法
Jan 18 #NodeJs
nodejs的压缩文件模块archiver用法示例
Jan 18 #NodeJs
nodejs 实现钉钉ISV接入的加密解密方法
Jan 16 #NodeJs
简单实现nodejs上传功能
Jan 14 #NodeJs
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
Jan 12 #NodeJs
You might like
用javascript实现给图片加链接
2007/08/15 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
[12:51]71泪洒现场!是DOTA2让经典重现
2014/03/24 DOTA
Python中functools模块的常用函数解析
2016/06/30 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
Python 画出来六维图
2019/07/26 Python
Python使用贪婪算法解决问题
2019/10/22 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
自荐信写法介绍
2014/01/25 职场文书
生物科学专业自荐书
2014/06/20 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers
Python Flask实现进度条
2022/05/11 Python
MySQL事务的隔离级别详情
2022/07/15 MySQL
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang