NODEJS实战微博评论05_前台调用后台接口

2先完善我们的前端界面，加上评论展示

根据上节课编写的接口文档， 在index.js 调用相应接口

1.先编写index.html

页面分成三个部分：1）.提交评论 2）.评论展示 3）.页码展示

1）提交评论用表单提交，若你在提交表单前，需要做表单验证，使用 ng-submit （这里不做表单验证）

用法：ng-submit="expression"  若expression值为true,则提交，若expression值为false,则不提交

    
    提交评论

2）评论展示

用ng-repeat 将$scope.comments循环出来

3）页码展示

后台接口get_page_count返回的pages为Number,而ng-repeat只能循环 [] / {}，因此创建$scope.pages=[] ,其长度为pages，用$scope.pages循环创建页码

 

index.html 代码如下

注：form表格里要提交的内容一定要有name属性，以便req.body.name 获取内容

    
    
    
    
    



    
    

        
        提交评论
    

    
    

        
暂无数据
        

            
{{comment.content}}
            
{{comment.time}}
            点赞: {{comment.like}} 
            踩: {{comment.unlike}} 
        
    

    
    

        {{index+1}}
    
    
    
    
    

2.编写index.js

1）每次加载到 '/' 时，总是先从数据库获取 评论总页数 和 第一页的评论数据

2）提交评论时，在调用后台接口增加评论到数据库中，之后重定向到 '/' ，重新执行 从数据库获取 评论总页数 和 第一页的评论数据

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");
        })
    }
});

最后在 index.css 中加点样式

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;
}

以上，你就完成微博评论啦。撒花!!!

此项目在github 上地址为 https://github.com/chenzeze/weiboComment

欢迎去fork star哦 感谢您的支持

预告 ：下一课程 todoMVC 用 vuejs 和 node 实现