时间戳

首页 > 解决方案 > 使用 nodejs 服务器和 Pug 如何一次显示列表中的元素并使用按钮进行迭代？

javascript - 使用 nodejs 服务器和 Pug 如何一次显示列表中的元素并使用按钮进行迭代？

问题描述

我对 Web 开发和 NodeJs 服务器非常陌生，而 Pug 这是我第一次使用这些。本质上，我想要一个盒子，它是一个 div，我现在想根据 JSON 文件中的列表动态更改该盒子中的数据，最终当我得到这个工作时，我将使用数据库来提供该列表. 我已经设置了我的服务器并使用一些在线教程设置了我的 Pug 代码的基本部分。我知道我必须使用一些 javascript 来完成这项工作，但我什至无法在我的哈巴狗代码的“脚本”部分访问我的列表，这让我更加困惑。这是我到目前为止的代码：

server.js：

const express = require('express');
const app = express();
const testTweets = require('./testTweets.json');
app.set('view engine', 'pug');
app.use(express.static(__dirname + '/public'));


app.get('/', (req, res) => {
  res.render('index', {
    title: 'Tweet Labeler',
    data: testTweets.tweets
  });
});

const server = app.listen(9000,() => {
   console.log(`Express running → PORT ${server.address().port}`);
});

指数.pug：

doctype html
html
  head
    title #{title}
    link(rel='stylesheet', href='/css/style.css')
    meta(name="viewport" content="width=device-width, initial-scale=1")
  body
    main
      block header
        header.header
          h1 #{title}
      block content
      div.container
          h2#label Tweet ID:
          div.tweetBox
          button.button-next Next
          script.
            var maxLength = data.length
            console.log("In the script tag!" + maxLength)

注意*脚本部分根本不起作用它给我一个错误说“数据”没有定义

测试推文.json：

{
  "tweets": [
    {
      "id":"0",
      "text": "this is tweet index 0",
      "relevancy": "unknown"
    },
    {
      "id":"1",
      "text": "this is tweet index 1",
      "relevancy": "unknown"
    },
    {
      "id":"2",
      "text": "this is tweet index 2",
      "relevancy": "unknown"
    },
    {
      "id":"3",
      "text": "this is tweet index 3",
      "relevancy": "unknown"
    },
    {
      "id":"4",
      "text": "this is tweet index 4",
      "relevancy": "unknown"
    }
  ]
}

非常基本的 json 文件，看看我是否可以让它工作。

这是页面的样子：理想情况下，白色框会像列表中每个元素的文本一样被填充，然后当他们单击下一步时，它将显示下一个元素的文本。 在此处输入图像描述

我查看了 stackoverflow 和其他论坛，但我似乎无法使用 PUG 找到与此类似的内容，并且我查看了其他语言的方法，但我真的很挣扎，因为我什至无法访问我所在的列表传入调用的数据，因为我的控制台只是出错并说“数据未定义”，但如果我在 Pug 中定期使用它（不在脚本中）部分，它肯定是定义的。提前感谢任何花时间帮助解决此问题的人，非常感谢！

标签： javascripthtmlnode.jsexpresspug

解决方案

脚本标签中的data变量是客户端 javascript 变量，因此不会被定义，因为它独立于服务器端data变量。data您可以使用 pug 的插值功能将服务器端值放置在 pug javascript 块中。

div.container
  h2#label Tweet ID:
  div.tweetBox
    each tweet in data
      p=tweet.text
  button.button-next Next
  script.
    var data = !{JSON.stringify(data)};
    var maxLength = data.length;
    console.log("In the script tag!" + maxLength);

将data在服务器端渲染期间用服务器端数据变量中的 JSON 值替换。您可以使用 pug 的each迭代器来显示推文以迭代数据，或者您可以使用客户端 javascript 来执行此操作。

推荐阅读