基于 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属性。

java 复制代码

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

编写SQL

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

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 复制代码

<?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 d
            LEFT JOIN category c ON d.category_id=c.id
    </select>

</mapper>

DishMapper添加执行SQL语句的方法

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

java 复制代码

@Mapper
public interface DishMapper extends BaseMapper<Dish> {

    public Page<DishDto> selectDishDtoPage(Page page);

}

DishService添加selectDishDtoPage方法

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

java 复制代码

public interface DishService extends IService<Dish> {

    public Page<DishDto> selectDishDtoPage(Page page);

}

DishServiceImpl添加实现方法

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

java 复制代码

@Service
public class DishServiceImpl extends ServiceImpl<DishMapper, Dish> 
	implements DishService {

    @Autowired
    private DishMapper dishMapper;
    @Override
    public Page<DishDto> selectDishDtoPage(Page page) {
        return dishMapper.selectDishDtoPage(page);
    }

}

DishController 编写前端请求方法

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

page表示第几页，pageSize表示每一页的记录数。

java 复制代码

@RestController
@RequestMapping("/dish")
public class DishController {
    @Autowired
    private 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方法中添加图片映射代码如下：

java 复制代码

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/