首页解决方案 成功案例 网络营销 新闻中心 关于我们
QQ联系
电话联系
手机联系

新零售系统

新零售系统
连锁门店会员管理系统

连锁门店会员管理系统

收银、会员卡、库存管理、员工绩效等
小程序门店预约系统

小程序门店预约系统

预约+商城+到店核销+员工管理等
小程序电商系统

小程序电商系统

直播带货、拼团、秒杀、分销、优惠券等
进销管理系统(ERP)

进销管理系统(ERP)

进货、销售、仓库管理
客户关系管理系统(CRM)

客户关系管理系统(CRM)

客户、商机、合同、绩效等

政务办公及基层治理大数据服务

街道党群服务中心

基层党群运营管理系统

党群服务中心、资讯、活动、积分制度管理等
乡村振兴服务平台

乡村振兴积分制服务平台

居民积分、社区活动、社区任务等
党建积分制管理

党建积分制管理

党员积分、党组织活动、组织任务、组织学习等
政务大数据中心

政务大数据平台

数据汇聚、数据治理、数据应用

物业运营管理系统

物业运营管理系统
智慧社区

智慧社区

在线缴费、楼栋管家、报事报修等
停车缴费管理系统

停车缴费管理系统

无人值守、在线缴费等

物业收费管理系统

资源管理、收费管理、财务监督报事报修等

企业信息化

集团办公OA

集团办公OA

OA协同办公系统的研发与创新
模板网站

模板网站

模板快速建站专家
云考试系统

云考试系统

提升知识培训考试管理水平,节省培训考试成本

初学者的 Node.js 使用指南

发布时间:2024-07-31 09:54:13
发布者:内容管理员
浏览次数:169


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请求。

这个回调函数有两个参数,reqres,分别指代的是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是一项令人惊叹的技术,而且由于其庞大的社区,其可能性是无穷无尽的。