在使用 Express.js 进行前端开发时,我们通常需要引入 CSS 和 JavaScript 文件来美化页面和实现交互效果。本文将详细介绍在 Express.js 框架中如何引入 CSS 和 JavaScript 文件,并提供示例代码和指导意义。
引入 CSS 文件
在 Express.js 中引入 CSS 文件有两种方式:内置中间件和手动设置静态文件目录。
内置中间件
Express.js 内置了 express.static
中间件,可以用于提供静态文件,例如 CSS、图片和 JavaScript 文件等。
要使用 express.static
中间件,需要在 app.js
或 server.js
中添加以下代码:
app.use(express.static('public'));
其中,public
是存放静态文件的目录。在上述代码中,我们将 public
目录设置为静态文件目录,这样在访问 http://localhost:3000/css/style.css
时,Express.js 就会自动从 public/css/style.css
文件中读取 CSS 样式。
手动设置静态文件目录
除了使用内置中间件外,我们还可以手动设置静态文件目录。
在 app.js
或 server.js
中添加以下代码:
app.use('/static', express.static(__dirname + '/public'));
其中,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.js
或 server.js
中添加以下代码:
app.use(express.static('public'));
在 HTML 文件中,可以使用以下代码引入 JavaScript 文件:
<script src="/js/main.js"></script>
在上述代码中,我们将 public
目录设置为静态文件目录,这样在访问 http://localhost:3000/js/main.js
时,Express.js 就会自动从 public/js/main.js
文件中读取 JavaScript 代码。
手动设置静态文件目录
与引入 CSS 文件类似,我们还可以手动设置静态文件目录。
在 app.js
或 server.js
中添加以下代码:
app.use('/static', express.static(__dirname + '/public'));
在 HTML 文件中,可以使用以下代码引入 JavaScript 文件:
<script src="/static/js/main.js"></script>
在上述代码中,我们将 public
目录设置为静态文件目录,并将虚拟路径设置为 static
,这样在访问 http://localhost:3000/static/js/main.js
时,Express.js 就会自动从 public/js/main.js
文件中读取 JavaScript 代码。
示例代码
以下是一个示例代码,用于演示在 Express.js 中如何引入 CSS 和 JavaScript 文件。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- -- -------- ---------------------------------- -- -- ------------ ----- ---- -- - ---------------------- - --------------- --- -- ----- ---------------- -- -- - ------------------- -- ------- -- ------------------------ ---
在 public
目录下,创建 css/style.css
和 js/main.js
文件,并在 HTML 文件中引入 CSS 和 JavaScript 文件:
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------------- ------------ ----- ---------------- ---------------------- ------- ------ ---------- ---------------- ------- --------------------------- ------- -------
运行代码后,在浏览器中访问 http://localhost:3000
,就可以看到页面上的 CSS 样式和 JavaScript 效果了。
指导意义
通过本文的介绍,我们学习了在 Express.js 中引入 CSS 和 JavaScript 文件的两种方式:内置中间件和手动设置静态文件目录。使用内置中间件可以简化代码,但需要注意安全性问题;手动设置静态文件目录可以更加灵活,但需要手动编写代码。无论采用哪种方式,都需要注意文件路径和访问方式的正确性,以避免引入错误的文件或暴露服务器安全漏洞。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6796e69c504e4ea9bddddbfc