一、前言

在"初探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中的模板替换,最后将结果传递到前端显示。

大体流程,如下:

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

好了,了解示例需求,下面我们就一起来一步一步实现上述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以及贺岁图,如下:

 login.html

 home.html

newYear.png

三、编写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',二进制嘛。

 operation模块

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

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

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

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

 getQuery模块

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

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

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

转载于:https://blog.51cto.com/zhangtaoze/1917049

进阶之初探nodeJS相关推荐

  1. Web安全系列(二):XSS 攻击进阶(初探 XSS Payload)

    什么是 XSS Payload 上一章我谈到了 XSS 攻击的几种分类以及形成的攻击的原理,并举了一些浅显的例子,接下来,我就阐述什么叫做 XSS Payload 以及从攻击者的角度来初探 XSS 攻 ...

  2. [Nodejs]初探nodejs学习笔记- 如何使用nodejs搭建简单的UDP聊天功能

    2019独角兽企业重金招聘Python工程师标准>>> 何为UDP(User Datagram Protocol)? 从baidu摘过来一段:UDP,用户数据报协议,与所熟知的TCP ...

  3. 【JavaScript进阶学习】NodeJs语言的介绍及基本使用

    NodeJs语言的介绍 NodeJs服务器语言,后端语言,采用了ECMAScript的语法,用来在服务器中开启服务,操作文件,处理路径,处理请求,发送数据等服务功能. NodeJs的解析器:V8引擎 ...

  4. websocket 学习--简单使用,nodejs搭建websocket服务器,到模拟股票,到实现聊天室

    websocket简介: WebSocket协议是 HTML5 开始提供的一种基于TCP的一种新的全双工通讯的网络通讯协议.它允许服务器主动发送信息给客户端. 和http协议的不同?? HTTP 协议 ...

  5. Nodejs学习路线

    Nodejs 我学习nodejs的路线,大家有兴趣的话可以和我一起学习.I study the route of nodejs. If you are interested, you can stud ...

  6. 【】jQuery 等技术 目录

    ‎时间:2017‎年‎6‎月‎29‎日 []jQuery JS插件开发之 tab选项卡 jQuery 基础 Ajax应用与常用插件 jQuery实现自定义滚动条 jQuery基础 动画 jQuery基 ...

  7. 《Node.js开发指南》书评汇总

    刚查了下库存,发现订阅<Node.js开发指南>的读者大增,这是为什么呢?看了下近期本书在豆瓣的评论,口碑很好,现将豆瓣的书评汇总如下: ------------------------- ...

  8. 《白帽子讲Web安全 》 随手记(一)

    第一遍阅读这本书是在今年春节,那时读得太匆忙,加上对Web上存在的威胁了解不多,那时并不觉这本书较同类书籍有什么特别之处. 时隔3个月第二次阅读,醍醐灌顶,特别是讲解原理的部分,深入浅出,很好的梳理了 ...

  9. C#进阶系列——DDD领域驱动设计初探(五):AutoMapper使用

    前言:前篇搭建了下WCF的代码,就提到了DTO的概念,对于为什么要有这么一个DTO的对象,上章可能对于这点不太详尽,在此不厌其烦再来提提它的作用: 从安全上面考虑,领域Model都带有领域业务,让Cl ...

最新文章

  1. 工信部制定VR行业标准-谋定研究:对话中国经济和信息化
  2. 技术实践 | 网易云信在融合通信场景下的探索和实践之 RTMPGateway 服务架构
  3. (第一次)NODEJS学习笔记
  4. 【Linux系统编程】信号 (下)
  5. 页面图片延时加载(附实例下载)
  6. SQL Server 2008 R2下载地址
  7. Bailian4018 子串【字符串】
  8. 影响大数据的数据质量因素
  9. ASP.NET 页面传值方法的一些事情儿。
  10. html中使用js实现体彩11选5随机选号
  11. 【project2016】解决project2016安装与office冲突问题
  12. 显示器带宽测试软件,三种常见的上行带宽测试方法
  13. 接口工具POSTMAN怎么设置中文
  14. 360 自动 html 极速模式,用Meta标签代码让360双核浏览器默认极速模式打开网站不是兼容模式(顺带解决很多兼容性问题)...
  15. android tv 国内使用,不花钱解决 Android TV 原生系统国内APP不显示图标
  16. JAVA实现ECC加密 eclipse
  17. 工业机器人工具中心点标定的意义_如何理解工业机器人的工具中心点(TCP)?...
  18. 使用Google Analytics来统计手机网站的流量
  19. 店铺微信公众号怎么创建?
  20. 广州坐标系转换大地2000_市级2000国家大地坐标转换

热门文章

  1. matlab messagebox函数,[MATLAB]在C#中引用MATLAB函数
  2. oracle rman imp exp,Oracle-client支持exp|imp|rman
  3. 直线宽度2 points wide_OpenGL 绘图实例二之直线和圆弧的绘制
  4. 电机控制应用中的电磁兼容性设计与测试标准
  5. 相机校正与相机内参、外参
  6. 第十七届智能车竞赛何时开始呀?
  7. 第十六届全国大学生智能汽车竞赛总决赛 AI视觉组线上赛细则
  8. 航天智慧物流创意组-技术培训二期
  9. 智能车竞赛车模轮子与电机齿轮的参数
  10. Mac中使用svn命令行更换svn服务器IP地址