基于 Spring Boot 瑞吉外卖系统开发（六）

菜品列表

在系统管理端首页，单击左侧菜单栏中的“菜品管理”，会在右侧打开菜品管理页面。

请求URL/dish/page，请求方法GET,请求参数page，pageSize。

该菜品列表展示字段涉及菜品和分类名称数据，菜品（dish表）、分类（category表）来自不同表，所以这里打算使用自定义SQL两表联查。

创建DishDto

因为Dish字段不够用，重新写一个数据传输对象（Dto）(Data Transfer Object)。
创建dto包，在com.itheima.reggie.dto创建DishDto类，类继承Dish字段，并且添加CategoryName属性。

@Data
public class DishDto extends Dish {private String categoryName;
}

编写SQL

实现dish和category两表联查，这里采用左连接查询方式。可以先在navicat尝试一下SQL是否正确。

select d.*,c.name as category_name from dish d LEFT JOIN category c ON d.category_id=c.id

创建自定义SQL配置文件

在resources目录下创建mapper目录，然后在mapper目录下创建DishMapper.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.itheima.reggie.mapper.DishMapper"><select id="selectDishDtoPage" resultType="com.itheima.reggie.dto.DishDto">select d.*,c.name as category_name from dish dLEFT JOIN category c ON d.category_id=c.id</select></mapper>

DishMapper添加执行SQL语句的方法

根据上面id属性值添加方法名，selectDishDtoPage方法就会执行xml文件中的SQL语句，返回List，page参数是自动分页的参数。

@Mapper
public interface DishMapper extends BaseMapper<Dish> {public Page<DishDto> selectDishDtoPage(Page page);}

DishService添加selectDishDtoPage方法

直接把DishMapper中的方法复制过来就可以。

public interface DishService extends IService<Dish> {public Page<DishDto> selectDishDtoPage(Page page);}

DishServiceImpl添加实现方法

注入DishMapper 调用selectDishDtoPage方法执行SQL语句。

@Service
public class DishServiceImpl extends ServiceImpl<DishMapper, Dish> implements DishService {@Autowiredprivate DishMapper dishMapper;@Overridepublic Page<DishDto> selectDishDtoPage(Page page) {return dishMapper.selectDishDtoPage(page);}}

DishController 编写前端请求方法

前端请求URL/dish/page，请求方法GET,请求参数page，pageSize。
page表示第几页，pageSize表示每一页的记录数。

@RestController
@RequestMapping("/dish")
public class DishController {@Autowiredprivate DishService dishService;@GetMapping("/page")public R<Page<DishDto>> list(int page, int pageSize){Page<DishDto> pageInfo = new Page<>(page,pageSize);dishService.selectDishDtoPage(pageInfo);return R.success(pageInfo);}}

运行测试

点击菜品管理可以展示出菜品和分类的数据，但是图片显示不出来。

静态资源映射

把img存放在固定目录中记住路径。

在com.itheima.reggie.config.WebMvcConfig文件中配置静态资源映射，addResourceHandlers方法中添加图片映射代码如下：

registry.addResourceHandler("/images/**").addResourceLocations("file:D:/file/img/");

配置后重启项目，图片访问路径为
http://127.0.0.1:8080/images/0a3b3288-3446-4420-bbff-f263d0c02d8e.jpg

修改前端HTML中的图片路径

修改backend/page/food/list.html文件中的代码，/common/download?name=修改为/images/

运行测试