一、前言? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1、渲染評(píng)論列表

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2、點(diǎn)擊加載按鈕，加載更多

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3、提交評(píng)論

?

二、主要內(nèi)容? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

1、評(píng)論列表一般是注冊(cè)到一個(gè)全局的公共組件中

2、請(qǐng)求后臺(tái)數(shù)據(jù)，渲染評(píng)論列表

　　（1）數(shù)據(jù)格式如下

地址	? /api/getcomments/:artid?pageindex=1
作用描述	根據(jù)資訊id獲取它的評(píng)論的分頁信息
請(qǐng)求方式	Get
傳入api的參數(shù)	artid: 資訊id，這個(gè)id是用來區(qū)分是哪一個(gè)頁面中的評(píng)論數(shù)據(jù) pageindex: 分頁的頁碼，表示當(dāng)前第幾頁 傳入url寫法： /api/getcomments/43?pageindex=1
返回?cái)?shù)據(jù)格式	Json
返回?cái)?shù)據(jù)格式樣例	? ?
?	?

　　（2）如何獲取到父組件的id,? 這里用到子父組件通信

　　a:在父組件中用自定義一個(gè)cid屬性

<Comment :cid="$route.query.id" />//獲取到路由上面的id參數(shù)

　　b:在子組件Comment.vue中接收這個(gè)屬性，然后作為Comment里面的查詢參數(shù)

props:['cid'], //接收到父組件定義的自定義屬性

　　c:根據(jù)上面接收到的自定義屬性進(jìn)行查詢，查詢到對(duì)應(yīng)的評(píng)論信息

? ? ? ?d:用戶還可能輸入url地址中的page來查詢

data(){return {comments:[]}},created(){//用戶在查看評(píng)論列表的時(shí)候還可能在上面輸入let page = this.$route.query.page || '1'; //從url地址中獲取到當(dāng)前的page，如果沒有默認(rèn)加載第一頁//查詢的時(shí)候帶著這個(gè)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('數(shù)據(jù)請(qǐng)求失敗',err);})}

?

?

3、查看評(píng)論，點(diǎn)擊加載按鈕，加載更多（通常評(píng)論信息不會(huì)全部渲染到頁面中的，）

　　（1）給按鈕注冊(cè)一個(gè)loadMore()方法,點(diǎn)擊的時(shí)候傳進(jìn)去url地址欄中的page

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

　　（2）聲明loadMore()

　? ?（3）當(dāng)用戶每點(diǎn)擊一次的時(shí)候，就讓當(dāng)前的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){//表示加載更多,將新一頁的數(shù)據(jù)追加到原來的里面this.comments = this.comments.concat(res.data.message);}else{//否則第一次加載this.comments = res.data.message;}this.page++;}).catch(err=>{console.log('數(shù)據(jù)請(qǐng)求失敗',err);})}},created(){//用戶在查看評(píng)論列表的時(shí)候還可能在上面輸入let page = this.$route.query.page || '1'; // this.loadMore(page);}

?

4、提交評(píng)論

　　（1）數(shù)據(jù)如下

地址	? /api/postcomment/:artid
作用描述	給某條資訊進(jìn)行評(píng)論
請(qǐng)求方式	Post
傳入api的參數(shù)	artid: 資訊id， content: 評(píng)論的內(nèi)容 傳入url寫法：/api/postcomment/43 請(qǐng)求報(bào)文體Body格式: content=評(píng)論內(nèi)容 ?

?

?　　（2）點(diǎn)擊提交按鈕，執(zhí)行提交按鈕方法，并且要個(gè)文本域雙向數(shù)據(jù)綁定

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

　　（3）在methods中定義

//處理提交評(píng)論請(qǐng)求，并且將評(píng)論信息，添加到postcomment/:${this.cid}中 commentHandle(){this.$axios.post(`postcomment/:${this.cid}`,'conetent='+this.commentContent).then(res=>{console.log(res.data.message);}).catch(err=>{console.log('評(píng)論失敗',err);})}

　　（4）提交評(píng)論信息之后還需要清空當(dāng)前這個(gè)評(píng)論框的文本內(nèi)容，然后再加載第一頁數(shù)據(jù)

methoods:{commentHandle(){this.$axios.post(`postcomment/:${this.cid}`,'conetent='+this.commentContent).then(res=>{console.log(res.data.message);this.commentContent=''; //清空評(píng)論框this.page=1;//然后加載第一頁數(shù)據(jù)this.loadMore();}).catch(err=>{console.log('評(píng)論失敗',err);})},

?

?

三、總結(jié)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

?1、查看評(píng)論，用戶可能要查看其它頁的評(píng)論信息，所以在請(qǐng)求的時(shí)候帶了一個(gè)page參數(shù)

2、加載更多，用戶每次點(diǎn)擊加載更多按鈕，讓當(dāng)前的page++, 并且將新請(qǐng)求到的一頁的數(shù)據(jù)用concat連接到上次請(qǐng)求到的數(shù)據(jù)中

3、提交評(píng)論，用post提交，提交了之后要清空當(dāng)前的文本域，然后再加載第一頁的數(shù)據(jù)

轉(zhuǎn)載于:https://www.cnblogs.com/xxm980617/p/10701030.html

總結(jié)

以上是生活随笔為你收集整理的Vue(小案例_vue+axios仿手机app)_实现用户评论的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。