【Go + Nuxt.js 搭建一个 BBS 系统】12. 搭建后台帖子管理功能

点击下面链接购买后可获取本课程完整源码，同时提供高大上的在线IDE开发环境，边看教程边动手。

• 购买地址：https://www.shiyanlou.com/courses/1436
• 购买九折优惠邀请码： ZHwfIjb1

作者简介

大猫猫，互联网公司老码农、不折腾不舒服斯基，多年千万日活服务端研发和架构经验。关注公众号查看更多技术干货：

实验介绍

实验内容

在前面章节中我们完成了后台管理功能的基础框架搭建，接下来我们基于之前的代码继续完善后台管理功能。

知识点

• 使用Go语言开发后台管理接口
• 使用element-ui搭建后台管理页面

服务端

首先我们修改服务端代码，新增帖子管理相关接口。新增文件server/admin_topic_controller.go定义AdminTopicController，完整代码如下：

package main

import (
	"github.com/kataras/iris/context"
	"github.com/mlogclub/simple"
)

type AdminTopicController struct {
	Ctx context.Context
}

// 帖子列表接口
func (this *AdminTopicController) GetList() *simple.JsonResult {
	page := this.Ctx.URLParamIntDefault("page", 1) // 页码
	offset := 20 * (page - 1)                      // Offset

	var topics []Topic
	var totalCount int

	db.Order("id desc").Offset(offset).Limit(20).Find(&topics) // 查列表
	db.Model(&Topic{}).Count(&totalCount)                      // 查计数

	return simple.NewEmptyRspBuilder().Put("itemList", topics).Put("count", totalCount).JsonResult()
}

// 帖子删除接口
func (this *AdminTopicController) PostDelete() *simple.JsonResult {
	id, err := this.Ctx.PostValueInt64("id")
	if err != nil {
		return simple.JsonErrorMsg(err.Error())
	}
	db.Delete(&Topic{}, "id = ?", id)
	return simple.JsonSuccess()
}

然后修改server/main.go文件，将AdminTopicController注册到iris路由中，代码片段如下：

...

mvc.Configure(app.Party("/api/admin"), func(mvcApp *mvc.Application) {
    // 使用middleware实现登录校验
    mvcApp.Router.Use(func(context context.Context) {
        if context.Path() == "/api/admin/user/login" { // 登录接口不做校验
            context.Next()
            return
        }
        user := UserService.GetCurrent(context)
        if user == nil { // 如果用户没登陆，那么返回错误码1，要求登录
            _, _ = context.JSON(simple.JsonError(simple.ErrorNotLogin))
            context.StopExecution()
            return
        }
        context.Next()
    })
    mvcApp.Party("/user").Handle(new(AdminUserController))
    mvcApp.Party("/topic").Handle(new(AdminTopicController))
})

...

修改完成之后重启服务。

前端页面

新增页面文件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即可查看页面功能，如下图：

总结

通过本章节，相信你已经能够独立完整一个后台管理模块的开发了，后面的帖子管理、用户管理等模块都同理开发即可。下面我们来看下本实例的完整代码目录结构：

.
├── admin
│   ├── README.md
│   ├── babel.config.js
│   ├── package-lock.json
│   ├── package.json
│   ├── postcss.config.js
│   ├── public
│   │   ├── favicon.ico
│   │   └── index.html
│   └── src
│       ├── App.vue
│       ├── assets
│       │   └── logo.png
│       ├── components
│       │   └── HelloWorld.vue
│       ├── element-variables.scss
│       ├── main.js
│       ├── plugins
│       │   ├── axios.js
│       │   └── element.js
│       ├── router
│       │   └── index.js
│       ├── store
│       │   └── index.js
│       └── views
│           ├── About.vue
│           ├── Home.vue
│           ├── Login.vue
│           └── Topics.vue
└── server
    ├── admin_topic_controller.go
    ├── admin_user_controller.go
    ├── comment_controller.go
    ├── comment_model.go
    ├── comment_service.go
    ├── go.mod
    ├── go.sum
    ├── main.go
    ├── topic_controller.go
    ├── topic_model.go
    ├── topic_service.go
    ├── user_controller.go
    ├── user_model.go
    └── user_service.go

文章转载请注明出处，原文链接：https://mlog.club/topic/654