Nodejs express中render到jade里的数据，能否在js中直接使用？

Nodejs express中render到jade里的数据，能否在js中直接使用？

我想把数据render到jade里，正常的使用没有问题。 但是，我现在有一个这样的需求，我想在JS中直接使用render上来的数据，例如下面带埋render了hotels数据到对应的jade中， 我在对应的JS文件中，想直接输出hotels，console.log(hotels)。但是我始终没有找到方法～欢迎大家提供方法～谢谢～

res.render('plans/edit', {
	hotels : hotels,
            })

8 回复

当然可以！在Node.js的Express框架中，你可以将数据传递给Jade模板（现在称为Pug），然后通过客户端JavaScript来访问这些数据。以下是一个简单的示例，展示了如何实现这一点。

示例代码

1. Express路由设置

首先，在你的Express路由中，将数据传递给Jade模板：

const express = require('express');
const app = express();

app.set('view engine', 'pug'); // 设置视图引擎为Pug

app.get('/plans/edit', (req, res) => {
    const hotels = [
        { id: 1, name: 'Hotel A' },
        { id: 2, name: 'Hotel B' }
    ];

    res.render('plans/edit', {
        hotels: hotels
    });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

2. Pug模板文件

接下来，在views/plans/edit.pug文件中，你可以通过一个全局变量或脚本标签将数据传递给客户端JavaScript：

doctype html
html
  head
    title Plans Edit
  body
    h1 Hotels
    ul#hotel-list
      each hotel in hotels
        li= hotel.name

    script.
      window.hotels = !{JSON.stringify(hotels)}

3. 客户端JavaScript

最后，在客户端JavaScript中，你可以直接访问window.hotels变量：

// 在浏览器控制台中运行
console.log(window.hotels);

或者，如果你在一个外部的.js文件中，可以通过类似的方式访问：

console.log(window.hotels);

解释

  1. Express路由：在Express路由中，我们定义了一个GET请求处理函数，它将hotels数组传递给Jade模板。

  2. Pug模板：在Pug模板中，我们使用each循环渲染每个酒店的名称，并通过script.标签将hotels数组转换为JSON字符串并赋值给全局变量window.hotels。

  3. 客户端JavaScript：在客户端JavaScript中，我们可以通过访问window.hotels来获取服务器端传递的数据。

这种方式使得服务器端的数据可以在客户端JavaScript中直接使用，从而满足你在JS文件中直接使用render数据的需求。


在线求助～

顶，没人回复～

render时解析jade生成html这一过程是在服务端执行的 ，js是在客户端执行的，想办法把你提供的数据传递给页面上的js就行了

用res.json()，直接跳过jade提供数据接口

这个地方有个转换过程，首先 jade 被render之后，输出的是一个html（通常是html页面， 不排除输出其他变态玩意）。 然后html页面被浏览器解析，js代码被执行起来。

所以首先你要关心的是， 怎么让jade模板渲染之后得到一个静态页面，这个静态页面中，有js运行所需要的数据对象 然后再关心这个静态页面，怎么正确的运行。 最后附上提示代码：

res.render('plans/edit', {
    hotels : JSON.stringify(hotels),
});

参考代码： res.render(‘plans/edit’, { hotels : hotels, })

plans/edit.jade script. window.hotels = !{JSON.stringify(hotels)};

在 Node.js 和 Express 中，当你使用 res.render 渲染 Jade（现称为 Pug）模板时，传递的数据仅在服务器端渲染模板时可用。如果你想在客户端 JavaScript 中访问这些数据，需要通过某种方式将数据传递给前端。

一种常见的方式是将数据嵌入到 HTML 页面中，通常是在 <script> 标签中，这样在浏览器中运行的 JavaScript 就可以访问它了。

示例代码

服务器端 (Node.js/Express)

const express = require('express');
const app = express();

app.set('view engine', 'pug'); // 设置视图引擎为 Pug

app.get('/example', (req, res) => {
    const hotels = [{ name: 'Hotel A' }, { name: 'Hotel B' }];
    res.render('index', { hotels });
});

app.listen(3000, () => console.log('Server running on port 3000'));

客户端 (Pug 模板)

doctype
html
  head
    title Example Page
  body
    script.
      var hotels = !{JSON.stringify(hotels)};
    script(src='/client.js')

在这个例子中，!{JSON.stringify(hotels)} 会将后端传过来的 hotels 数据转换成 JSON 字符串，并直接嵌入到 <script> 标签中。然后，你可以在 /client.js 文件中访问 hotels 变量。

客户端 JavaScript (client.js)

console.log(hotels); // 输出 hotes 数据

解释

  1. 服务器端：通过 res.render 方法，将 hotels 数据传递给 Pug 模板。
  2. Pug 模板：使用 !{JSON.stringify(hotels)} 将数据传递给客户端的 JavaScript 变量。
  3. 客户端 JavaScript：通过全局变量 hotels 访问该数据。

这种方法允许你在客户端 JavaScript 中直接访问从服务器端传递过来的数据。

回到顶部