Vue(小案例_vue+axios仿手机app)_实现用户评论

一、前言

1、渲染评论列表

2、点击加载按钮，加载更多

   3、提交评论

二、主要内容

1、评论列表一般是注册到一个全局的公共组件中

2、请求后台数据，渲染评论列表

　　（1）数据格式如下

地址	/api/getcomments/:artid?pageindex=1
作用描述	根据资讯id获取它的评论的分页信息
请求方式	Get
传入api的参数	artid: 资讯id，这个id是用来区分是哪一个页面中的评论数据 pageindex: 分页的页码，表示当前第几页 传入url写法： /api/getcomments/43?pageindex=1
返回数据格式	Json
返回数据格式样例

　　（2）如何获取到父组件的id,  这里用到子父组件通信

　　a:在父组件中用自定义一个cid属性

<Comment   :cid="$route.query.id"    />
 
//获取到路由上面的id参数

　　b:在子组件Comment.vue中接收这个属性，然后作为Comment里面的查询参数

    props:['cid'], //接收到父组件定义的自定义属性

　　c:根据上面接收到的自定义属性进行查询，查询到对应的评论信息

d:用户还可能输入url地址中的page来查询

data(){
            return {
                comments:[]
            }
        },
 
        created(){
            //用户在查看评论列表的时候还可能在上面输入
            let page = this.$route.query.page || '1'; //从url地址中获取到当前的page，如果没有默认加载第一页
            //查询的时候带着这个page查询
            this.$axios.get(`getcomments/${this.cid}?pageindex=${page}`)
            .then(res=>{
                console.log(res.data.message);
                this.comments=res.data.message;
            })
            .catch(err=>{
                console.log('数据请求失败',err);
            })
 
        }

3、查看评论，点击加载按钮，加载更多（通常评论信息不会全部渲染到页面中的，）

　　（1）给按钮注册一个loadMore()方法,点击的时候传进去url地址栏中的page

<Button @click='loadMore(page)'>加载更多</Button>

　　（2）声明loadMore()

　   （3）当用户每点击一次的时候，就让当前的page++

 export default{
        name:'Comment',
        props:['cid'],//接受父组件传过来的自定义属性
        data(){
            return {
                comments:[],
                page:1
            }
        },
 
        methoods:{
            loadMore(page){
                this.$axios.get(`getcomments${this.cid}?pageindex=${this.page}`)
                .then(res=>{
                console.log(res.data.message);
                this.comments=res.data.message;
 
                if(page){
                    //表示加载更多,将新一页的数据追加到原来的里面
                    this.comments = this.comments.concat(res.data.message);
                }else{
 
                    //否则第一次加载
                    this.comments = res.data.message;
                }
 
                this.page++;
 
                })
                .catch(err=>{
                console.log('数据请求失败',err);
                })
 
            }
        },
        created(){
            //用户在查看评论列表的时候还可能在上面输入
            let page = this.$route.query.page || '1'; //
            this.loadMore(page);
 
        }

4、提交评论

　　（1）数据如下

地址	/api/postcomment/:artid
作用描述	给某条资讯进行评论
请求方式	Post
传入api的参数	artid: 资讯id， content: 评论的内容 传入url写法：/api/postcomment/43 请求报文体Body格式: content=评论内容

　　（2）点击提交按钮，执行提交按钮方法，并且要个文本域双向数据绑定

                <li class="txt-comment">
                    <textarea v-model='commentContent'></textarea>
                </li>
                <li>
                    <button @click='commentHandle'>提交</button>
                </li>

　　（3）在methods中定义

//处理提交评论请求，并且将评论信息，添加到postcomment/:${this.cid}中
 
 commentHandle(){
                this.$axios.post(`postcomment/:${this.cid}`,'conetent='+this.commentContent)
                .then(res=>{
                    console.log(res.data.message);
 
                })
                .catch(err=>{
                    console.log('评论失败',err);
                })
 
            }

　　（4）提交评论信息之后还需要清空当前这个评论框的文本内容，然后再加载第一页数据

 methoods:{
            commentHandle(){
                this.$axios.post(`postcomment/:${this.cid}`,'conetent='+this.commentContent)
                .then(res=>{
                    console.log(res.data.message);
 
                    this.commentContent=''; //清空评论框
                    this.page=1;//然后加载第一页数据
                    this.loadMore();
 
                })
                .catch(err=>{
                    console.log('评论失败',err);
                })
 
            },

三、总结

1、查看评论，用户可能要查看其它页的评论信息，所以在请求的时候带了一个page参数

2、加载更多，用户每次点击加载更多按钮，让当前的page++, 并且将新请求到的一页的数据用concat连接到上次请求到的数据中

3、提交评论，用post提交，提交了之后要清空当前的文本域，然后再加载第一页的数据