使用 element-ui 搭建后台管理页面

使用 element-ui 搭建后台管理页面

新增页面文件admin/src/views/Topics.vue,完整代码如下:

<template>
  <div>
    <el-table :data="itemList" stripe style="width: 100%">
      <el-table-column prop="id" label="编号" width="180"></el-table-column>
      <el-table-column prop="title" label="标题" width="180"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="danger"
            @click="deleteTopic(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="float: right;"
      background
      layout="prev, pager, next"
      :page-size="20"
      :total="count"
      @current-change="pageChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1, // 当前页码
      itemList: [], // 列表数据
      count: 0, // 数据总条数
    };
  },
  created() {
    this.getList(1);
  },
  methods: {
    // 页码变更
    async pageChange(page) {
      this.page = page;
      await this.getList();
    },
    // 获取列表
    async getList() {
      try {
        const ret = await this.axios.get('/api/admin/topic/list', {
          params: {
            page: this.page,
          },
        });
        console.log(ret);
        this.itemList = ret.itemList;
        this.count = ret.count;
      } catch (err) {
        if (err.errorCode === 1) {
          this.$message('请先登录');
          this.$router.push('/login');
        } else {
          alert(err.message || err);
        }
      }
    },
    // 删除帖子
    async deleteTopic(id) {
      try {
        await this.axios.post('/api/admin/topic/delete', {
          id: id,
        });
        this.$message('删除成功');
        await this.getList();
      } catch (err) {
        if (err.errorCode === 1) {
          this.$message('请先登录');
          this.$router.push('/login');
        } else {
          alert(err.message || err);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>

然后修改admin/src/router/index.js文件,将Topics.vue页面注册到vue-router路由中,代码片段如下:

...

const routes = [
  ...
  {
    path: '/topics',
    name: 'topics',
    component: () => import('../views/Topics.vue')
  },
  ...
]

...

启动服务后访问路径/topics即可查看页面功能,如下图:
uid770606-20191022-1571732429996

后面的帖子管理、用户管理等模块都同理开发即可