我对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}`);
});
index.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)
注意*脚本部分根本不起作用,它给我一个错误,提示未定义“数据”
testTweets.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中肯定会定义它。在此先感谢所有抽出宝贵时间来帮助您的人,谢谢!
script标记中的data
变量是客户端javascript变量,因此不会定义,因为它与服务器端data
变量无关。您可以使用pug的data
功能将服务器端的interpolation值放在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进行处理。