菜品分页查询
<p>[TOC]</p>
<h5>简要描述</h5>
<ul>
<li>菜品分页查询</li>
</ul>
<h5>前端页面和服务端交互过程</h5>
<ul>
<li>页面(backend/page/food/list.html)发送ajax请求，将分页查询参数(page、pageSize、name)提交到服务端，获取分页数据</li>
<li>页面发送请求，请求服务端进行图片下载，用于页面图片展示</li>
<li>服务端Controller接收页面提交的数据并调用Service查询数据</li>
<li>Service调用Mapper操作数据库，查询分页数据</li>
<li>Controller将查询到的分页数据响应给页面</li>
<li>页面接收到分页数据并通过ElementUI的Table组件展示到页面上</li>
</ul>
<h5>接口调用</h5>
<pre><code>async init () {
const params = {
page: this.page,
pageSize: this.pageSize,
name: this.input ? this.input : undefined
}
await getDishPage(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();
},</code></pre>
<h5>请求URL</h5>
<ul>
<li><code>[context-path]/dish/page</code></li>
</ul>
<h5>请求方式</h5>
<ul>
<li>get </li>
</ul>
<h5>API接口</h5>
<pre><code>const getDishPage = (params) => {
return $axios({
url: '/dish/page',
method: 'get',
params
})
}
</code></pre>
<h5>参数</h5>
<table>
<thead>
<tr>
<th style="text-align: left;">参数名</th>
<th style="text-align: left;">必选</th>
<th style="text-align: left;">类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">page</td>
<td style="text-align: left;">是</td>
<td style="text-align: left;">int</td>
<td>页数</td>
</tr>
<tr>
<td style="text-align: left;">pageSize</td>
<td style="text-align: left;">是</td>
<td style="text-align: left;">int</td>
<td>页面大小</td>
</tr>
<tr>
<td style="text-align: left;">name</td>
<td style="text-align: left;">否</td>
<td style="text-align: left;">varchar(64)</td>
<td>菜品名称模糊查询</td>
</tr>
</tbody>
</table>
<h5>返回示例</h5>
<pre><code>code: 1
data: {records: [,…], total: 46, size: 10, current: 1, orders: [], optimizeCountSql: true, searchCount: true,…}
map: {}
msg: null
</code></pre>
<h5>返回参数说明</h5>
<table>
<thead>
<tr>
<th style="text-align: left;">参数名</th>
<th style="text-align: left;">类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">code</td>
<td style="text-align: left;">int</td>
<td>返回码： 1：成功 0或其它：失败</td>
</tr>
<tr>
<td style="text-align: left;">data</td>
<td style="text-align: left;">object</td>
<td>返回数据</td>
</tr>
<tr>
<td style="text-align: left;">map</td>
<td style="text-align: left;">map</td>
<td>动态数据</td>
</tr>
<tr>
<td style="text-align: left;">msg</td>
<td style="text-align: left;">string</td>
<td>错误信息</td>
</tr>
</tbody>
</table>
<h5>备注</h5>
<ul>
<li>data 有两种返回值</li>
</ul>
<pre><code>public static <T> R<T> success(T object) {
R<T> r = new R<T>();
r.data = object;
r.code = 1;
return r;
}
public static <T> R<T> error(String msg) {
R r = new R();
r.msg = msg;
r.code = 0;
return r;
}</code></pre>
<h5>后端接口请求参数</h5>
<ul>
<li>Spring Boot整合MyBatis实现分页</li>
</ul>
<h5>后端代码</h5>
<pre><code>@GetMapping("/page")
public R<Page> page(int page,int pageSize,String name){
Page<Dish> page1 = new Page<>(page,pageSize);
Page<DishDto> page2 = new Page<>();
LambdaQueryWrapper<Dish> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.like(name!=null,Dish::getName,name);
queryWrapper.orderByAsc(Dish::getUpdateTime);
dishService.page(page1,queryWrapper);
BeanUtils.copyProperties(page1,page2,"records");
List<Dish> records = page1.getRecords();
List<DishDto> list = records.stream().map(item -> {
DishDto dishDto = new DishDto();
BeanUtils.copyProperties(item,dishDto);
Long categoryId = item.getCategoryId();
Category category = categoryService.getById(categoryId);
if (category != null) {
String categoryName = category.getName();
dishDto.setCategoryName(categoryName);
}
return dishDto;
}).collect(Collectors.toList());
page2.setRecords(list);
return R.success(page2);
}</code></pre>