初学者的 Node.js 使用指南
Node.js是一个JavaScript运行时环境,将其能力扩展到服务器端。它是建立在Chrome的V8 JavaScript引擎上。
Node是一个事件驱动的非阻塞I/O模型。这意味着它是异步的,不会因为一个请求而阻塞(而是立即移动到下一个请求),这使得Node异常快速和高效。
所谓事件驱动,是指一旦Node启动,它就会启动所有的变量和函数,并等待事件的发生。
NPM即Node包管理工具(Node Package Manager),辅助你管理Node包。NPX即Node包执行(Node Package Execute),它可以执行任何NPM包,甚至无需安装。
可以前往https://nodejs.org/en/download/下载NPM。
编写你的第一个Node.js项目(Hello World)
在你的项目文件中创建一个名为hello_world.js的文件。
然后在如VS Code这样的代码编辑器中打开文件。在编辑器中输入console.log(“Hello World”);
。
打开终端,并且导航到文件所在的位置。
输入node hello_world.js
。
如何导入Node核心模块
让我们从基础包开始,即fs(文件系统)。我们使用它来创建、读取和修改文件。
导入fs模块,输入命令:const fs = require(“fs”);
。
使用这个模块中的函数,可以参考文档。
创建文件,可以使用fs.writeFileSync(filename, content);
。
const fs = require(“fs”); fs.writeFileSync(“file.txt”, “Hi there..”);
在同一个文件中添加内容可以:
fs.appendFileSync(filename, content);.
如何安装NPM包
我们将使用一个名为superheroes(超级英雄) 的基础NPM包(包含了一个随机的超级英雄清单)来帮助你理解NPM是如何运作的。
我们可以在cmd中使用这条命令来安装任意NPM包:
npm install superheroes
现在输入const sh = require(“superheroes”);
导入这个安装好的包。
使用这条命令来随机展示超级英雄的名字:
console.log(sh.random());.
再来试一试另外一个包。让我们安装时下最流行的一个npm包——“chalk",这个包可以改变终端字符串的样式。
使用以下命令安装chalk(我们将安装版本2.4.2,在这个版本中可以使用require方法)。
npm install chalk@2.4.2
现在我们可以通过命令改变文本字符串演示,使用这条命令来选择文本颜色:
chalk.color(text)
更多信息参考chalk包的文档。
如何在程序中初始化NPM
我们可以使用以下命令来初始化NPM:
npm init
然后输入回车并且回答相应的问题:
或者你可以直接通过npm init -y
来完成初始化(相当于所有问题的答案都是回车)。
初始化完毕后会生成一个package.json文件:
所以,package.json是什么?
package.json是Nodejs项目的一部分。它包含了所有依赖项(NPM包)的记录和每一个项目的原数据。
如果其他人下载了这个项目,他们可以通过这个文件来安装所有运行程序需要的依赖项。
如何使用Moment.js — 一个NPM包
这是使用最多的NPM包之一,可以使用这个包来解析和验证日期。
使用以下命令安装包:
npm i moment
导入包:
const moment = require(“moment”);
通过创建一个Date对象来获取当前日期和时间(JavaScript方法),运行以下代码:
const time = new Date();
使用包里的moment方法来解析或者格式化日期:
const parsedTime = moment(time).format("h:mm:ss");
打印解析后的日期:
console.log(parsedTime);
该项目的package.json中包含的所有依赖项——这个例子中的依赖项就是moment。
在项目文件夹中也有node_modules文件夹。该文件夹包含了所有项目依赖的的依赖项,包含moment,以及moment依赖的依赖包。
package-lock.json是项目文件夹中另一个文件,包含了项目名称、依赖项、依赖项版本和锁定版本等信息。
该文件描述了项目生成的树,使后续安装可以生成相同的树。
如何使用Express JS——一个NodeJS框架
Express是Node.js的一个web应用框架,该框架提供了全面的功能来支持web和移动应用的开发。
如何安装Express
使用以下命令来创建Express:
npm install express
然后这样导入Express:
const express = require("express");
如何创建一个Express应用
使用以下命令来创建Express应用:
const app = express()
如何在端口3000启动服务器
app.listen(3000, () => { console.log("Server running on port 3000"); }
你可以打开http://localhost:3000登录你创建的服务器。
这里的“cannot get /”意味着还没有定义路由“/” 。
可以使用 app.get()
函数定义“/”路由。
app.get (route, callback function)函数被用于处理所有GET请求。
这个回调函数有两个参数,req和res,分别指代的是HTTP请求和期望的响应。参数名(req,res)并不是固定的,所以你可以重命名为其他值。
app.get("/", (req,res) => { // app.get处理GET请求 // req - http请求, res - 期望响应 res.send("Hello World"); // 给这个路由发送Hello World}
如何使用Express来创建Hello World程序
在这个部分中我们将使用Express创建基本的Hello World程序:
const express = require("express");const app = express(); app.get("/", (req, res) => { res.send("hello world"); }); app.listen(3000, () => { console.log("Server running on 3000"); });
输出如下:
如何在Express中渲染静态文件
这部分介绍如何使用Express来渲染静态文件的概念。
首先,创建一个新的项目文件夹,并且使用 npm init -y
来初始化npm。
使用 npm i express
来安装Express,并创建一个名为app.js的文件。
创建一个app,并在端口3000监听:
const express = require("express); const app = express(); app.listen(3000, () => { console.log("Server running on 3000"); }
在根目录创建一个名为public的文件夹,来渲染静态web页面,如:HTML、CSS和JS。
由于本教程重点在后端,所有我们不会花时间在前端部分,在public文件夹中,我们仅创建HTML文件。
我们将导入path模块,并将特定路径合并到一起:
const path = require(“path”);
并使用以下命令来渲染这些文件:
app.use(express.static(path.join(__dirname, “/public”)));
__dirname →返回当前目录
const express = require("express");const path = require("path");const app = new express(); app.use(express.static(path.join(__dirname, "/public"))); app.listen(3000, () => { console.log("Server running on 3000"); });
输出如下:
如何在Express中渲染动态文件
在这个部分我们将学习如何使用一个输入对象的值来渲染动态文件。
有一些,如:pug、handlebars、ejs等模板用于动态页面的渲染。这些模板使得我们可以在运行时注入动态数据、if条件和循环。
在这里我们将讨论handlebars。
安装包(express和hbs):
npm i hbs express
创建文件名为app.js的文件,并且导入包:
const express = require(“express”);const hbs = require(“hbs”);const path = require(“path”);
创建Express,并在端口3000监听:
const app = express(); app.listen(3000, (req,res) => { console.log("Server running on 3000"); }
将视图引擎(view engine)设置为hbs,使得handlebars生效:
app.set(“view engine”, “hbs”);
视图引擎使得我们可以使用特定模板来渲染动态页面。
基本上,视图引擎会在根目录里寻找“视图(views)”文件夹。但为了避免报错,我们将“views”的路径包含在参数中:
app.set(“views”, path.join(__dirname,“/views”);
然后在根目录中创建 views 文件夹,并在文件夹中创建index.hbs文件(.hbs是handlebars的扩展名)并插入以下HTML代码:
index.hbs
<html> <head> <title>Dynamic Rendering</title> </head> <body> <h1>Dynamic Rendering</h1> <p>{{author}}</p> <!--由服务器接受到的动态数据--> </body></html>
{{author}}
— 是插入动态数据的语法。
我们再创建一个app.get函数来处理路由"/"上的GET请求,并且发送动态数据author。
app.get("/", (req, res) => { res.render("index", { author: "Arash Arora", }); });
res.render
是一个渲染视图的函数,在这里我们传入了两个参数。第一个是去掉扩展名的文件名,第二个是本地变量对象,比方说author。
app.js文件
const express = require("express");const hbs = require("hbs");const path = require("path");const app = express(); app.set("view engine", "hbs"); app.set("views", path.join(__dirname, "/views")); app.get("/", (req, res) => { res.render("index", { author: "Arash Arora", }); }); app.listen(3000, (req, res) => { console.log("Server listening on 3000"); });
文件夹结构
输出如下:
如何使用Handlebars创建高级模板
在这一部分我们将学习可复用组件。在前面的章节我们给每一个页面的header和footer创建了相同的组件。
这里的重复性工作就可以通过高级模板来简化。也就是说我们创建一个组件,并在需要的地方反复使用。
Handlebars引入部分(Partials)的概念
Partials是可被其他模板调用的handlebar文件。Partials是一个被广泛应用的模板类概念,所以不仅限于Handlebars。
想要构建可以复用的模板,可以将它们单独放在同一个文件夹内(Partial),然后在不同的模板中使用。可以将Partial理解为模块化模板的一种简单技术。
可以通过以下步骤创建partial:
初始化npm → npm init -y
安装必要的包、Express以及hbs → npm i express hbs
创建文件夹模板 在文件夹模板内部创建另外两个文件夹:partials和views 创建文件app.js
文件结构类似
让我们创建两个partial文件:header.hbs和footer.hbs。同时也创建两个视图:index.hbs和about.hbs。
index.hbs
<html lang="en"> <head> <title>Advanced Templating</title> </head> <body> {{>header}} <!--包含header组件--> <p>I'm a savior</p> {{>footer}} <!-- 包含footer组件--> </body></html>
about.hbs
<html lang="en"> <head> <title>Advanced Templating -- About</title> </head> <body> {{>header}} <p>Handlebars</p> {{>footer}} </body></html>
header.hbs
<header> <h1>Advanced Templating</h1> <h3>{{title}}</h3><!--服务器传来的动态数据--> <a href="/">Home</a> <a href="/about">About</a></header>
footer.hbs
<footer> <p>Created by {{name}}</p> <!--name -> 动态数据 --></footer>
app.js
const express = require("express");const hbs = require("hbs");const path = require("path");const app = express(); app.set("view engine", "hbs"); app.set("views", path.join(__dirname, "/templates/views")); hbs.registerPartials(path.join(__dirname, "/templates/partials")); app.get("/", (req, res) => { res.render("index", { title: "Home", name: "Arash Arora", }); }); app.get("/about", (req, res) => { res.render("about", { title: "About", name: "Arash Arora", }); }); app.listen(3000, () => { console.log("Listening on port 3000"); });
这里基本和在Express中渲染动态数据章节类似,除了使用partial的时候我们需要注册partials。
如何注册partials
hbs.registerPartials(path_to_partials)
由于我们在模板文件夹中创建了partials目录,这里是 partials 的路径:
hbs.registerPartials(path.join(__dirname, "/templates/partials"));
总结
在这篇文章中,我们从理论到实践讲解了Node.js。虽然我们不能从一篇简短的文章中习得Node.js所有内容,但是我已经尽我所能地在这篇文章中涵盖了重要的知识点,来辅助你开启Node.js之旅。
简言之,我们讨论了什么是Node.js,即一个非阻塞、事件驱动的JavaScript运行时环境,它是异步的、可以使用单线程来执行操作。我们还讨论了使用最广泛的短小、灵活的Node.js的web应用框架——Express。
我们还讲解了Node.js的NPM、 NPX以及静态和动态渲染。
总而言之,Node.js是一项令人惊叹的技术,而且由于其庞大的社区,其可能性是无穷无尽的。