进阶之初探nodeJS

一、前言

在"初探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以及贺岁图,如下:

<!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

三、编写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.

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

时间: 2017-01-22

Nodejs 搭建简单的Web服务器详解及实例

使用 Nodejs 搭建简单的Web服务器 使用Nodejs搭建Web服务器是学习Node.js比较全面的入门教程,因为要完成一个简单的Web服务器,你需要学习Nodejs中几个比较重要的模块,比如:http协议模块.文件系统.url解析模块.路径解析模块.以及301重定向问题,下面我们就简单讲一下如何来搭建一个简单的Web服务器. 作为一个Web服务器应具备以下几个功能: 1.能显示以.html/.htm结尾的Web页面 2.能直接打开以.js/.css/.json/.text结尾的文件内容

详解NodeJs支付宝移动支付签名及验签

非常感谢 :http://www.jianshu.com/p/8513e995ff3a?utm_campaign=hugo&utm_medium=reader_share&utm_content=note&utm_source=weibo 的文章,如果不是找到这篇文章我可能还要继续坑几天,代码也基本都是照着他的搬过来的,不过支付宝移动支付文档写的非常糟糕而且没有node的SDK和demo,写起来异常痛苦..好在找到了这篇文章顺便折腾了一下午支付宝的技术人员总算把移动支付整个流程给做

学习 NodeJS 第八天:Socket 通讯实例

前言 一般来讲,HTTP 是基于文本的"单向"通讯机制.这里所谓的"单向",乃相对于"双向"而言,因为 HTTP 服务器只需根据请求返还恰当的 HTML 给客户端即可,不涉及客户端向服务端的通讯.这种单向的机制比较简单,对网络质量要求也不高.而更多的场景则是需要可靠.稳定的端到端连接.一般这种服务是实时的.有态的而且是长连接,长连接则暗示两段须达致相向通讯的能力,也就说是服务端客户端两者间能够实时地相互间通信.毫无疑问,能够实时通信的服务器正是我

nodejs实例解析(输出hello world)

下面将带领大家一步步学习nodejs,知道怎么使用nodejs搭建服务器,响应get/post请求,连接数据库等. 搭建服务器页面输出hello world var http = require('http'); http.createServer(function (request, response) { response.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'}); if(request.url!=="/favi

详解Nodejs基于mongoose模块的增删改查的操作

MongoDB MongoDB是基于Javascript语言的数据库,存储格式是JSON,而Node也是基于JavaScript的环境(库),所以node和mongoDB的搭配能减少因为数据转换带来的时间空间开销. Mongoose 是MongoDB的一个对象模型工具,它将数据库中的数据转换为JavaScript对象以供你在应用中使用,封装了MongoDB对文档的的一些增删改查等常用方法,让NodeJS操作Mongodb数据库变得更加灵活简单. 安装模块mongoose npm install

nodejs连接mongodb数据库实现增删改查

准备 1.通过npm命令安装mongodb 2.安装mongodb数据库,这里不详细介绍了,安装网址:http://www.jb51.net/article/82522.htm CRUD操作 在此之前应对MongoDB数据库有所了解,知道它的一些增删查改命令. 1.增加 var MongoClient = require("mongodb").MongoClient; var DB_URL = "mongodb://localhost:27017/chm"; fun

nodeJS删除文件方法示例

本文实例讲述了nodeJS删除文件方法.分享给大家供大家参考,具体如下: var fs = require("fs"); var path = require("path"); deleteFolderRecursive = function(url) { var files = []; //判断给定的路径是否存在 if( fs.existsSync(url) ) { //返回文件和子目录的数组 files = fs.readdirSync(url); files.

nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例

http模块内部封装了http服务器和客户端,因此Node.js不需要借助Apache.IIS.Nginx.Tomcat等传统HTTP服务器,就可以构建http服务器,亦可以用来做一些爬虫.下面简单介绍该模块的使用,其具体API,大家可以自行去nodejs官方文档查看. 1.http.Server服务器 使用http.createServer([requestListener])方法创建一个http服务器,该方法返回一个新的http.Server实例,如果指定了requestListener,则

简单实现nodejs上传功能

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 npm install formidable var formidable = require('formidable'), http = require('http'), util = require('util'); http.createServer(function(req, res) { if (req.url == '/index' && req.method.toLowerCase() ==

NodeJS实现客户端js加密

思路: 服务端渲染业务代码js => 前后端约定加密算法 => 业务代码进行签名 => 客户端解密业务代码 => eval 执行 Node 路由示例: /** * 请自定义 restful API 这里以 GET 为例 * @param {req} * @param {res} * @return {next()} */ //var util = require('utility'); exports.encryption = function(req, res){ //GET v

基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析

这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能,总结前端学习过的内容. 技术:NodeJS.Express.Monk.MongoDB.AngularJS.BootStrap.跨域 效果: 一.Bootstrap Bootstrap是一个UI框架,它支持响应式布局,在PC端与移动端都表现不错. Bootstrap是Twitter推出的一款简洁.直

Highcharts+NodeJS搭建数据可视化平台示例

前一段时间完成了一个数据可视化项目,由后台NodeJS+Highcharts框架进行搭建.下面分享一下整个开发过程的流程,以及使用Highcharts框架的经验. 一.数据的读取 由于数据库使用的是MySQL数据库,在NodeJS中,可以使用NodeJS中的mysql模块进行mysql数据库的相关操作,通过npm安装即可. 1.数据库基本配置 为了方便,我们最好先进行一个数据库连接的基本配置,mysql模块需要的配置信息如下: var connection = mysql.createConne

nodejs搭建本地服务器并访问文件操作示例

本文实例讲述了nodejs搭建本地服务器并访问文件操作.分享给大家供大家参考,具体如下: 安装node:https://nodejs.org/en/download/ 在本地建立目录:f:/nodetest,在该目录下新建index.html作为我们将要访问的内容.新建server.js作为node开启的入口: $ cd f:/nodetest $ mkdir index.html $ mkdir server.js index.html文件里简单写一点东西: <!DOCTYPE html>

NodeJS简单实现WebSocket功能示例

本文实例讲述了NodeJS简单实现WebSocket功能.分享给大家供大家参考,具体如下: 我们基于express和socket.io开发,首先我们需要安装以下包 npm install --save express npm install --save socket.io 服务器端代码: var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(ht

Docker搭建代码检测平台SonarQube并检测maven项目的流程

1 前言 良好的代码习惯是一个优秀程序员应该具备的品质,但靠人的习惯与记忆来保证代码质量,始终不是一件靠谱的事.在计算机行业应该深知,只要是人为的,都会有操作风险.本文讲解如何通过Docker搭建代码检测平台SonarQube,并使用它来检测maven项目的代码. 2 Docker安装SonarQube 2.1 安装 通过Docker安装,方便快捷,不需要时直接删掉容器和镜像就好了. # 拉取Sonar镜像 docker pull sonarqube:8.3.1-community # 运行实例

基于vue.js快速搭建图书管理平台

Vue.js是当下很火的一个JavaScript MVVM(Model-View-ViewModel)库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 上一期简单讲解了vue的基本语法,这一次我们做一个小项目,搭建一个简单的图书管理平台,能够让我们更深刻的理解这门语言的妙用. 1.DEMO样式 首先我们需要搭建一个简单的demo样式,推荐大家使用bootstrap,可以很快的搭建出一个清

nodejs 搭建简易服务器的图文教程(推荐)

www文件夹下 template文件夹下 server.js代码: const express=require('express'); const static=require('express-static'); //托管静态文件 const cookieParser=require('cookie-parser'); //解析cookie const cookieSession=require('cookie-session'); //解析session const bodyParser=r

轻松实现python搭建微信公众平台

本文主要是一步一步教大家如何利用python搭建微信公众平台,有兴趣的朋友可以参考一下 使用的工具,python 新浪SAE平台,微信的公众平台 你需要先在微信的公众平台与新浪SAE平台上各种注册,微信平台注册的时候需要你拍张手持身份证的照片,还有几天的审核期 微信公众平台:http://mp.weixin.qq.com 新浪SAE:http://sae.sina.com.cn/ 等待微信公众审核通过后,登录公众平台后,点击高级功能.将会看到需要提供一个接入信息: 微信接口配置 那么我们需要一个

利用Python代码实现数据可视化的5种方法详解

前言 数据科学家并不逊色于艺术家.他们用数据可视化的方式绘画,试图展现数据内隐藏的模式或表达对数据的见解.更有趣的是,一旦接触到任何可视化的内容.数据时,人类会有更强烈的知觉.认知和交流. 数据可视化是数据科学家工作中的重要组成部分.在项目的早期阶段,你通常会进行探索性数据分析(Exploratory Data Analysis,EDA)以获取对数据的一些理解.创建可视化方法确实有助于使事情变得更加清晰易懂,特别是对于大型.高维数据集.在项目结束时,以清晰.简洁和引人注目的方式展现最终结果是非常

Python实现数据可视化看如何监控你的爬虫状态【推荐】

今天主要是来说一下怎么可视化来监控你的爬虫的状态. 相信大家在跑爬虫的过程中,也会好奇自己养的爬虫一分钟可以爬多少页面,多大的数据量,当然查询的方式多种多样.今天我来讲一种可视化的方法. 关于爬虫数据在mongodb里的版本我写了一个可以热更新配置的版本,即添加了新的爬虫配置以后,不用重启程序,即可获取刚刚添加的爬虫的状态数据. 1.成品图 这个是监控服务器网速的最后成果,显示的是下载与上传的网速,单位为M.爬虫的原理都是一样的,只不过将数据存到InfluxDB的方式不一样而已, 如下图. 可以

Python 数据可视化pyecharts的使用详解

什么是pyecharts? pyecharts 是一个用于生成 Echarts 图表的类库. echarts是百度开源的一个数据可视化 JS 库,主要用于数据可视化.pyecharts 是一个用于生成 Echarts 图表的类库.实际上就是 Echarts 与 Python 的对接. 使用 pyecharts可以生成独立的网页,也可以在 flask , Django中集成使用. pyecharts包含的图表 Bar(柱状图/条形图) Bar3D(3D 柱状图) Boxplot(箱形图) Effe