【发布时间】：2020-04-27 08:55:05
【问题描述】：
index.js 代码：
app.get("/users", (req,res)=> {
connection.query("SELECT Name, Currently_Watching FROM `user-data` ", function(error, rows, fields) {
if (error) {
res.send(error);
} else {
res.render("users", {data: rows});
}
});
})
当我使用 res.send(rows) 调试时，这是输出
[{"Name":"Jim","Currently_Watching":"Atypical, Gumball"},{"Name":"McGill","Currently_Watching":"Nothing"},{"Name":"Random Woman","Currently_Watching":"Boring show"}]
users.pug 代码：
extends layout
block layout-content
head
meta(charset="utf-8")
meta(name="viewport" content="width=device-width, initial-scale=1")
link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css")
script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js")
script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js")
script(src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js")
link(rel="stylesheet", href="https://www.w3schools.com/w3css/4/w3.css")
link(rel="stylesheet", href="https://fonts.googleapis.com/css?family=Raleway")
body.bgimg
div(class="row" id="row")
div(class="col-sm-4" id="first column" style="background-color:white;")
div(class="col-sm-8" id="second column")
div(class="w3-container" id="test")
script(type="text/javascript").
function makeUL(data) {
var parsedJSON = JSON.stringify(data);
var paragraph = document.createElement('p');
paragraph.innerText = "test";
var list = document.createElement('ul')
list.setAttribute("class","w3-ul w3-card-4")
var i =0;
for (i = 0; i < data.length; i++) {
// Create the list item:
var item = document.createElement('li');
item.setAttribute("class","w3-bar")
var div = document.createElement('div');
div.setAttribute("class","w3-bar-item");
var span1 = document.createElement('span');
span1.setAttribute("class","w3-large");
span1.innerHTML = data[i].Name;
var span2 = document.createElement('span');
span2.innerHTML = data[i].Currently_Watching;
div.appendChild(span1);
div.appendChild(span2);
item.appendChild(div);
list.appendChild(item);
}
// Finally, return the constructed list:
return list;
}
document.getElementById('test').appendChild(makeUL('!{data}'));
这是渲染视图的样子：
我尝试对数据使用 JSON.stringify() 但输出没有改变。此外，生成的 li 元素的数量比我预期的 6 多得多。我觉得数据对象在传递给视图后会发生某种变化。关于如何正确读取 sql 数据的任何想法？如果我做错了什么，请告诉我。
【问题讨论】：
-
你在哪里渲染 pug 文件？
标签： javascript mysql node.js express pug