一、前端
(1) html部分
<template>
<div class="app-container">
课程列表
<!--查询表单-->
<el-form :inline="true" class="demo-form-inline">
<el-form-item>
<el-input v-model="courseQuery.title" placeholder="课程名称"/>
</el-form-item>
<el-form-item>
<el-select v-model="courseQuery.status" clearable placeholder="课程状态">
<el-option value="Normal" label="已发布"/>
<el-option value="Draft" label="未发布"/>
</el-select>
</el-form-item>
<el-form-item label="开始时间">
<el-date-picker
v-model="courseQuery.begin"
type="date"
placeholder="选择开始时间">
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间">
<el-date-picker
v-model="courseQuery.end"
type="date"
placeholder="选择结束时间">
</el-date-picker>
</el-form-item>
<el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
<el-button type="default" @click="resetData">清空</el-button>
</el-form>
<!-- 数据展示部分 -->
<el-table
:data="courseList"
border
fit
highlight-current-row>
<el-table-column
label="序号"
width="70"
align="center">
<template slot-scope="scope">
{{ (page - 1) * limit + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="title" label="课程名称" width="80" />
<el-table-column label="课程状态" width="80">
<template slot-scope="scope">
{{ scope.row.status==='Normal'?'已发布':'未发布' }}
</template>
</el-table-column>
<el-table-column prop="lessonNum" label="课时数" />
<el-table-column prop="gmtCreate" label="添加时间" width="160"/>
<el-table-column prop="viewCount" label="浏览数量" width="60" />
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<router-link :to="'/teacher/edit/'+scope.row.id">
<el-button type="primary" size="mini" icon="el-icon-edit">编辑课程基本信息</el-button>
</router-link>
<router-link :to="'/teacher/edit/'+scope.row.id">
<el-button type="primary" size="mini" icon="el-icon-edit">编辑课程大纲信息</el-button>
</router-link>
<el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除课程信息</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<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="getList"
/>
</div>
</template>
(2) js部分
<script>
import course from '@/api/edu/course'
export default {
data(){
return {
courseList: [],
courseQuery: {},
page: 1, //当前页
limit: 5, //每页记录数
total: 0 //总记录数
}
},
created(){
this.getList()
},
methods: {
// 分页条件查询
getList(page = 1){
this.page = page
course.getCourseListPage(this.page,this.limit,this.courseQuery).then(res =>{
this.courseList = res.data.rows
this.total = res.data.total
})
},
// 清空
resetData(){
this.courseQuery = {} //查询条件置空
this.getList()
}
}
}
</script>
(3)发送网络请求部分:course.js(用来封装网络请求)
// 分页条件查询
getCourseListPage(current,limit,courseQuery){
return request({
url: '/eduservice/course/pageConditionCourse/'+current+'/'+limit,
method: 'post',
//data表示把对象转换成json数据
data: courseQuery
})
},
二、后端
EduCourseController:
/*分页条件查询*/
@PostMapping("/pageConditionCourse/{current}/{limit}")
public R pageConditionCourse(@PathVariable("current") long current,
@PathVariable("limit") long limit,
@RequestBody(required = false) CourseQuery courseQuery){
//根据当前页current和每页记录数limit构建page分页对象
Page<EduCourse> pageCourse = new Page<>(current,limit);
/*构造查询条件*/
QueryWrapper queryWrapper = new QueryWrapper();
String title = courseQuery.getTitle();
String status = courseQuery.getStatus();
String begin = courseQuery.getBegin();
String end = courseQuery.getEnd();
if(!StringUtils.isEmpty(title)){
queryWrapper.like("title",title);
}
if(!StringUtils.isEmpty(status)){
queryWrapper.eq("status",status);
}
if(!StringUtils.isEmpty(begin)){
queryWrapper.ge("gmt_create",begin);
}
if(!StringUtils.isEmpty(end)){
queryWrapper.le("gmt_modified",end);
}
/*根据创建时间降序排列*/
queryWrapper.orderByDesc("gmt_create");
eduCourseService.page(pageCourse,queryWrapper);
List<EduCourse> records = pageCourse.getRecords(); //每页list集合
long total = pageCourse.getTotal(); //总记录数
return R.ok().data("total",total).data("rows",records);
}
实现效果图:
欢迎关注公众号Java技术大本营,会不定期分享BAT面试资料等福利。