进阶之初探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以及贺岁图,如下:

 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‘});

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

最后,祝大家新年快乐~

时间: 2024-10-09 11:15:37

进阶之初探nodeJS的相关文章

初探nodeJS

node概要 对nodeJS早有耳闻,但是一直迟迟没有对它下手,哈哈哈,今儿咱就来初探一下它. nodeJS是个啥东东? nodeJS,我的理解就是可以运行在后端的JavaScript. 为什么它能够在后端运行呢? 这就得归功于V8引擎(V8是Google Chrome浏览器的JavaScript引擎),通过对高性能V8引擎的封装,并通过一系列优化的API类库,使其就能够在后端运行了. 并且node有两大特点: 1.基于事件驱动: 2.无阻塞. 从而nodeJS非常适合处理并发请求. 大家都知道

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

何为UDP(User Datagram Protocol)? 从baidu摘过来一段:UDP,用户数据报协议,与所熟知的TCP(传输控制协议)协议一样,UDP协议直接位于IP(网际协议)协议的顶层.根据OSI(开放系统互连)参考模型,UDP和TCP都属于传输层协议.UDP协议的主要作用是将网络数据流量压缩成数据包的形式.一个典型的数据包就是一个二进制数据的传输单位.每一个数据包的前8个字节用来包含报头信息,剩余字节则用来包含具体的传输数据. UDP报文没有可靠性保证.顺序保证和流量控制字段等,可

AngularJs我的学习整理(不定时修改)

最近一月份的日子,学习了AngularJs,还只是刚刚入门而已.了解了基本的语法规则以及很简单的应用.仔细想想,学习AngularJs的时间大概半个月的时间,每天花在AngularJs上两三个小时. 在短短的学习入门时间,也想简简单单地做一个阶段性的总结.下一次的学习应该是进阶.计划准备在NodeJs入门之后进阶AngularJs和NodeJs. AngularJs是什么东东? AngularJS 使得开发现代的单一页面应用程序变得更加容易(单一页面应用程序SPAs:Single Page Ap

细说gulp

细说gulp 一.概述&安装 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1.  压缩js 2.  压缩css 3.  压缩less 4.  压缩图片 等等… 我们完全可以利用Gulp来自动化地完成这些重复性很强的工作. 好了,废话不多说了.既然要了解Gulp,就得先安装它. Gulp是基于node来实现的,so你得先有个node环境(见“初探nodeJS”). node环境有了后,安装Gulp就很easy咯. 命令行中,输入npm install gul

ES6转换器之Babel

ES6部分功能没有支持,所以想学习ES6,得先有个转换器,就是将ES6的代码转换为ES5. 我这里用的是Gulp + Bable的形式来将ES6转换为ES5的. 前提: (1).Gulp和Bable都是基于node环境,如果不知道node,建议先看看”初探nodeJS”. (2).说到Gulp,如果你还不是很清楚的话,建议先了解Gulp(”细说Gulp”). OK,从无到有.接下来,我们就一步步搭建这个‘转换神器’吧. Get started 因为是Gulp + Bable的形式,所以得先安装g

借助node实战JSONP

一.前言: 浏览器安全是基于同源策略的.所谓同源策略就是三相同: 1.协议相同: 2.域名相同: 3.端口相同. 但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限制,其中有一方法就是JSONP. JSONP的基本思想:就是通过<script>的src,向服务器请求数据,且这不受同源策略限制(img和iframe的src也是如此):然后服务器将相应的数据放入指定的函数回调名中,返回给前端. 这,就实现了跨域请求信息. 如下图所示: 了解了JSONP的大体思路

java进阶06 线程初探

线程,程序和进程是经常容易混淆的概念. 程序:就是有序严谨的指令集 进程:是一个程序及其数据在处理机上顺序执行时所发生的活动 线程:程序中不同的执行路径,就是程序中多种处理或者方法. 线程有两种方法实现 一:继承Thread 覆盖run方法 package Thread; public class Thread1 { public static void main(String[] args){ MyThread1 thread1=new MyThread1(); thread1.setName

nodejs进阶3-路由处理

1. 路由选择过程 处理不同的HTTP请求在我们的代码中是一个不同的部分,叫做“路由选择”. 那么,我们接下来就创造一个叫做 路由 的模块吧.我们需要查看HTTP请求,从中提取出请求的URL以及GET/POST参数. url.parse(string).query | url.parse(string).pathname | | | | | ------ ------------------- http://localhost:8888/start?foo=bar&hello=world ---

Nodejs爬虫进阶教程之异步并发控制

Nodejs爬虫进阶教程之异步并发控制 之前写了个现在看来很不完美的小爬虫,很多地方没有处理好,比如说在知乎点开一个问题的时候,它的所有回答并不是全部加载好了的,当你拉到回答的尾部时,点击加载更多,回答才会再加载一部分,所以说如果直接发送一个问题的请求链接,取得的页面是不完整的.还有就是我们通过发送链接下载图片的时候,是一张一张来下的,如果图片数量太多的话,真的是下到你睡完觉它还在下,而且我们用nodejs写的爬虫,却竟然没有用到nodejs最牛逼的异步并发的特性,太浪费了啊. 思路 这次的的爬