学习笔记-0822-nodejs盖楼样式

2016-09-05 本文已影响0人幽谷听泉

盖楼样式

Paste_Image.png

盖楼样式代码

<!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>

实现，通过 ajax 来实现获取数据和添加！
准备 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>

数据库存储结构

{
  "_id":ObiectId("57baf5b16bd4cda73990cfd0"),
  "_gid":"5703a45ed3db3a121c4a3d2e",
  "_status":0,
  "_contents":[
      {
          "_userPhone":"12345678911",
          "_content":"test",
          "_id":ObjectId("57baf5b16bd4cda73990cfd1"),
          "_addTime":ISODate("2016-08-22T12:53:05.032Z")
      },
      {
          "_userPhone":"12345678911",
          "_content":"test",
          "_id":ObjectId("57baf5b16bd4cda73990cfd1"),
          "_addTime":ISODate("2016-08-22T12:53:05.032Z")
      },
      {
          "_userPhone":"12345678911",
          "_content":"test",
          "_id":ObjectId("57baf5b16bd4cda73990cfd1"),
          "_addTime":ISODate("2016-08-22T12:53:05.032Z")
      },
  ],
  "__v":3
}

回复功能

 $('.goodscsheia').click(function(){
  var content = $('#sendM').val();
  var cid = $(this).data('cidd');
  $.ajax({
      url:'http://x.x.x.x:3000/admin/disAdd',
      data:{
          id:cid,
          con:content
      },
      type:'post',
      dataType:'json',
      success:function(data){
          if(data.result == 'yes'){
              $('#sendM').val(' ');
              getDiscuss();
          }else if(data.result == 'noLogin'){
              $('#hiddenLogin').click();
          }
      }        
  });
});

评论模块

function doDiscuss(){
 var con = $('#sendM').val();
 $.ajax({
    url:'http://x.x.x.x:3000/admin/doDiscuss',
    data:{
        content:con,
        gid:goodsId
    },
    dataType:'json',
    type:'post',
    success:function (data){
        if(data.result == 'yes'){
            $('#sendM').val(' ');
            getDiscuss();
            alert('发布成功');
        }else if(data.result == 'noLogin'){
            $('#hiddenLogin').click();
        }
    }
 });
}

表单序列化
```
 $('div').test($("form").serialize());
```

学习笔记-0822-nodejs盖楼样式

评论

猜你喜欢

热点阅读