前端页面
后端
定义列表分页查询的方法
/**
* <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 当中定义请求接口
// 作品列表
getContentPageList(page, limit, searchObj) {
return request({
url: `/service_video/content/getContentPageQuery/${page}/${limit}`,
method: 'get',
params: searchObj
});
}
在 list.vue 当中引入相关组件与定义数据模型导入对应的 api 方法如下
import content from "@/api/video/content/content";
import category from "@/api/video/category/category";
data() {
return {
// 是否显示loading信息
listLoading: true,
// 数据列表
list: null,
// 总记录数
total: 0,
// 页码
page: 1,
// 每页记录数
limit: 10,
// 查询条件
searchObj: {
categoryParentId: '',
categoryId: '',
title: '',
authorId: ''
},
// 作者列表
authorList: [],
// 一级分类列表
oneCategoryList: [],
// 二级分类列表
twoCategoryList: []
}
},
初始化查询下拉列表数据
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;
});
},
搜索查询页面添加
<!--
查询表单
-->
<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>
<!--
二级分类
-->
<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
页面样式
<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>
