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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?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提交，提交了之后要清空當前的文本域，然后再加載第一頁的數據

轉載于:https://www.cnblogs.com/xxm980617/p/10701030.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。