使用 Express 从 NodeJS 服务器提供文件。

使用第三方 API 和 Nodejs 构建电话号码验证器 - 第 2 部分

如果你还没有读过以前的博客，你可以阅读它这里 .

在上一篇博客中，我们已经了解了如何使用 Nodejs 和 Express 运行服务器。在本博客中，我们将构建 Html、CSS 和 Javascript 的前端文件，我们将学习如何通过我们的服务器提供这些文件。

让我们从创建文件夹结构和新文件开始：

在我们之前创建的 Number Validator 文件夹中创建一个 HTML 文件，我们称之为 index.html
在根文件夹中创建另一个文件夹并将其命名为 ** 文件** 然后在其中创建两个文件 样式.css 和 index.js

您可以在方便时为这些文件命名。现在文件夹结构应如下所示：

接下来，让我们用 Html 和 CSS 构建我们的前端。为此，我将实施以下设计，但是如果您想以不同的方式设计它，请随意这样做。

Frontend Design

使用 HTML 创建应用程序内容：

理解以下代码的先决条件如下：

HTML 表单 , div、ID 和类 .

如果您有 HTML 的基本知识，您可以继续。

上面的 Html 代码将在 形式 , h1 和 div 标签。

在 - 的里面 形式 标签，有两个输入和一个提交按钮。这 方法 表单标签的属性指定表单数据如何发送到 行动 属性，即 / .这 方法 属性设置为一个值 邮政 . post 方法用于将数据发送到服务器。这将帮助我们获取存储在 db 中的用户数据。

在表单之后，我们创建了一个 div 和 id = "数据" .在 div 标签内部，有一堆 p 标签，每个标签都有 key-value 形式的文本。但是，每个键的值是 — 这是在里面 跨度 标签。稍后我们将使用 API 返回的实际数据动态替换它。

使用 CSS 进行样式设置

Step1：设置背景

背景图像可以通过使用 背景 财产。上面的代码为整个 HTML 正文设置了一个背景图像。它有一个颜色属性，所有文本都与页面中心对齐。这 高度 和 宽度 设置为设备的完整视口，即 100vh 和 100vw 分别。

这 显示：弯曲； 属性有助于为表单提供布局，它使弹性框（表单）的项目（输入字段）一个接一个地定位。

根据上面的设计，在背景图像的顶部，背景中有一个黑色的图层。要实现它，请执行以下操作：

** <div id = "layer"></div>**

在 HTML 页面的前面或后面添加一个带有 id 的空 div 身体 标签。使用以下属性对其进行样式设置

上面的代码将在背景图像上方应用一个浅黑色层。位置设置为绝对位置，相对于最近的祖先，在我们的例子中是身体。 opacity 属性增加了透明度，让我们看到它背后的内容。

Step2：内容布局和定位

要为上述设计中所示的表单提供布局，请使用以下属性：

box 类中的属性实现了边框和属性 居中对齐 和 对齐项目 帮助将 div 或表单放在中心，然后有一个 **.dispaly** **** 只有一个属性的类 **显示：无；** 这个属性基本上隐藏了元素，因为它从未被创建。

请注意，我们已将类显示分配给具有 id 数据的 div。我们这样做是因为我们要实现一个 UI，其中表单或 div 一次在屏幕上可见。用户提交表单后，div 将显示所有信息，表单将消失。同样，当用户单击 div 内的返回按钮时，表单将再次出现，而 div 将消失。我们将使用 Javascript 来实现这一点。

其余的设计，如按钮样式、字体等，您可以自己完成。如果您想要设计，与演示图像中显示的相同，那么您可以找到该设计的完整代码这里 .

Javascript & JQuery

现在，我们必须检测按钮的点击以将表单切换到数据 div，反之亦然，正如我们上面讨论的那样。我们可以使用事件监听器来实现这一点。在 index.js 文件中编写以下代码。

首先，我们使用 Jquery 语法选择表单按钮，然后调用 click 方法，该方法检测单击任何元素，然后调用给它的函数。在回调函数内部，我们使用了 addClass 方法将分配的类添加到元素。

第 2 行将在添加显示类时使表单消失，然后调用数据函数。在第 13 行的 data 函数中，为 data div 调用 removeClass 方法，这使得 div 可见，因为显示类将被删除

使用第 7 行到第 10 行的代码为数据潜水的“返回”按钮提供了相同的功能。

至此，我们完成了前端，让我们继续 应用程序.js 并从我们的服务器提供这些文件。

服务文件

在上一篇博客中，我们创建了一个服务器并响应了一条关于在 localhost 上发出请求的消息，代码如下：

现在，我们将修改此代码以从该服务器提供我们的文件。在上述代码的第 2 行之后和第 5 行之前添加以下行。

**app.use(express.static('files'));**

此行将提供文件目录中存在的所有静态文件，例如图像、HTML、CSS 和 Javascript。这 利用 函数有助于在指定的路径中使用函数（中间件）设置我们的应用程序，在我们的例子中，因为我们将“文件”文件夹添加到根目录，所以我只指定了“文件”。这 express.static 函数服务于指定目录中存在的所有文件，即 文件 在我们的例子中。

现在将第 6 行替换为以下代码：

**res.sendFile(__dirname + "\\index.html");**

这 发送文件 函数有助于将文件作为对指定路径的请求的响应。然后我们使用了 __目录名 ，它是一个环境变量，指的是当前文件所在目录的绝对路径，然后我们添加了 \index.html 文件名以完成路径以提供此文件。我使用双倍的原因 \\ 是为了逃避第二个反斜杠的含义，它是 index.html 的路径。

完毕！我们创建了一个提供文件的服务器。运行 app.js 然后输入 本地主机:80 在浏览器的搜索栏中，然后按 Enter，现在您应该会看到 index.html 文件，其中包含您在 CSS 和 javascript 功能中应用的所有样式。

最终代码如下所示：