基于 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/

運行測試