# 七、評論模塊## 評論列表### 創建組件并配置路由1、創建 `src/views/comment/index.vue` 并寫入```html <template><div>評論管理</div> </template><script>export default {// 組件的 name 最好起名為兩個單詞，盡量少用一個單詞// 為什么？為了避免和原生的 html 標簽沖突name: "CommentIndex",components: {},props: {},data() {return {};},computed: {},watch: {},created() {},methods: {}}; </script><style scoped></style> ```2、配置路由表3、配置側邊欄的導航路徑最后在瀏覽器中訪問測試。### 布局```html <template><div><el-card class="box-card"><div slot="header" class="clearfix"><span>評論管理</span></div><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table></el-card></div> </template><script>export default {// 組件的 name 最好起名為兩個單詞，盡量少用一個單詞// 為什么？為了避免和原生的 html 標簽沖突name: "CommentIndex",components: {},props: {},data() {return {tableData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀區金沙江路 1518 弄"},{date: "2016-05-04",name: "王小虎",address: "上海市普陀區金沙江路 1517 弄"},{date: "2016-05-01",name: "王小虎",address: "上海市普陀區金沙江路 1519 弄"},{date: "2016-05-03",name: "王小虎",address: "上海市普陀區金沙江路 1516 弄"}]};},computed: {},watch: {},created() {},methods: {}}; </script><style scoped></style> ```### 展示文章評論列表```html <template><div><el-card class="box-card"><div slot="header" class="clearfix"><span>評論管理</span></div><el-table :data="articles" style="width: 100%"><el-table-column prop="title" label="標題" width="180"></el-table-column><el-table-column prop="total_comment_count" label="總評論數"></el-table-column><el-table-column prop="fans_comment_count" label="粉絲評論數據"></el-table-column><el-table-column label="評論狀態" width="180"><template slot-scope="scope"><!-- 開關組件綁定的數據是一個布爾值，它會根據布爾值的真假來決定開關狀態 --><el-switchv-model="scope.row.comment_status"active-color="#13ce66"inactive-color="#ff4949"></el-switch></template></el-table-column><el-table-column label="操作"><template><el-button type="primary">修改</el-button></template></el-table-column></el-table></el-card></div> </template><script>export default {// 組件的 name 最好起名為兩個單詞，盡量少用一個單詞// 為什么？為了避免和原生的 html 標簽沖突name: 'CommentIndex',components: {},props: {},data () {return {+ articles: [] // 文章列表（文章的評論數據字段）}},computed: {},watch: {},created () {+ this.loadArticles()},methods: {+++ loadArticles () {this.$axios({method: 'GET',url: '/articles',params: {response_type: 'comment'// page: xxx // 頁碼}}).then(res => {this.articles = res.data.data.results}).catch(err => {console.log(err, '獲取數據失敗')})}}} </script><style scoped></style> ```### 修改評論狀態1、給開關組件注冊 `change` 事件2、在事件處理函數請求修改評論狀態```js onStatusChange (article) {this.$axios({method: 'PUT',url: '/comments/status',params: {article_id: article.id.toString()},data: {// 開關組件雙向綁定了 article.comment_status// 所以獲取 article.comment_status 也就是在獲取開關組件的啟用狀態allow_comment: article.comment_status}}).then(res => {console.log(res)this.$message({type: 'success',message: `${article.comment_status ? '啟用' : '關閉'}成功`})}).catch(err => {console.log(err)this.$message.error('操作失敗')}) } ```### 數據分頁## 評論管理> 測試文章：1196354762019176448### 創建組件并配置路由1、創建 `src/views/comment-detail/index.vue` 并寫入```html <template><div>評論列表</div> </template><script>export default {name: "CommentDetail",components: {},props: {},data() {return {};},computed: {},watch: {},created() {},methods: {}}; </script><style scoped></style> ```2、配置路由3、在評論列表中點擊修改跳轉到評論詳情頁### 布局### 展示評論列表1、在 data 中添加 `comments` 用于存儲評論列表```js data () {return {...comments: []} } ```2、在生命周期 `created` 中請求獲取評論數據3、模板綁定```html <template><div><el-card class="box-card"><div slot="header" class="clearfix"><span>評論詳情列表</span><el-button style="float: right; padding: 3px 0" type="text">操作按鈕</el-button></div><el-table :data="comments" style="width: 100%"><el-table-column label="頭像" width="180"><template slot-scope="scope"><img width="50" :src="scope.row.aut_photo" /></template></el-table-column><el-table-column prop="content" label="評論內容" width="180"></el-table-column><el-table-column prop="name" label="點贊" width="180"><template slot-scope="scope">{{ scope.row.is_liking === 1 ? '已贊' : '沒有贊' }}</template></el-table-column><el-table-column prop="like_count" label="點贊數量" width="180"></el-table-column><el-table-column prop="pubdate" label="評論日期" width="180"><template slot-scope="scope"><!--不傳參：{{ scope.row.pubdate | dateFormat }}傳參：{{ scope.row.pubdate | dateFormat(參數) }}-->{{ scope.row.pubdate | dateFormat('YYYY-MM-DD') }}</template></el-table-column><el-table-column label="是否推薦" width="180"><template slot-scope="scope"><el-switchv-model="scope.row.is_top"active-color="#13ce66"inactive-color="#ff4949"@change="onTop(scope.row)"></el-switch></template></el-table-column><el-table-column prop="reply_count" label="回復數量" width="180"></el-table-column></el-table></el-card></div> </template> ```### 評論推薦1、給推薦按鈕注冊點擊事件2、在處理函數中```js onTop (comment) {this.$axios({method: 'PUT',url: `/comments/${comment.com_id}/sticky`,data: {// comment.is_top 雙向綁定給了開關按鈕// 所以獲取 comment.is_top 就是在獲取開關的狀態sticky: comment.is_top}}).then(res => {this.$message('操作成功')}).catch(err => {this.$message.error('操作失敗', err)}) } ```

?

總結

以上是生活随笔為你收集整理的前端学习（2458）：评论模块的全部內容，希望文章能夠幫你解決所遇到的問題。

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