内容管理-评论管理

组件与路由配置

目标：实现评论组件的路由配置

• 配置组件的路由映射

import Comment from '@/views/comment/index.vue'
{ path: '/comment', component: Comment },

• 基本布局

<div class="comment">
  <el-card>
    <div slot="header">
      评论管理
    </div> 
  </el-card>
</div>

列表渲染

目标：实现评论列表的动态渲染

• 获取列表数据

methods: {
  async loadCommentList () {
    // 获取评论列表数据
    try {
      const ret = await loadArticleList(this.filterParams)
      this.list = ret.data.results
      this.total = ret.data.total_count
    } catch (e) {
      console.log(e)
      this.$message.error('获取评论失败')
    }
  }
},
created () {
  this.loadCommentList()
}

• 渲染列表布局

<el-table :data="comments">
  <el-table-column label="标题" prop="title"></el-table-column>
  <el-table-column label="总评论数" prop="total_comment_count"></el-table-column>
  <el-table-column label="粉丝评论数" prop="fans_comment_count"></el-table-column>
  <el-table-column label="状态">
    <template v-slot="scope">{{scope.row.comment_status?'正常':'关闭'}}</template>
  </el-table-column>
  <el-table-column label="操作" width="120px">
    <template>
      <el-button type="success" size="small">打开评论</el-button>
    </template>
  </el-table-column>
</el-table>

分页效果

目标：实现评论列表的分页效果

• 分页标签结构

<el-pagination
  style="margin-top:20px"
  background
  layout="prev, pager, next"
  :total="total"
  :current-page="filterParams.page"
  :page-size="filterParams.per_page"
  @current-change="changePager"
></el-pagination>

• 分页切换

changePager (page) {
    // 实现分页切换
    this.filterParams.page = page
    this.loadCommentList()
},

打开与关闭

目标：控制评论列表的打开与关闭效果

• 按钮注册事件

<el-button
    @click="toggleStatus(scope.row)"
    v-if="scope.row.comment_status"
    type="danger"
    size="small"
>关闭评论</el-button>

• 控制评论的打开和关闭

// 切换文章评论状态
async toggleStatus (row) {
  // 切换评论的状态
  try {
    await toggleStatus({
      allow_comment: !row.comment_status
    }, {
      article_id: row.id.toString()
    })
    // 修改页码状态
    row.comment_status = !row.comment_status
  } catch (e) {
    console.log(e)
    this.$message.error('切换评论状态失败')
  }
},