瑞吉外卖项目学习笔记：P16-套餐信息分页查询功能开发
发布时间：2023-10-20 11:30
P16-套餐信息分页查询功能开发
- 1.需求分析
- 2.代码开发
-
- 2.1前后端交互流程
- 2.2前端代码
-
- 2.2.1 页面代码list.html
- 2.2.2js代码
- 2.3后端代码开发SetmealController
1.需求分析
系统中的套餐数据很多的时候，如果在一个页面中全部展示出来会显得比较乱，不便于查看,所以一般的系统中都会以分页的方式来展示列表数据。
![\"瑞吉外卖项目学习笔记：P16-套餐信息分页查询功能开发_第1张图片\"](\"https://img.it610.com/image/info8/50b26aad37b543f7a3c045376e330fbc.jpg\")
2.代码开发
2.1前后端交互流程
-
页面(backend/ page/combo/ list.html)发送ajax请求,将分页查询参数(page、pageSize 、name)提交到服务端，获取分页数据
![\"瑞吉外卖项目学习笔记：P16-套餐信息分页查询功能开发_第2张图片\"](\"https://img.it610.com/image/info8/a56520bb7664441f89a7e341c38349cf.jpg\")
![\"瑞吉外卖项目学习笔记：P16-套餐信息分页查询功能开发_第3张图片\"](\"https://img.it610.com/image/info8/fb810c80c5a0407083406f2ed9241459.jpg\")
![\"瑞吉外卖项目学习笔记：P16-套餐信息分页查询功能开发_第4张图片\"](\"https://img.it610.com/image/info8/8b9c3411ae50464bb1fea51b4e2bf410.jpg\")
-
页面发送请求，请求服务端进行图片下载，用于页面图片展示
开发套餐信息分页查询功能，其实就是在服务端编写代码去处理前端页面发送的这2次请求即可。
2.2前端代码
2.2.1 页面代码list.html
DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>Documenttitle>
<link rel=\"stylesheet\" href=\"../../plugins/element-ui/index.css\" />
<link rel=\"stylesheet\" href=\"../../styles/common.css\" />
<link rel=\"stylesheet\" href=\"../../styles/page.css\" />
head>
<body>
<div class=\"dashboard-container\" id=\"combo-app\">
<div class=\"container\">
<div class=\"tableBar\">
<el-input
v-model=\"input\"
placeholder=\"请输入套餐名称\"
style=\"width: 250px\"
clearable
@keyup.enter.native=\"handleQuery\"
>
<i
slot=\"prefix\"
class=\"el-input__icon el-icon-search\"
style=\"cursor: pointer\"
@click=\"init\"
>i>
el-input>
<div class=\"tableLab\">
<span class=\"span-btn delBut non\" @click=\"deleteHandle(\'批量\')\">批量删除span>
<span class=\"span-btn blueBug non\" @click=\"statusHandle(\'1\')\">批量启售span>
<span
style=\"border:none;\"
class=\"span-btn delBut non\"
@click=\"statusHandle(\'0\')\"
>批量停售span>
<el-button
type=\"primary\"
@click=\"addSetMeal(\'add\')\"
>
+ 新建套餐
el-button>
div>
div>
<el-table
:data=\"tableData\"
stripe
class=\"tableBox\"
@selection-change=\"handleSelectionChange\"
>
<el-table-column
type=\"selection\"
width=\"25\"
>el-table-column>
<el-table-column
prop=\"name\"
label=\"套餐名称\"
>el-table-column>
<el-table-column prop=\"image\" label=\"图片\" align=\"center\">
<template slot-scope=\"{ row }\">
<el-image style=\"width: auto; height: 40px; border:none;cursor: pointer;\" :src=\"getImage(row.image)\" :preview-src-list=\"[ `/common/download?name=${row.image}` ]\" >
<div slot=\"error\" class=\"image-slot\">
<img src=\"./../../images/noImg.png\" style=\"width: auto; height: 40px; border:none;\" >
div>
el-image>
template>
el-table-column>
<el-table-column
prop=\"categoryName\"
label=\"套餐分类\"
>el-table-column>
<el-table-column
prop=\"price\"
label=\"套餐价\"
>
<template slot-scope=\"scope\">
<span>￥{{ scope.row.price/100 }}span>
template>
el-table-column>
<el-table-column label=\"售卖状态\">
<template slot-scope=\"scope\">
<span>{{ scope.row.status == \'0\' ? \'停售\' : \'启售\' }}span>
template>
el-table-column>
<el-table-column
prop=\"updateTime\"
label=\"最后操作时间\"
>
el-table-column>
<el-table-column
label=\"操作\"
width=\"160\"
align=\"center\"
>
<template slot-scope=\"scope\">
<el-button
type=\"text\"
size=\"small\"
class=\"blueBug\"
@click=\"addSetMeal(scope.row.id)\"
>
修改
el-button>
<el-button
type=\"text\"
size=\"small\"
class=\"blueBug\"
@click=\"statusHandle(scope.row)\"
>
{{ scope.row.status == \'0\' ? \'启售\' : \'停售\' }}
el-button>
<el-button
type=\"text\"
size=\"small\"
class=\"delBut non\"
@click=\"deleteHandle(\'单删\', scope.row.id)\"
>
删除
el-button>
template>
el-table-column>
el-table>
<el-pagination
class=\"pageList\"
:page-sizes=\"[10, 20, 30, 40]\"
:page-size=\"pageSize\"
layout=\"total, sizes, prev, pager, next, jumper\"
:total=\"counts\"
@size-change=\"handleSizeChange\"
:current-page.sync=\"page\"
@current-change=\"handleCurrentChange\"
>el-pagination>
div>
div>
<script src=\"../../plugins/vue/vue.js\">script>
<script src=\"../../plugins/element-ui/index.js\">script>
<script src=\"../../plugins/axios/axios.min.js\">script>
<script src=\"../../js/request.js\">script>
<script src=\"../../api/combo.js\">script>
<script>
new Vue({
el: \'#combo-app\',
data() {
return {
input: \'\',
counts: 0,
page: 1,
pageSize: 10,
tableData : [],
dishState : \'\',
checkList: []
}
},
computed: {},
created() {
this.init()
},
mounted() {
},
methods: {
async init () {
const params = {
page: this.page,
pageSize: this.pageSize,
name: this.input ? this.input : undefined
}
await getSetmealPage(params).then(res => {
if (String(res.code) === \'1\') {
this.tableData = res.data.records || []
this.counts = res.data.total
}
}).catch(err => {
this.$message.error(\'请求出错了：\' + err)
})
},
getImage (image) {
return `/common/download?name=${image}`
},
handleQuery() {
this.page = 1;
this.init();
},
// 添加
addSetMeal (st) {
if (st === \'add\'){
window.parent.menuHandle({
id: \'5\',
url: \'/backend/page/combo/add.html\',
name: \'添加套餐\'
},true)
} else {
window.parent.menuHandle({
id: \'5\',
url: \'/backend/page/combo/add.html?id=\'+st,
name: \'修改套餐\'
},true)
}
},
// 删除
deleteHandle (type, id) {
if (type === \'批量\' && id === null) {
if (this.checkList.length === 0) {
return this.$message.error(\'请选择删除对象\')
}
}
this.$confirm(\'确定删除该套餐, 是否继续?\', \'确定删除\', {
\'confirmButtonText\': \'确定\',
\'cancelButtonText\': \'取消\',
}).then(() => {
deleteSetmeal(type === \'批量\' ? this.checkList.join(\',\') : id).then(res => {
if (res.code === 1) {
this.$message.success(\'删除成功！\')
this.handleQuery()
} else {
this.$message.error(res.msg || \'操作失败\')
}
}).catch(err => {
this.$message.error(\'请求出错了：\' + err)
})
})
},
//状态更改
statusHandle (row) {
let params = {}
if (typeof row === \'string\' ){
if (this.checkList.length == 0){
this.$message.error(\'批量操作，请先勾选操作菜品！\')
return false
}
params.ids = this.checkList.join(\',\')
params.status = row
} else {
params.ids = row.id
params.status = row.status ? \'0\' : \'1\'
}
this.$confirm(\'确认更改该套餐状态?\', \'提示\', {
\'confirmButtonText\': \'确定\',
\'cancelButtonText\': \'取消\',
\'type\': \'warning\'
}).then(() => {
// 起售停售---批量起售停售接口
setmealStatusByStatus(params).then(res => {
if (res.code === 1) {
this.$message.success(\'套餐状态已经更改成功！\')
this.handleQuery()
} else {
this.$message.error(res.msg || \'操作失败\')
}
}).catch(err => {
this.$message.error(\'请求出错了：\' + err)
})
})
},
// 全部操作
handleSelectionChange (val){
let checkArr = []
val.forEach((n) => {
checkArr.push(n.id)
})
this.checkList = checkArr
},
handleSizeChange (val) {
this.pageSize = val
this.init()
},
handleCurrentChange (val) {
this.page = val
this.init()
}
}
})
script>
body>
html>
2.2.2js代码
// 查询列表数据
const getSetmealPage = (params) => {
return $axios({
url: \'/setmeal/page\',
method: \'get\',
params
})
}
2.3后端代码开发SetmealController
/**
* 套餐分页查询
* @param page
* @param pageSize
* @param name
* @return
*/
@GetMapping(\"/page\")
public R<Page> page(int page, int pageSize, String name){
log.info(\"page={},pageSize={},name={}\",page,pageSize,name);
//构造分页条件构造器 page,pageSize
Page<Setmeal> pageInfo=new Page(page,pageSize);
Page<SetmealDto>setmealDtoPage =new Page<>();
LambdaQueryWrapper<Setmeal>queryWrapper=new LambdaQueryWrapper<>();
//添加查询条件，根据name
queryWrapper.like(name!=null,Setmeal::getName,name);
//添加查询条件
queryWrapper.orderByDesc(Setmeal::getUpdateTime);
//执行查询
setmealService.page(pageInfo,queryWrapper);
//对象拷贝pageInfo——》setmealDtoPage ,给setmealDtoPage 的categoryName赋值
BeanUtils.copyProperties(pageInfo,setmealDtoPage,\"records\");
List<Setmeal> records = pageInfo.getRecords();
List<SetmealDto>setmealDtoList= records.stream().map((item)->{
SetmealDto setmealDto = new SetmealDto();
//对象拷贝
BeanUtils.copyProperties(item,setmealDto);
//分类id
Long categoryId = item.getCategoryId();
//根据分类id，查询分类对象
Category category = categoryService.getById(categoryId);
if (category!=null){
String categoryName = category.getName();
setmealDto.setCategoryName(categoryName);
}
return setmealDto;
}).collect(Collectors.toList());
setmealDtoPage.setRecords(setmealDtoList);
return R.success(setmealDtoPage);
}