Node.js 实现评论功能
样式盖楼评论
我们根据网易的盖楼评论，来先实现盖楼的样式！
盖楼评论样式页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盖楼评论样式</title>
<style media="screen">
.container{
width: 400px;
height: 600px;
background-color: gray;
margin:0 auto;
}
.container .comment {
padding: 10px;
}
.container .comment .floor{
width: 90%;
height: auto;
border: 1px solid red;
margin:5px;
text-indent:1em;
}
</style>
</head>
<body>
<div class="container">
<div class="comment">
<div class="floor">
<div class="floor">
<div class="floor">
<div class="floor">
<p>楼主！</p>
</div>
<p>这里是1楼！</p>
</div>
<p>这里是2楼！</p>
</div>
<p>这里是3楼!</p>
</div>
</div>
</div>
</div>
</body>
</html>
盖楼原理，就是最新的一条评论会是最外面一层 div ，追加一条，就在原先的基础上再包裹一层 div！
效果图：
盖楼样式评论
实现，通过 ajax 来实现获取数据和添加！
MongoDB 数据库，json格式数据
先来模拟下，如何将json 评论数据提取后通过js的方式天加到页面中。
准备 json 数据，代码
var data = [
{
"plid": "1",
"plName": "twitch",
"pltime": "2016082301",
"plcontent": "盖楼样式评论，真的好嘛 !"
},
{
"plid": "2",
"plName": "twitch",
"pltime": "2016082302",
"plcontent": "盖楼样式评论，一楼路过!"
},
{
"plid": "3",
"plName": "twitch",
"pltime": "2016082303",
"plcontent": "盖楼样式评论，二楼路过 !"
},
{
"plid": "4",
"plName": "twitch",
"pltime": "2016082304",
"plcontent": "盖楼样式评论，三楼路过 !"
}
];
js代码，将json 数据进行包装填充到页面中去
根据样式例子的规律来写哦！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盖楼评论样式</title>
<style media="screen">
.container{
width: 400px;
height: 600px;
background-color: gray;
margin:0 auto;
}
.container .comment {
padding: 10px;
}
.floor{
width: 90%;
height: auto;
border: 1px solid red;
margin:5px;
text-indent:1em;
}
</style>
</head>
<body>
<div class="container">
<div id="comment">
</div>
</div>
<script type="text/javascript">
var data = [
{
"plid": "1",
"plName": "twitch",
"pltime": "2016082301",
"plcontent": "盖楼样式评论，真的好嘛 !"
},
{
"plid": "2",
"plName": "twitch",
"pltime": "2016082302",
"plcontent": "盖楼样式评论，一楼路过!"
},
{
"plid": "3",
"plName": "twitch",
"pltime": "2016082303",
"plcontent": "盖楼样式评论，二楼路过 !"
},
{
"plid": "4",
"plName": "twitch",
"pltime": "2016082304",
"plcontent": "盖楼样式评论，三楼路过 !"
}
];
var result = "";
result += '<div class="floor">';
for(var i=1;i<data.length;i++){
result += "<div id='fl"+ data[i].plid + "' class='floor'>";
};
for(var i=1;i<data.length;i++){
result += "<p>"+ data[i].plcontent+ "</p></div>";
};
result += "<p>"+ data[0].plcontent+ "<P></div>";
document.getElementById("comment").innerHTML = result;
</script>
</body>
</html>
这样前台效果实现了，接下就是后台的部分了！
网友评论