NODEJS実戦微博コメント05_フロントがバックグラウンドインターフェースを呼び出す

2先に私達の先端のインターフェイスを改善して、評論の展示をプラスします.
前の授業で作成したインターフェース文書に基づいて、index.jsで対応インターフェースを呼び出します.
1.まずindexを作成します.
ページは三つの部分に分かれています.1).コメントを提出します.コメント展示3).ページ番号展示
1)コメントをフォームで提出し、フォームを提出する前にフォーム検証を行う必要がある場合は、ng-submitを使用します.
使い方:ng-submit=「expression」  expression値がtrueであれば、提出します.もしexpression値がfalseであれば、提出しません.

        <button type="submit">    </button>
</form>

<script type="text/javascript">
.......
//       
$scope.check=function(){
    if(       ){
        return false;//   
    }else{

        return true;//        ，        

    }
}
.....
</script></code></pre> 
  <p>2）    </p> 
  <p> ng-repeat  $scope.comments    </p> 
  <p>3）    </p> 
  <p>    get_page_count   pages Number, ng-repeat     [] / {}，    $scope.pages=[] ,    pages， $scope.pages      </p> 
  <p> </p> 
  <p>index.html     </p> 
  <p><span style="color:#f33b45;"><strong> ：form             name  ，  req.body.name     </strong></span></p> 
  <pre><code>



    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>    ,nodejs+mongodb+angularjs</title>
    <link rel="stylesheet" href="index.css"/>



    <!-- ?       -->
    <form action="?" method="post">
        <textarea name="content" id="" cols="30" rows="10" ng-model="newComment"/>
        <button type="submit">    </button>
    </form>

    <!--      -->
    <div class="comment-list">
        <div ng-if="comments.length==0">    </div>
        <div ng-else="" class="comment-item" ng-repeat="(index,comment) in comments">
            <div class="content">{{comment.content}}</div>
            <div class="time">{{comment.time}}</div>
            <a href="#" ng-click="incLike(comment._id,index)">  :</a><span class="like"> {{comment.like}} </span>
            <a href="#" ng-click="incUnlike(comment._id,index)"> :</a><span class="unlike"> {{comment.unlike}} </span>
        </div>
    </div>

    <!--      -->
    <div class="pages-list">
        <span class="page-item {{activeId==index+1?'active':''}}" ng-repeat="(index,page) in pages" ng-click="getPage(index+1)">{{index+1}}</span>
    </div>
    <!-- <a href="/test">  </a> -->
    <script src="js/jquery-3.2.1.min.js"/>
    <script src="js/angular.js"/>
    <script src="index.js"/>



</code></pre> 
  <p>2.  index.js</p> 
  <p>1）      '/'  ，                          </p> 
  <p>2）<span style="color:#f33b45;"><strong>     ，                ，       '/' ，                            </strong></span></p> 
  <pre><code>var app = angular.module('weibo', []);
app.controller('myCon', function ($scope, $http) {
    $scope.newComment = "       ";
    $scope.comments = []; //   
    $scope.pages = []; //    
    $scope.activeId = 1; //     
    $scope.limit = 0; //       
    //         ，                      
    getPageCount();
    getPage(1);
    
    $scope.getPageCount = getPageCount;
    $scope.getPage = getPage;
    $scope.incLike = function (id, index) {
        //                
        $http.get('/get_comments', {
            params: {
                act: 'incLike',
                id: id
            }
        }).success(function (res) {
            //             
            $scope.comments[index].like++;
        }).error(function (err) {
            alert("err");
        })
    }
    $scope.incUnlike = function (id, index) {
        //                
        $http.get('/get_comments', {
            params: {
                act: 'incUnlike',
                id: id
            }
        }).success(function (res) {
            //             
            $scope.comments[index].unlike++;
        }).error(function (err) {
            alert("err");
        })
    }

    function getPage(page) {
        //     page 
        $http.get('/get_comments', {
            params: {
                act: 'get',
                page: page
            }
        }).success(function (res) {
            $scope.comments = res;
            $scope.activeId = page;
        }).error(function (err) {
            alert("err");
        })
    }

    function getPageCount() {
        //      ，  angular ng-repeat  []/{},                 
        $http.get('/get_comments', {
            params: {
                act: 'get_page_count'
            }
        }).success(function (res) {
            for (let i = 0; i < res.pages; i++) {
                $scope.pages[i] = i;
            }
            $scope.limit = res.limit;
        }).error(function (err) {
            alert("err");
        })
    }
});</code></pre> 
  <p>    index.css      </p> 
  <pre><code>html {
    width: 100%;
    height: 100%;
    background: #d5d5d5;
}

.comment-item {
    width: 80%;
    border: 1px solid #000;
    margin: 5px;
}

.page-item {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: 5px;
    line-height: 25px;
    text-align: center;
    background: red;
    cursor: pointer;
}

.page-item.active,
.page-item:hover {
    background: yellow;
}</code></pre> 
  <p>  ，         。  !!!</p> 
  <p>    github      https://github.com/chenzeze/weiboComment</p> 
  <p>   fork star        </p> 
  <p>   ：     todoMVC   vuejs   node   </p> 
 </div> 
</div>
                            </div>
                        </div>