做网站的一定要开80或8080端口网站建设介绍ppt
基于 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/
运行测试
