Node.js 初学者教程

介绍
首先,让我们继续将Node.js下载到我们的机器上。您可以从其官方网站 ( nodejs.org ) 找到并下载 Node。进入主页后,选择您喜欢使用的版本。在下面的屏幕截图中,左侧选项 (8.12.0) 是最新的稳定版本。 

Node.js 下载

您的计算机将引导您完成几个提示的弹出窗口,然后您应该可以很好地使用 Node.js。然后你可以打开你的终端(无论你的机器上有哪个)并开始使用我们将要讨论的命令。此外,我将使用 Atom 代码编辑器,但您可以随意使用最适合您的那个(VS Code、SublimeText 等)。

项目构想
我将基于 Udemy 课程(在此处找到)中我断断续续使用了一段时间的项目来构建我在本系列中使用的应用程序。我喜欢旅行,美国国家公园是我最喜欢去的地方之一。为了自学 Node.js、Express.js、模板引擎和 Bootstrap 等主题,我将设计一个应用程序来跟踪我的公园旅行。在本系列的第 1 部分中,我们将使用 Node 和 Express 启动并运行一些服务器。  

结识节点
Node 的全部意义在于创建一个可以在后端使用 JavaScript 的环境。为此,在开始创建网页之前,我想花点时间探讨一下如何在控制台中使用 Node。为此,让我们着手设置我们将用于运行未来应用程序的服务器。  

设置快递
最好、最普遍的 Node 包之一是 Express.js,这就是我们将在本文的其余部分关注的内容。 

Express 文档可以在 npm 的官方网站here或 Express 的官方网站 找到。根据 npm 文档,使用 Express 的一些优点是: 

强大的路由。

HTTP 助手(重定向、缓存等)。

支持 14+ 模板引擎的视图系统。

总而言之,它是一个功能强大的软件包,非常适合像我这样的初学者和希望深入研究 Node.js 的经验丰富的开发人员。 

首先,我们需要创建我们将在其中工作的目录。这是一个简单的$mkdir 命令,后面是我们希望创建的目录的名称(我将此文件称为 dzone_app1)。接下来,我们需要cd 进入我们新创建的目录并使用$touch 命令来创建将保存我们的服务器逻辑的应用程序;我已将我的index.js文件命名为 ,尽管我已经看到一些教程将其与名称为server.js.  

安装 Express 很容易。在您的终端中,键入命令:npm intsall express --save。Node 的一大优点是它连接到官方的节点包管理器(简称 npm)包存储库。意思是,在我们刚刚使用的命令中,npm 是告诉 Node 从这个存储库中提取数据到install包express中。该--save 命令的一部分会将 Express 保存在此应用程序中,因此我们不必担心稍后重新安装它。 

好的,现在我们实际上可以进行一些编码了。在 index.js 文件中,让我们使用以下代码告诉应用程序我们正在使用 Express:


虽然也可以var 为此使用变量声明符,但当前文档表明这const 是最佳实践。 

要启动并运行服务器,我们需要在 index.js 文件中使用以下代码: 


重新启动服务器并导航到/parks 页面后,我们应该会在网页上看到消息“The Parks You've Seen”的小字体。 


模板引擎简介
模板引擎本质上是一些软件,允许您在使用我们探索过的强大的 Node/Express 组合创建的网页上呈现标记。Express docs给出的解释比我这样的初学者开发者能做的要好得多,如下所示: 

模板引擎使您能够在应用程序中使用静态模板文件。在运行时,模板引擎用实际值替换模板文件中的变量,并将模板转换为发送给客户端的 HTML 文件。这种方法使设计 HTML 页面变得更加容易。

根据这些相同的文档,使用 Node 和 Express 的 Web 开发人员倾向于使用三种流行的模板引擎之一:Pug、Mustache和EJS。在浏览了每个选项的文档之后,我最终决定使用 EJS,因为它允许我使用实际的 HTML 来创建我的标记,而不是语法相似但最终不同的代码风格。 

为了给出这三个模板引擎的快速示例,我将展示如何使用每个模板引擎创建一个简单的列表。(注意:本节中 Pug 和 Mustache 的代码取自上面链接的文档。)


在 EJS 中,我们所要做的就是创建一个 .ejs 文件,比如说 landing.ejs,在我们的 Express 代码中链接这个页面,然后输入常规的旧 HTML。这是一个例子: 

app.js(节点/快递代码)

它们广受欢迎,周围有庞大的开源社区。无论您选择三者中的哪一个,您都将使用出色的软件。EJS 对我(诚然很奇怪)的想法最有意义。 

我让事情变得漂亮(ish)
正如所承诺的那样,我们将使我们必须使用基本 Express 呈现的基本页面实际上看起来像一个网页(当然,起初,它看起来像 90 年代的东西)。这就是我将 EJS 引入本教程的原因。 

要将 EJS 安装到您的机器上,请运行命令  npm i ejs --save。就像上面关于在 EJS 中创建列表的部分一样,我们必须修改我们用来启动和运行我的 Node 服务器和 Express 页面的 app.js 文件。在这个文件中,我们必须告诉 Node 我们正在使用 EJS 作为我们的模板引擎。我们可以这样做: 

const ejs = require('ejs');

app.set ("view engine", "ejs");
好的,现在 Node 知道使用 EJS 来呈现我们网页的标记。惊人的!接下来,我们需要创建一些实际的 EJS 文件。这部分很简单。cd 进入我们的 dzone_app1 项目,并使用命令 $mkdir views 创建一个 views 目录。在这个目录中,让我们使用命令创建我们的第一个 EJS 文件(我将我的文件命名为landing.ejs)$touch landing.ejs。 

极好的!现在我们已经有了该文件,我们可以输入以下 HTML: 


然后,如果我们使用 node app.js 命令运行我们的服务器,我们应该会在页面上看到 HTML 渲染。  app.js 命令输出

为了了解应用程序的基本框架,让我们再创建一个页面,我将在我的 app.js 文件中将其表示为/parks。创建此页面服务器端的 JavaScript 将如下所示: 
然后 $touch 另一个 EJS 文件 parks.ejs,并用基本的 h2 标签标记它(更多的是为了组织目的而不是编码原因)。 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

千源万码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值