当我们构建一个 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 项目:
mkdir myapp cd myapp npm init
接下来,我们需要安装 Express:
npm install express --save
这将会在我们的项目中安装 Express 模块,并将其添加到 package.json
文件中。
步骤 2:创建服务器文件
现在我们已经完成了安装,我们可以创建一个服务器文件来启动我们的 Web 服务器。在您的项目目录中,创建一个名为 server.js
的文件,并将以下代码复制到该文件中:
const express = require('express'); const app = express(); app.use(express.static('public')); app.listen(3000, () => { console.log('Server started on port 3000'); });
在这个代码中,我们首先导入了 Express 模块并创建了一个应用程序实例。我们然后使用 app.use()
方法来指定静态资源的目录。在这个例子中,我们使用 express.static()
中间件来指定 public
目录作为我们的静态资源目录。
最后,我们使用 app.listen()
方法来启动并监听端口号 3000 的服务器。当服务器启动时,控制台会输出一条消息。
步骤 3:创建 HTML 文件和静态资源
现在我们已经设置了服务器,我们需要创建一些 HTML 文件和静态资源,以便服务器能够提供它们。在您的项目目录中,创建一个名为 public
的文件夹,并在其中创建一个名为 index.html
的文件。在该文件中,输入以下内容:
-- -------------------- ---- ------- --------- ----- ------ ------ --------- --------------- ----- ---------------- ------------------ ------- ------ ----------- -- -- ------------- ------- -- - ------ --------- ------- -------------------------- ------- -------
在这个例子中,我们将 style.css
和 script.js
文件添加到 HTML 文件中。注意,我们在这些文件的路径前面加上了斜杠 /
,这是因为 Express 中间件将从 public
目录开始提供静态资源。
接下来,在 public
文件夹中创建一个名为 style.css
的文件,内容如下:
-- -------------------- ---- ------- ---- - ----------------- -------- - -- - ------ ----- - - - ------ ----- -
然后,我们创建一个名为 script.js
的文件,其中包含以下代码:
console.log('This is a sample script.');
现在,我们已经准备好启动服务器并访问页面了!
步骤 4:启动服务器
要启动服务器,请打开终端并导航到您的项目目录。运行以下命令来启动服务器:
node server.js
当您看到控制台输出“
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/27196