掌握Node应用程序的完整指南

DebugUsery
142 阅读9分钟

掌握Node应用程序的完整指南

Node App

目录

Node或Node.js是一个开源的、跨平台的运行环境，允许开发者用JavaScript创建服务器端工具和应用程序。

什么是NPM？

Node Package Manager（NPM）是一个用于Node App平台的JavaScript包管理器。

NPM是世界上最大的软件注册中心。全世界的开源开发者都使用它来发布和分享他们的代码。

NPM是必需的，原因如下--

  • 你可以使用该网站来搜索第三方软件包，创建配置文件，并管理你的软件包。
  • 命令行界面或NPM CLI允许你从终端与NPM通信。
  • 注册表是一个对公众开放的JavaScript代码的大数据库。

要在你的电脑上找到NPM CLI，从终端运行NPM命令。

npm

例如，下面的命令将得到显示在你系统上的当前NPM版本。

npm -v

NPM的用法

你可以使用NPM从注册表中安装一个新的软件包。此外，NPM使你能够找到并发布新的节点包。

什么是Express？

Node.js利用Express服务器网络应用框架来创建Node应用（或）网络应用。你可以使用各种前端框架用Express构建用户界面；这里使用Pug，以前叫Jade，作为其前端框架。

Express在Node应用中的特点

  • 性能。Express增加了一层薄薄的基本Web应用功能，而不会掩盖你已经知道并欣赏的Node.js功能。
  • APIs。使用各种HTTP实用方法和中间件，你可以快速而轻松地建立一个强大的API。
  • 框架。Express是许多著名框架的基础。
  • 网络应用。Express是一个Node.js网络应用框架，为网络和移动应用提供了全面的功能。

先决条件

以下是创建一个Node App的要求。

  • Node.js开发工作负载已安装在Visual Studio中。

下载并安装Visual Studio -

  1. 要免费获得Visual Studio，请到Visual Studio下载网站。
  2. 在Visual Studio安装程序中选择Node.js开发工作负载，然后点击安装。

如果你已经安装了Visual Studio，请按照以下步骤操作-- 1.

  1. 在Visual Studio中转到工具>获取工具和功能。
  2. 要下载并安装Node.js开发工作负载，请进入Visual Studio安装器并选择修改。
  • 安装Node.js运行时。

如果你还没有Node.js网站上的Node.js运行时的LTS版本，就安装它。其他框架和库也与LTS版本兼容。

Node.js工具在Visual Studio Node.js工作负载中支持Node.js的32位和64位架构版本。只需要一个版本的Visual Studio；Node.js安装程序一次只支持一个版本。

安装的Node.js运行时通常由Visual Studio自动检测。如果不是这样，你可以设置你的项目来使用已安装的运行时:

  1. 右键单击项目节点，在创建后选择属性。
  2. 在属性选项卡中把Node.exe路径设置为全局或本地Node.js安装。在你的每个Node.js项目中，你可以定义到本地解释器的路径。

为Node应用创建一个新的Node.js项目

在一个项目中，Visual Studio维护单个应用程序的文件。源代码、资源和配置文件都包含在项目中。

让我们看看如何为Node应用创建一个新的Node.js项目，在当前的背景下，以一个带有Node.js和ExpressJSNode应用代码的小项目为例。

1.要关闭启动窗口，打开Visual Studio并点击Esc。

2.按Ctrl+Q从下拉列表中选择Basic Azure Node.js Express 4 Application-JavaScript，在搜索栏中输入node.js。

如果你没有看到Basic Azure Node.js Express 4 Application选项，请安装Node.js开发工作负载。请参阅先决条件以了解更多信息。

3.在 "配置你的新项目 "对话框中选择创建。

新的解决方案和项目会在Visual Studio中创建，项目会在右边窗格中打开。app.js项目文件出现在编辑器的左窗格中。

4.在右侧窗格中，查看解决方案资源管理器中的项目结构。

NodeApp_1.

  • 解决方案(1)位于层次结构的顶端，默认情况下它的名字与你的项目相同。一个解决方案是一个或多个连接项目的容器，由光盘上的.sln文件表示。
  • 你的项目（2）以黑体字突出显示，其名称是你在 "配置你的新项目 "对话框中给出的。该项目是文件系统中你的项目文件夹中的.njsproj文件。

通过右击该项目并从上下文菜单中选择参数，你可以看到并改变项目属性和环境变量。因为项目文件不会对Node.js项目源做任何具体的改变，你可以使用其他的开发工具。

  • NPM节点（3）显示任何已经安装的NPM包。你可以通过右键单击NPM节点，使用对话框来搜索和安装NPM包。

使用package.json设置和NPM节点的右击选项，你可以安装和更新包。

  • 在项目节点下，有四个项目文件。app.js项目启动文件以黑体字突出显示。

通过右键单击项目中的任何文件，并选择设置为Node.js启动文件，你可以设置一个启动文件。

  • NPM使用package.json文件（5）管理本地安装的包的依赖关系和版本。参见管理NPM包以了解更多细节。

5.打开NPM节点，确保所有需要的NPM包都存在。

如果有任何包（缺失），右键单击NPM节点，选择安装NPM包，并安装缺失的包。

添加一些代码

该应用程序的前端JavaScript框架是Pug。Pug通过简单的标记代码生成HTML。

通过代码app.set('view engine', 'pug');，Pug被配置为app.js的视图引擎。

1.在解决方案资源管理器中访问视图文件夹，然后选取index.pug来打开该文件。

2.用下面的标记替换其中的内容。

extends layout

block content

  h1= title

  p Welcome to #{title}

  script.

    var f1 = function() { document.getElementById('myImage').src='#{data.item1}' }

  script.

    var f2 = function() { document.getElementById('myImage').src='#{data.item2}' }

  script.

    var f3 = function() { document.getElementById('myImage').src='#{data.item3}' }

  button(onclick='f1()') One!

  button(onclick='f2()') Two!

  button(onclick='f3()') Three!

  p

  a: img(id='myImage' height='300' width='300' src='')

前面的代码创建了一个带有标题和欢迎信息的HTML页面。该页面还有一些代码，可以让你看到一个图像，当你按下一个按钮时，这个图像会发生变化。

3.打开路由文件夹中的index.js。

4.在router.get之前，添加以下代码

var getData = function () {

var data = {

'item1': 'https://images.unsplash.com/photo-1563422156298-c778a278f9a5',

'item2': 'https://images.unsplash.com/photo-1620173834206-c029bf322dba',

'item3': 'https://images.unsplash.com/photo-1602491673980-73aa38de027a'

}

return data;

}

这段代码建立了一个数据对象，你可以将其发送到动态生成的HTML页面。

5.用一个新的路由器替换。用下面的方法来调用这个函数。

router.get('/', function (req, res) {

res.render('index', { title: 'Express', "data" });

});

附带的代码使用Express路由器对象来设置当前页面并渲染它，将标题和数据对象发送到页面。当index.js执行时，代码将index.pug文件定义为要加载的页面。index.js被设置为app.js代码中的默认路由，这里没有看到。

在包含res.render的代码中，有一个故意的错误，以演示Visual Studio的各种功能。IntelliSense将协助你解决这个错误，以便应用程序能够在下一阶段运行。

使用IntelliSense

IntelliSense是Visual Studio的一项功能，在创建Node App时协助你进行代码编写。

1.在Visual Studio代码编辑器中，转到index.js中包含res.render的代码。

2.2.将你的光标放在字符串 "data "的后面，然后输入get。你之前在代码中定义的getData方法会被IntelliSense显示出来。选择getData。

NodeApp_2

3.为了使代码成为一个函数调用，添加括号：getData()。

4.4.在 "data "之前，删除逗号。该表达式有绿色的语法高亮显示。将鼠标悬停在语法高亮上，看看它是什么意思。

NodeApp_3.

信息的最后一行告诉你，JavaScript解释器希望有一个逗号。

5.在下面的窗格中选择错误选择标签，对于报告的问题类型，从下拉列表中选择Build + IntelliSense。

警告和描述，以及文件名和行号，都显示在这个窗口中。

NodeApp_4.

6.替换代码中 "data "前的逗号。

修正后的一行代码应该是这样的：res.render('index', 'Express' as title, "data" as getData())。

运行Node应用程序

然后，连接Visual Studio调试器，执行该应用程序。要开始，你必须首先设置一个断点。

确定一个断点

断点是一个可靠的调试系统的最基本方面。一个断点是你运行的代码中的一个点，Visual Studio应该将其暂停。变量值、内存行为、以及代码的一个分支是否在运行，都可以通过这种方式观察。

  • 在index.js中，点击下面一行代码前的左边，建立一个断点。
res.render('index', 'Express' as title, "data" as getData() )。

在调试模式下运行应用程序

1.在调试工具栏中，选择一个调试目标，如网络服务器（Google Chrome）或网络服务器（Internet Explorer）（Microsoft Edge）。

如果你知道你喜欢的调试目标存在于你的机器上，但它没有作为一个选项出现，请从调试目标下拉列表中选择浏览。从下拉菜单中选择 "设置为默认 "作为您的默认浏览器目标。

2.要执行Node应用程序，请按F5或转到调试>开始调试。

调试器会在你指定的断点处暂停，让你分析你的应用程序的状态。

3.将鼠标悬停在DataTip中的getData上，以查看其特征。

4.要继续运行软件，按F5或选择调试>继续。

该软件是通过一个网络浏览器访问的。浏览器窗口的标题应该是Express，而第一段应该是欢迎来到Express。

5.要看到不同的图像，请按一！、二！或三！按钮

6.关闭浏览器窗口。

向最好的人学习Node.js!

Node.js是一个跨平台的服务器环境，使用V8 JavaScript引擎来执行JavaScript。Node.js使前端和后端代码可以用同一语言编写。它有助于开发实时应用程序的高效代码。Node应用程序可以在Node.js中使用基于控制台或基于网络的技术来创建。

avatar
文章
阅读
粉丝