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>
這樣前臺效果實現了，接下就是后臺的部分了！
