热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

进阶之初探nodeJS

本文主要介绍了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


 
 

 
 
{name},新de一年,一定要开心哦~
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.

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


推荐阅读
  • 微软头条实习生分享深度学习自学指南
    本文介绍了一位微软头条实习生自学深度学习的经验分享,包括学习资源推荐、重要基础知识的学习要点等。作者强调了学好Python和数学基础的重要性,并提供了一些建议。 ... [详细]
  • 如何实现织梦DedeCms全站伪静态
    本文介绍了如何通过修改织梦DedeCms源代码来实现全站伪静态,以提高管理和SEO效果。全站伪静态可以避免重复URL的问题,同时通过使用mod_rewrite伪静态模块和.htaccess正则表达式,可以更好地适应搜索引擎的需求。文章还提到了一些相关的技术和工具,如Ubuntu、qt编程、tomcat端口、爬虫、php request根目录等。 ... [详细]
  • Nginx使用AWStats日志分析的步骤及注意事项
    本文介绍了在Centos7操作系统上使用Nginx和AWStats进行日志分析的步骤和注意事项。通过AWStats可以统计网站的访问量、IP地址、操作系统、浏览器等信息,并提供精确到每月、每日、每小时的数据。在部署AWStats之前需要确认服务器上已经安装了Perl环境,并进行DNS解析。 ... [详细]
  • EPICS Archiver Appliance存储waveform记录的尝试及资源需求分析
    本文介绍了EPICS Archiver Appliance存储waveform记录的尝试过程,并分析了其所需的资源容量。通过解决错误提示和调整内存大小,成功存储了波形数据。然后,讨论了储存环逐束团信号的意义,以及通过记录多圈的束团信号进行参数分析的可能性。波形数据的存储需求巨大,每天需要近250G,一年需要90T。然而,储存环逐束团信号具有重要意义,可以揭示出每个束团的纵向振荡频率和模式。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • Centos7.6安装Gitlab教程及注意事项
    本文介绍了在Centos7.6系统下安装Gitlab的详细教程,并提供了一些注意事项。教程包括查看系统版本、安装必要的软件包、配置防火墙等步骤。同时,还强调了使用阿里云服务器时的特殊配置需求,以及建议至少4GB的可用RAM来运行GitLab。 ... [详细]
  • 禁止程序接收鼠标事件的工具_VNC Viewer for Mac(远程桌面工具)免费版
    VNCViewerforMac是一款运行在Mac平台上的远程桌面工具,vncviewermac版可以帮助您使用Mac的键盘和鼠标来控制远程计算机,操作简 ... [详细]
  • [译]技术公司十年经验的职场生涯回顾
    本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同,令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望,认为人类有能力不断改善自己。 ... [详细]
  • baresip android编译、运行教程1语音通话
    本文介绍了如何在安卓平台上编译和运行baresip android,包括下载相关的sdk和ndk,修改ndk路径和输出目录,以及创建一个c++的安卓工程并将目录考到cpp下。详细步骤可参考给出的链接和文档。 ... [详细]
  • 如何用UE4制作2D游戏文档——计算篇
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了如何用UE4制作2D游戏文档——计算篇相关的知识,希望对你有一定的参考价值。 ... [详细]
  • 本文介绍了使用PHP实现断点续传乱序合并文件的方法和源码。由于网络原因,文件需要分割成多个部分发送,因此无法按顺序接收。文章中提供了merge2.php的源码,通过使用shuffle函数打乱文件读取顺序,实现了乱序合并文件的功能。同时,还介绍了filesize、glob、unlink、fopen等相关函数的使用。阅读本文可以了解如何使用PHP实现断点续传乱序合并文件的具体步骤。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
author-avatar
醒来时t我尚年少你未老
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有