2021/7/14 学习知识汇聚平台：取消收藏与专题列表

本次主要实现了取消收藏按钮，并对于专题列表页面进行了布局与接口数据连接

首先对于取消收藏功能实现主要函数代码如下：

Delete(s)
    {
      axios.post("http://47.107.40.143:8080/pcOption", QS.stringify(
          {
            aid: s,
            uid: this.uid,
            opt: 1

          })).then(res => {
        console.log(res)
        window.location.reload()
      })
    },

其次就是开始对二轮迭代中的部分进行实现，首先尝试布局了专题列表页面

代码如下：

<template>
  <div>
    <Leftbar>
    </Leftbar>
    <headers_copy>
    </headers_copy>
    <el-table  class="class"
               :data="tableData"
               style="width: 100%">
      <el-table-column
          label="专题"
          width="420">
        <template slot-scope="props">
          <el-popover trigger="hover" placement="top">
            <p>创建者: <span content="name">{{ props.row.founder }}</span></p>
            <p>专题简介: <span content="name">{{ props.row.content }}</span></p>
            <div slot="reference" class="name-wrapper">
              <el-button type="text" >
                <el-button type="text" @click="getarticle(props.row.sid)"><span content="name" >
            {{props.row.subName}}
          </span></el-button>
              </el-button>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
          label="创建时间"
          width="220" >
        <template slot-scope="props">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ props.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column  label="操作" >
        <template slot-scope="scope">
          <el-button
              size="medium"
              type="#f0f9eb"
          >删除专题</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>

import Leftbar from "../components/Leftbar";
import headers_copy from "@/components/headers_copy";
import QS from "qs";
const axios = require('axios');
export default {
  name:"Class",
  components: {
    Leftbar,
    headers_copy,
  },
  data() {
    return {
      tableData: [],
      uid: sessionStorage.getItem("uid"),
    }
  },
  created() {
    const _this=this
    axios.post("http://47.107.40.143:8080//checkSubjectList",QS.stringify(
        {
          uid:0,

        })).then(res=>{
      console.log(res)
      _this.tableData=res.data.data
    })
  },
  methods: {
    getarticle(s){
      this.$router.push(
          {
            name:'ClassDetail',
            query:{sid:s}
          }
      )
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
}
</script>
<style scoped>
.class{
  margin-left: 250px;
  margin-top: 5px;
}
</style>

目前实现的界面布局如下所示：

 基本实现了对于后台数据的查询与渲染