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提交，提交了之后要清空当前的文本域，然后再加载第一页的数据

巴特西

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

最新文章

热门文章