广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >进阶之初探nodeJS
  • 829

0
分享到

进阶之初探nodeJS

进阶nodeJS 2022-06-04 17:06:21 829人浏览 泡泡鱼
摘要

一、前言 在"初探nodejs"随笔中，我们对于node有了一个大致地了解，并在最后也通过一个示例，了解了如何快速地开启一个简单的服务器。 今儿，再次看了该篇随笔，发现该随笔理论知识稍多，适合初级入门nod

一、前言

在"初探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.

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 进阶之初探nodeJS

本文链接: https://www.lsjlt.com/news/12832.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 进阶之初探nodeJS
    一、前言 在"初探nodeJS"随笔中，我们对于node有了一个大致地了解，并在最后也通过一个示例，了解了如何快速地开启一个简单的服务器。 今儿，再次看了该篇随笔，发现该随笔理论知识稍多，适合初级入门nod...
    99+
    2022-06-04
    进阶 nodeJS
  • Nodejs初级阶段之express
    上一篇《node.js 初体验》写的也不错，感兴趣的朋友可以了解下。 Node和NPM的安装够便捷了，不细说...有几点基础顺手提一下： 1.安装命令中的 “-g” 表示全局(global) 2.exp...
    99+
    2022-06-04
    初级阶段 Nodejs express
  • 初探nodeJS
    一、node概要 对nodeJS早有耳闻，但是一直迟迟没有对它下手，哈哈哈，今儿咱就来初探一下它。 nodeJS是个啥东东？ nodeJS，我的理解就是可以运行在后端的JavaScript。 为什么它能够在...
    99+
    2022-06-04
    nodeJS
  • C++初阶学习之模板进阶
    目录一、非模板类型参数二、模板特化1、函数模板特化2、类模板特化1）全特化2）偏特化三、模板分离编译四、模板总结总结一、非模板类型参数 分类： 模板参数分类类型形参与非类型形参 概念...
    99+
    2022-11-12
  • Javascript之JSBridge初探
    目录JSBridge 的起源JSBridge 的双向通信原理JS 调用 NativeNative 调用 JSJSBridge 的使用总结JSBridge 的起源 近些年，移动端普及化...
    99+
    2022-11-12
  • python之初探编程
        接触python语言完全是个偶然。那时候还在一所培训学校里学习网络和系统，和朋友一起去图书馆淘书，转遍了整个楼层，只是找到了一两本感兴趣的计算机方面的书，朋友选的很快，开始催我回去了，真是纠结，拿着借阅卡一次可以借5本，图书馆也挺远...
    99+
    2023-01-31
    python
  • 初探Java之旅：探寻Java的奥秘
    ✨个人主页：全栈程序猿的CSDN博客 💨系列专栏：Java从入门到精通 ✌座右铭：编码如诗，Bug似流星，持续追求优雅的代码，解决问题如同星辰般自如 在计算机编程的世界中，有一门被誉为“千变万化”的编程语言——Jav...
    99+
    2023-12-23
    java
  • python3爬虫初探（六）之EXCEL
    　在爬取数据之后，数据的保存就成为一个新的问题，一般不太大的的数据存储到EXCEL就可以了。这里介绍一个python的第三方库——xlsxwriter. 这个库的安装就不介绍了，pip就可以，不用FQ。这里仅介绍一些简单常用的命令。 　首...
    99+
    2023-01-31
    爬虫 EXCEL
  • Python 命令行之旅 —— 初探
    『讲解开源项目系列』启动——让对开源项目感兴趣的人不再畏惧、让开源项目的发起者不再孤单。跟着我们的文章，你会发现编程的乐趣、使用和发现参与开源项目如此简单。欢迎联系我们给我们投稿，让更多人爱上开源、贡献开源～ 前言 你是否好奇过在命令行中...
    99+
    2023-01-31
    之旅 命令行 Python
  • JavaScript进阶学习之初识类、函数进阶、如何改变this指向
    以上就是JavaScript进阶学习之初识类、函数进阶、如何改变this指向的详细内容，更多请关注编程网其它相关文章！...
    99+
    2022-11-22
    javascript
  • Nodejs爬虫进阶教程之异步并发控制
    之前写了个现在看来很不完美的小爬虫，很多地方没有处理好，比如说在知乎点开一个问题的时候，它的所有回答并不是全部加载好了的，当你拉到回答的尾部时，点击加载更多，回答才会再加载一部分，所以说如果直接发送一个问题...
    99+
    2022-06-04
    进阶 爬虫 教程
  • Python探索之Metaclass初步了解
    先以一个大牛的一段关于Python Metapgramming的著名的话来做开头： Metaclasses are deeper magic than 99% of users should ever w...
    99+
    2022-06-05
    Python Metaclass
  • 数据库之增删改查初探
    插入数据：insert into 表名（列名1，列名2.........）values (值1，值2)如果插入多条数据则insert into 表名（列名1，列名2.........）values (值1，...
    99+
    2022-10-18
  • C++初阶教程之类和对象
    目录类和对象<上>1. 类的定义2. 类的封装2.1 访问限定修饰符2.2 类的封装3. 类的使用3.1 类的作用域3.2 类的实例化4. 类对象的存储5. this 指...
    99+
    2022-11-13
  • 详解C语言初阶之函数
    目录 1.main函数2.自定义函数2.1  函数的的封装和面向过程的思维3.函数的组成3.1函数的命名法3.2函数的返回值3.2.1void类型补充：3.3形参...
    99+
    2022-11-12
  • 详解C语言初阶之数组
    目录1.数组1.1数组的概念1.2数组的定义 a：完全初始化b：不完全初始化 c：给定元素个数d：不给定元素个数1.3数组的下标访问总结1.数组 1.1数组的概念 所谓数组...
    99+
    2022-11-12
  • 带你了解C++初阶之引用
    目录一、 引用概念二、 引用特性三、 常引用四、 使用场景1、做参数 指针引用2、做返回值 2.1、传值返回2.2、传引用返回小结引用做返回值五、函数参数及返回值...
    99+
    2022-11-12
  • 学习Android开发之RecyclerView使用初探
    在进行一些MaterialDesign规范开发的时候，比如之前说到的CoordinateLayout实现的向上折叠效果的时候，如果依然使用ListView，那么这种效果是做不出...
    99+
    2022-06-06
    recyclerview android开发 Android
  • redis初探之主从与哨兵部署
    一、单机版radis部署 1、安装gcc yum install gcc 2、安装redis tar -zxvf redis-3.2.9.tar.gz -C /usr/src/ cd /usr/src/re...
    99+
    2022-10-18
  • Nodejs进阶之服务端字符编解码和乱码处理
    写在前面 在web服务端开发中，字符的编解码几乎每天都要打交道。编解码一旦处理不当，就会出现令人头疼的乱码问题。 不少从事node服务端开发的同学，由于对字符编码码相关知识了解不足，遇到问题时，经常会一筹莫...
    99+
    2022-06-04
    进阶 乱码 服务端
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作