菜品分页查询

[TOC]

简要描述

• 菜品分页查询

前端页面和服务端交互过程

• 页面(backend/page/food/list.html)发送ajax请求，将分页查询参数(page、pageSize、name)提交到服务端，获取分页数据
• 页面发送请求，请求服务端进行图片下载，用于页面图片展示
• 服务端Controller接收页面提交的数据并调用Service查询数据
• Service调用Mapper操作数据库，查询分页数据
• Controller将查询到的分页数据响应给页面
• 页面接收到分页数据并通过ElementUI的Table组件展示到页面上

接口调用

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();
},

请求URL

• [context-path]/dish/page

请求方式

• get

API接口

const getDishPage = (params) => {
  return $axios({
    url: '/dish/page',
    method: 'get',
    params
  })
}

参数

参数名	必选	类型	说明
page	是	int	页数
pageSize	是	int	页面大小
name	否	varchar(64)	菜品名称模糊查询

返回示例

code: 1
data: {records: [,…], total: 46, size: 10, current: 1, orders: [], optimizeCountSql: true, searchCount: true,…}
map: {}
msg: null

返回参数说明

参数名	类型	说明
code	int	返回码： 1：成功 0或其它：失败
data	object	返回数据
map	map	动态数据
msg	string	错误信息

备注

• data 有两种返回值

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;
}

后端接口请求参数

• Spring Boot整合MyBatis实现分页

后端代码

@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);

}