使用 Node.js 和 Express 建立基础 Web 服务器,用于提供 HTML 文件和静态资源

阅读时长 4 分钟读完

当我们构建一个 Web 应用程序时,经常需要使用服务器来托管我们的应用程序。Node.js 是一种非常流行的 JavaScript 运行时环境,可以用于构建服务器端应用程序。而 Express 则是 Node.js 中最流行的 Web 框架之一,提供了许多有用的功能来开发 Web 应用程序。

在本篇文章中,我将向您展示如何使用 Node.js 和 Express 构建一个基础的 Web 服务器,该服务器可以用于提供 HTML 文件和静态资源。这个教程适合那些想要学习如何构建 Node.js 和 Express 服务器的初学者。

步骤 1:安装 Node.js 和 Express

首先,我们需要安装 Node.js 和 Express。如果您还没有安装 Node.js,则可以去官网进行下载。安装后,打开终端并运行以下命令来创建一个新的 Node.js 项目:

接下来,我们需要安装 Express:

这将会在我们的项目中安装 Express 模块,并将其添加到 package.json 文件中。

步骤 2:创建服务器文件

现在我们已经完成了安装,我们可以创建一个服务器文件来启动我们的 Web 服务器。在您的项目目录中,创建一个名为 server.js 的文件,并将以下代码复制到该文件中:

在这个代码中,我们首先导入了 Express 模块并创建了一个应用程序实例。我们然后使用 app.use() 方法来指定静态资源的目录。在这个例子中,我们使用 express.static() 中间件来指定 public 目录作为我们的静态资源目录。

最后,我们使用 app.listen() 方法来启动并监听端口号 3000 的服务器。当服务器启动时,控制台会输出一条消息。

步骤 3:创建 HTML 文件和静态资源

现在我们已经设置了服务器,我们需要创建一些 HTML 文件和静态资源,以便服务器能够提供它们。在您的项目目录中,创建一个名为 public 的文件夹,并在其中创建一个名为 index.html 的文件。在该文件中,输入以下内容:

-- -------------------- ---- -------
--------- -----
------
------
  --------- ---------------
  ----- ---------------- ------------------
-------
------
  ----------- -- -- -------------
  ------- -- - ------ ---------
  ------- --------------------------
-------
-------

在这个例子中,我们将 style.cssscript.js 文件添加到 HTML 文件中。注意,我们在这些文件的路径前面加上了斜杠 /,这是因为 Express 中间件将从 public 目录开始提供静态资源。

接下来,在 public 文件夹中创建一个名为 style.css 的文件,内容如下:

-- -------------------- ---- -------
---- -
  ----------------- --------
-

-- -
  ------ -----
-

- -
  ------ -----
-

然后,我们创建一个名为 script.js 的文件,其中包含以下代码:

现在,我们已经准备好启动服务器并访问页面了!

步骤 4:启动服务器

要启动服务器,请打开终端并导航到您的项目目录。运行以下命令来启动服务器:

当您看到控制台输出“

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/27196

纠错
反馈