Express.js 框架中如何引入 CSS 和 JavaScript 文件

阅读时长 5 分钟读完

在使用 Express.js 进行前端开发时,我们通常需要引入 CSS 和 JavaScript 文件来美化页面和实现交互效果。本文将详细介绍在 Express.js 框架中如何引入 CSS 和 JavaScript 文件,并提供示例代码和指导意义。

引入 CSS 文件

在 Express.js 中引入 CSS 文件有两种方式:内置中间件和手动设置静态文件目录。

内置中间件

Express.js 内置了 express.static 中间件,可以用于提供静态文件,例如 CSS、图片和 JavaScript 文件等。

要使用 express.static 中间件,需要在 app.jsserver.js 中添加以下代码:

其中,public 是存放静态文件的目录。在上述代码中,我们将 public 目录设置为静态文件目录,这样在访问 http://localhost:3000/css/style.css 时,Express.js 就会自动从 public/css/style.css 文件中读取 CSS 样式。

手动设置静态文件目录

除了使用内置中间件外,我们还可以手动设置静态文件目录。

app.jsserver.js 中添加以下代码:

其中,static 是虚拟路径,用于访问静态文件,__dirname 表示当前文件所在的目录。在上述代码中,我们将 public 目录设置为静态文件目录,并将虚拟路径设置为 static,这样在访问 http://localhost:3000/static/css/style.css 时,Express.js 就会自动从 public/css/style.css 文件中读取 CSS 样式。

引入 JavaScript 文件

在 Express.js 中引入 JavaScript 文件也有两种方式:内置中间件和手动设置静态文件目录。

内置中间件

与引入 CSS 文件类似,我们可以使用 express.static 中间件来引入 JavaScript 文件。

app.jsserver.js 中添加以下代码:

在 HTML 文件中,可以使用以下代码引入 JavaScript 文件:

在上述代码中,我们将 public 目录设置为静态文件目录,这样在访问 http://localhost:3000/js/main.js 时,Express.js 就会自动从 public/js/main.js 文件中读取 JavaScript 代码。

手动设置静态文件目录

与引入 CSS 文件类似,我们还可以手动设置静态文件目录。

app.jsserver.js 中添加以下代码:

在 HTML 文件中,可以使用以下代码引入 JavaScript 文件:

在上述代码中,我们将 public 目录设置为静态文件目录,并将虚拟路径设置为 static,这样在访问 http://localhost:3000/static/js/main.js 时,Express.js 就会自动从 public/js/main.js 文件中读取 JavaScript 代码。

示例代码

以下是一个示例代码,用于演示在 Express.js 中如何引入 CSS 和 JavaScript 文件。

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

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

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

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

public 目录下,创建 css/style.cssjs/main.js 文件,并在 HTML 文件中引入 CSS 和 JavaScript 文件:

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

运行代码后,在浏览器中访问 http://localhost:3000,就可以看到页面上的 CSS 样式和 JavaScript 效果了。

指导意义

通过本文的介绍,我们学习了在 Express.js 中引入 CSS 和 JavaScript 文件的两种方式:内置中间件和手动设置静态文件目录。使用内置中间件可以简化代码,但需要注意安全性问题;手动设置静态文件目录可以更加灵活,但需要手动编写代码。无论采用哪种方式,都需要注意文件路径和访问方式的正确性,以避免引入错误的文件或暴露服务器安全漏洞。

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

纠错
反馈