Node.js with Express:在 Jade 视图中使用脚本标签导入客户端 javascript

作者:编程家 分类: 编程代码 时间:2025-11-12

使用 Node.js 和 Express 框架开发 web 应用程序是一种非常流行的选择。其中,使用 Jade 作为视图引擎可以方便地在服务器端生成静态 HTML 页面。在 Jade 视图中,我们可以使用脚本标签来导入客户端 JavaScript,从而在前端页面中添加交互逻辑。

首先,我们需要确保已经安装了 Node.js 和 Express。可以通过以下命令进行安装:

npm install express

接下来,在 Express 应用程序中配置视图引擎为 Jade,可以通过以下代码实现:

javascript

app.set('view engine', 'jade');

在 Jade 视图中,我们可以使用脚本标签来导入客户端 JavaScript。假设我们有一个名为 `index.jade` 的视图文件,其中包含一个按钮,点击该按钮会触发客户端 JavaScript 的函数。我们可以通过以下代码在视图中导入 JavaScript 文件:

jade

script(src='javascripts/client.js')

上述代码表示在 `javascripts` 目录下有一个名为 `client.js` 的 JavaScript 文件,通过 `script` 标签将其导入到视图中。

现在,让我们来看一个完整的案例。假设我们的 Express 应用程序有一个名为 `app.js` 的文件,我们在其中配置了路由和视图。

首先,我们需要在 `app.js` 文件中引入必要的模块:

javascript

const express = require('express');

const app = express();

然后,我们可以配置视图引擎为 Jade:

javascript

app.set('view engine', 'jade');

接下来,我们可以定义一个路由,将请求映射到相应的视图。假设我们有一个名为 `index` 的路由,对应的视图为 `index.jade`:

javascript

app.get('/index', (req, res) => {

res.render('index');

});

在 `index.jade` 视图中,我们可以使用脚本标签导入客户端 JavaScript:

jade

doctype html

html

head

title My Express App

body

h1 Welcome to my Express App

button(onclick='myFunction()') Click Me

script(src='javascripts/client.js')

上述代码表示在视图中添加了一个标题和一个按钮,当按钮被点击时,会触发名为 `myFunction` 的 JavaScript 函数。同时,我们通过 `script` 标签导入了 `client.js` 文件。

最后,我们还需要在 `javascripts` 目录下创建 `client.js` 文件,并在其中定义 `myFunction` 函数:

javascript

function myFunction() {

alert('Button clicked!');

}

上述代码表示当按钮被点击时,会弹出一个提示框显示 "Button clicked!"。

这就是在 Jade 视图中使用脚本标签导入客户端 JavaScript 的方法。通过这种方式,我们可以在服务器端生成具有交互功能的 HTML 页面。