评论管理-基础布局-v-if和v-else & 列表与分页-created获取数据-async异步获取数据-pagination分页组件 & 打开与关闭-成功后更新状态

01-评论管理-基础布局

src/views/comment/index.vue 中的div盒子里

<template>
  <div class='container'>
    <el-card>
      <div slot="header">
        <my-bread>评论管理</my-bread>
      </div>
      <!-- 表格 -->
      <el-table :data="articles">
        <el-table-column label="标题"></el-table-column>
        <el-table-column label="总评论数"></el-table-column>
        <el-table-column label="粉丝评论数"></el-table-column>
        <el-table-column label="状态"></el-table-column>
        <el-table-column label="操作"></el-table-column>
      </el-table>
      <!-- 分页 -->
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      articles: []
    }
  }
}
</script>

<style scoped lang='less'></style>

02-评论管理-列表与分页

列表：src/views/comment/index.vue 中的div盒子里

 <!-- 表格 -->
      <el-table :data="articles">
        <el-table-column label="标题" prop="title" width="400px"></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 slot-scope="scope">
            {{scope.row.comment_status?'正常':'关闭'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <el-button v-if="scope.row.comment_status" type="danger" size="small">关闭评论</el-button>
            <el-button v-else type="success" size="small">打开评论</el-button>
          </template>
        </el-table-column>
      </el-table>

src/views/comment/index.vue 中的data返回值里

 articles: [],

comment/index.vue中的export default里声明

created () {
    this.getArtciles()   //拿到数据
  },
      //异步获取
  methods: {
      // post 请求 post(‘地址’，‘数据’)
    // get 请求 get(‘地址’，‘{params:数据}’)

    //解构赋值
// 得到 用户 信息  res.data.data  res = {data:{data:'用户信息',message:'提示'}}
// 以前获取对象中的属性值：res.data ={data:'用户信息'}
// ES6提供解构赋值语法：{data:{data:data}}

  // 函数的返回值  加载await之后  是then接受的数据
  // 在使用await之后在 外层函数必须用async 来申明
    async getArtciles () {
      const { data: { data } } = await this.$http.get('articles', { params: this.reqParams })
      this.articles = data.results
    }
  }

pagination分页组件-带有背景颜色的分页模式：
https://element.eleme.cn/#/zh-CN/component/pagination

分页：src/views/comment/index.vue 中的div盒子里

<!-- 分页 -->
      <el-pagination
        style="text-align:center;margin-top:20px"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="reqParams.per_page"
        :current-page="reqParams.page"
        @current-change="changePager"
        hide-on-single-page
      ></el-pagination>

src/views/comment/index.vue 中的data返回值里

 total: 0,

comment/index.vue中的methods里声明

changePager (newPage) {
      this.reqParams.page = newPage
      this.getArtciles()
    },

03-评论管理-打开与关闭

列表：src/views/comment/index.vue 中的div盒子里

//绑定事件
<template slot-scope="scope">
            <el-button @click="toggleStatus(scope.row)" v-if="scope.row.comment_status" type="danger" size="small">关闭评论</el-button>
            <el-button @click="toggleStatus(scope.row)" v-else type="success" size="small">打开评论</el-button>
          </template>

comment/index.vue中的export default里声明

// post 请求 post(‘地址’，‘数据’)
    // get 请求 get(‘地址’，‘{params:数据}’)

    //解构赋值
// 得到 用户 信息  res.data.data  res = {data:{data:'用户信息',message:'提示'}}
// 以前获取对象中的属性值：res.data ={data:'用户信息'}
// ES6提供解构赋值语法：{data:{data:data}}

  // 函数的返回值  加载await之后  是then接受的数据
  // 在使用await之后在 外层函数必须用async 来申明


// 打开或关闭评论
    async toggleStatus (row) {
      const { data: { data } } = await this.$http.put(`comments/status?article_id=${row.id}`, {
        allow_comment: !row.comment_status
      })
      // 成功后  提示 + 更新列表（更新当前行评论状态即可）
      this.$message.success(data.allow_comment ? '打开评论成功' : '关闭评论成功')
      row.comment_status = data.allow_comment
    },