【VIDEO_Parent】-创作者前端-创作者列表

2023-11-30 13:27:52 浏览数 (3)

修改路由跳转

修改路由

需要注意把如下图的地方给注释掉，不要纠结为啥，因为路由重复了

代码语言：javascript复制
{
    path: '/',
    component: Layout,
    // redirect: '/dashboard',
    children: [{
      path: '/',
      name: '首页',
      component: () => import('@/views/dashboard/index'),
      meta: {title: '首页', icon: 'dashboard'}
    }]
  },
  {
    path: '/author',
    component: Layout,
    redirect: '/author/table',
    name: '创作者管理',
    meta: {title: '创作者管理', icon: 'el-icon-s-help'},
    children: [
      {
        path: 'table',
        name: '创作者列表',
        component: () => import('@/views/video/author/list'),
        meta: {title: '创作者列表', icon: 'table'}
      },
      {
        path: 'save',
        name: '添加创作者',
        component: () => import('@/views/video/author/save'),
        meta: {title: '添加创作者', icon: 'tree'}
      }
    ]
  },

在上图中我新建了两个组件，如何新建的呢，快捷键为 Ctrl Alt Shift insert 即可弹出如下的框子选择 Vue Component 如下图

不使用快捷键的话那么就直接在需要添加组件的文件包上面鼠标右键选择 New 也可以出现如上图的选项卡

创建组件

一个 list，一个 save 内容如下图所示

编写 api 请求数据

列表数据请求

在 api 文件夹当中创建请求的 js 文件

代码语言：javascript复制
import request from '@/utils/request'

export default {
  // 1.作者列表-分页查询
  getAuthorListPage(page, limit, authorQuery) {
    return request({
      // 路由参数拼接
      url: `/service_video/author/pageList/${page}/${limit}/`,
      method: 'post',
      // data 会自动转成 json 传递到接口当中
      data: authorQuery
    })
  }
}

在 list.vue 当中引入对应的 js

代码语言：javascript复制
// 引入 author.js 调用对应的请求方法
import author from '@/api/video/author/author';

定义成员变量, 发送请求

代码语言：javascript复制
export default {
  name: "list",
  // 定义变量与初始值
  data() {
    return {
      // 查询的结果集
      list: null,
      // 当前页
      page: 1,
      // 每页多少条记录
      limit: 10,
      // 总记录数
      total: 0,
      // 查询封装的对象
      authorQuery: {}
    }
  },
  // 自定义方法
  methods: {
    getAuthorList(page = 1) {
      this.page = page
      author.getAuthorListPage(this.page, this.limit, this.authorQuery)
        .then(resp => {
          // 处理请求成功
          console.log(resp);
        }).catch(error => {
        // 请求失败
      });
    }
  },
  // 页面渲染之前会自动调用此方法
  created() {
    this.getAuthorList();
  }
}

在后端服务器接口当中添加跨域注解

代码语言：java复制
@CrossOrigin

前端和后端工程都启动点击创作者列表效果如下图所示

Element-ui 表格组件

https://element.eleme.io/#/zh-CN/component/table

数据展示

创作者列表数据展示

代码语言：html复制
<!--
表格
-->
<el-table
  :data="list"
  border
  fit
  highlight-current-row>
  <el-table-column label="序号" align="center"/>
  <el-table-column label="名称" align="center" prop="name"/>
  <el-table-column label="级别" align="center"/>
  <el-table-column label="创作者简介" align="center" prop="intro"/>
  <el-table-column label="添加时间" align="center" prop="gmtCreate"/>
  <el-table-column label="排序" align="center" prop="sort"/>
  <el-table-column label="操作" align="center">
    <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
    <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
  </el-table-column>
</el-table>

处理请求成功的回调如下

序号与级别处理

代码语言：html复制
<!-- 通过 slot 拿到表格当中绑定的数据 -->
<template slot-scope="scope">
  {{ scope.$index   1 }}
</template>
代码语言：html复制
<!-- 通过 slot 拿到表格当中绑定的数据 -->
<template slot-scope="scope">
  {{ scope.row.level === 1 ? "普通创作者" : "特约创作者" }}
</template>

最后

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

开源项目介绍 2023腾讯·技术创作特训营第三期视频点播 项目实战

0 人点赞