使用 Node.js 和 Express 框架开发 web 应用程序是一种非常流行的选择。其中,使用 Jade 作为视图引擎可以方便地在服务器端生成静态 HTML 页面。在 Jade 视图中,我们可以使用脚本标签来导入客户端 JavaScript,从而在前端页面中添加交互逻辑。
首先,我们需要确保已经安装了 Node.js 和 Express。可以通过以下命令进行安装:npm install express接下来,在 Express 应用程序中配置视图引擎为 Jade,可以通过以下代码实现:
javascriptapp.set('view engine', 'jade');在 Jade 视图中,我们可以使用脚本标签来导入客户端 JavaScript。假设我们有一个名为 `index.jade` 的视图文件,其中包含一个按钮,点击该按钮会触发客户端 JavaScript 的函数。我们可以通过以下代码在视图中导入 JavaScript 文件:jadescript(src='javascripts/client.js')上述代码表示在 `javascripts` 目录下有一个名为 `client.js` 的 JavaScript 文件,通过 `script` 标签将其导入到视图中。现在,让我们来看一个完整的案例。假设我们的 Express 应用程序有一个名为 `app.js` 的文件,我们在其中配置了路由和视图。首先,我们需要在 `app.js` 文件中引入必要的模块:
javascriptconst express = require('express');const app = express();然后,我们可以配置视图引擎为 Jade:javascriptapp.set('view engine', 'jade');接下来,我们可以定义一个路由,将请求映射到相应的视图。假设我们有一个名为 `index` 的路由,对应的视图为 `index.jade`:javascriptapp.get('/index', (req, res) => { res.render('index');});在 `index.jade` 视图中,我们可以使用脚本标签导入客户端 JavaScript:jadedoctype htmlhtml 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` 函数:
javascriptfunction myFunction() { alert('Button clicked!');}上述代码表示当按钮被点击时,会弹出一个提示框显示 "Button clicked!"。这就是在 Jade 视图中使用脚本标签导入客户端 JavaScript 的方法。通过这种方式,我们可以在服务器端生成具有交互功能的 HTML 页面。