前端页面

作品管理-作品列表_Project

后端

定义列表分页查询的方法

作品管理-作品列表_ico_02

 /**
 * <b>
 * 分页查询作品列表方法
 * </b>
 */
@ApiOperation(value = "分页查询作品列表方法")
@GetMapping("/getContentPageQuery/{page}/{limit}")
public ResponseResult contentPageQuery(@PathVariable Long page, @PathVariable Long limit, ContentVO contentVO) {
    Page<Content> pageParam = new Page<>(page, limit);
    contentService.contentPageQuery(pageParam, contentVO);
    return ResponseResult.ok().data("total", pageParam.getTotal()).data("rows", pageParam.getRecords());
}

修改 ​​ContentService​​

/**
 * <b>
 * 分页查询作品列表方法
 * </b>
 *
 * @param pageParam 分页信息
 * @param contentVO 过滤条件信息实体
 */
void contentPageQuery(Page<Content> pageParam, ContentVO contentVO);

修改 ContentServiceImpl 实现对应的业务

@Override
public void contentPageQuery(Page<Content> pageParam, ContentVO contentVO) {
    QueryWrapper<Content> queryWrapper = new QueryWrapper<>();
    queryWrapper.orderByDesc("gmt_create");

    if (contentVO == null) {
        baseMapper.selectPage(pageParam, queryWrapper);
        return;
    }

    if (!StringUtils.isEmpty(contentVO.getTitle())) {
        queryWrapper.like("title", contentVO.getTitle());
    }

    if (!StringUtils.isEmpty(contentVO.getAuthorId())) {
        queryWrapper.eq("author_id", contentVO.getAuthorId());
    }

    if (!StringUtils.isEmpty(contentVO.getCategoryParentId())) {
        queryWrapper.eq("category_parent_id", contentVO.getCategoryParentId());
    }

    if (!StringUtils.isEmpty(contentVO.getCategoryId())) {
        queryWrapper.eq("category_id", contentVO.getCategoryId());
    }
    baseMapper.selectPage(pageParam, queryWrapper);
}

前端

在 content.js 当中定义请求接口

作品管理-作品列表_ico_03

// 作品列表
getContentPageList(page, limit, searchObj) {
  return request({
    url: `/service_video/content/getContentPageQuery/${page}/${limit}`,
    method: 'get',
    params: searchObj
  });
}

在 list.vue 当中引入相关组件与定义数据模型导入对应的 api 方法如下

作品管理-作品列表_ide_04

import content from "@/api/video/content/content";
import category from "@/api/video/category/category";

作品管理-作品列表_Project_05

data() {
  return {
    // 是否显示loading信息
    listLoading: true,
    // 数据列表
    list: null,
    // 总记录数
    total: 0,
    // 页码
    page: 1,
    // 每页记录数
    limit: 10,
    // 查询条件
    searchObj: {
      categoryParentId: '',
      categoryId: '',
      title: '',
      authorId: ''
    },
    // 作者列表
    authorList: [],
    // 一级分类列表
    oneCategoryList: [],
    // 二级分类列表
    twoCategoryList: []
  }
},

初始化查询下拉列表数据

作品管理-作品列表_ide_06

created() {
  // 当页面加载时获取数据
  this.getData();
  // 初始化分类列表
  this.getCategoryList();
  // 获取讲师列表
  this.initAuthorList();
}
initAuthorList() {
  content.getAuthorList().then(res => {
    this.authorList = res.data.list;
  }).catch(error => {
    this.$message.error(error.message);
  });
},
// 加载所有的分类
getCategoryList() {
  // 1.获取一级分类
  category.getCategoryData().then(res => {
    this.oneCategoryList = res.data.list;
  }).catch(error => {
    this.$message.error(error.message);
  });
},
// 当一级分类改变时调用的 方法  参数:当前一级分类选择的id
oneCategoryChanged(value) {
  for (let i = 0; i < this.oneCategoryList.length; i++) {
    let category = this.oneCategoryList[i];

    if (value === category.id) {
      this.twoCategoryList = category.children;
      // 清空已经选择的二级分类
      this.searchObj.categoryId = '';
    }
  }
},
// 调用api层获取数据库中的数据
getData(page = 1) {
  // 当点击分页组件的切换按钮的时候，会传输一个当前页码的参数page
  // 解决分页无效问题
  this.page = page;
  this.listLoading = true;
  content.getContentPageList(this.page, this.limit, this.searchObj).then(response => {
    // debugger 设置断点调试
    if (response.success === true) {
      this.list = response.data.rows;
      this.total = response.data.total;
    }
    this.listLoading = false;
  }).catch(error => {
    this.$message.error(error.message);
    this.listLoading = false;
  });
},

搜索查询页面添加

作品管理-作品列表_ico_07

<!--
查询表单
-->
<el-form :inline="true" class="demo-form-inline">
  <!--
  所属分类：级联下拉列表
  -->

  <!--
  一级分类
  -->
  <el-form-item label="分类">
    <el-select
      v-model="searchObj.categoryParentId"
      placeholder="请选择"
      @change="oneCategoryChanged">
      <el-option
        v-for="category in oneCategoryList"
        :key="category.id"
        :label="category.title"
        :value="category.id"/>
    </el-select>
    &nbsp;
    <!--
    二级分类
    -->
    <el-select placeholder="请选择" v-model="searchObj.categoryId">
      <el-option v-for="twoCategory in twoCategoryList"
                 :key="twoCategory.id"
                 :label="twoCategory.title"
                 :value="twoCategory.id"/>
    </el-select>
  </el-form-item>

  <!-- 标题 -->
  <el-form-item>
    <el-input v-model="searchObj.title" placeholder="作品标题"/>
  </el-form-item>

  <!-- 作者 -->
  <el-form-item>
    <el-select
      v-model="searchObj.authorId"
      placeholder="请选择作者">
      <el-option
        v-for="author in authorList"
        :key="author.id"
        :label="author.name"
        :value="author.id"/>
    </el-select>
  </el-form-item>
  <el-button type="primary" icon="el-icon-search" @click="getData()">查询</el-button>
  <el-button type="default" @click="resetData()">清空</el-button>
</el-form>

清空方法实现

resetData() {
  this.searchObj = {};
  // 二级分类列表
  this.twoCategoryList = [];
  this.getData();
},

列表页面添加

<el-row :gutter="15">
  <el-col :span="5" v-for="item in list">
    <div class="grid-content bg-purple">
      <img :src="item.cover" alt="scope.row.title" width="100%" height="150px">
      <a href="#" style="font-size: 14px; color: #333">{{ item.title }}</a>
      <p style="margin-top: 0">
        <router-link :to="'/content/info/'+item.id">
          <el-button type="text" size="mini" icon="el-icon-edit">编辑作品信息</el-button>
        </router-link>
        <el-button style="margin-left: 100px" type="text" size="mini"
                   @click="deleteContentById(item.id)" icon="el-icon-delete">删除
        </el-button>
      </p>
      <p style="font-size: 14px; color: red; margin-top: -15px;">
        价格: {{ Number(item.price) === 0 ? '免费' : '¥' + item.price.toFixed(2) }}
      </p>
    </div>
  </el-col>
</el-row>
<!-- 分页 -->
<el-pagination
  :current-page="page"
  :page-size="limit"
  :total="total"
  style="padding: 30px 0; text-align: center;"
  layout="total, prev, pager, next, jumper"
  @current-change="getData"
/>

注意点：需要在最外层套一个 ​​div​​ 如下图，不然使用不了 element-ui

作品管理-作品列表_ide_08

页面样式

<style scoped>
.app-container {
  width: 1260px;
}

.el-col {
  margin-top: 10px;
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  height: 250px;

}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>