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

落日映苍穹つ 2022-04-22 11:20 196阅读 0赞

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

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

1.先编写index.html

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

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

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

<form action="?" method="post" ng-submit="check()">
        <textarea name="content" id="" cols="30" rows="10" ng-model="newComment"></textarea>
        <button type="submit">提交评论</button>
    </form>
    
    <script type="text/javascript">
    .......
    //表单提交前验证
    $scope.check=function(){
        if(验证条件不通过){
            return false;//不提交
        }else{
    
            return true;//不写此返回值也行，此时就直接提交了
    
        }
    }
    .....
    </script>

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 获取内容**

<!DOCTYPE html>
    <html lang="en" ng-app="weibo">
    
    <head>
        <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">
    </head>
    
    <body ng-controller="myCon">
        
        <form action="?" method="post">
            <textarea name="content" id="" cols="30" rows="10" ng-model="newComment"></textarea>
            <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>
        
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/angular.js"></script>
        <script src="index.js"></script>
    
    </body>
    
    </html>

2.编写index.js

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

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

最后在 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][https_github.com_chenzeze_weiboComment]

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

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

[Link 1]: https://blog.csdn.net/chenzeze0707/article/details/83690482
[https_github.com_chenzeze_weiboComment]: https://github.com/chenzeze/weiboComment