【Day - 27】建立餐廳後台點餐應用03：實作餐點管理功能 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 27

Mobile Development

Spring Boot+Android 30天實戰開發系列第 27 篇

【Day - 27】建立餐廳後台點餐應用03：實作餐點管理功能

15th鐵人賽 spring boot thymeleaf

ian_liu

團隊nutc_imac_FewFew

2023-10-07 17:04:19

1058 瀏覽

分享至

在這一篇文章中，我們將實作餐點管理功能。這是一個重要的功能，它讓我們能夠輕鬆管理餐廳菜單，包括餐點的新增、修改、查詢和刪除。讓我們一起開始吧！

功能概述

我們要實作的餐點管理功能包括以下幾點：

提供餐點編輯器，可修改價格、名稱、分類等。
提供餐點分類。
提供基本餐點的新增、修改、查詢、刪除功能。

實作API

我們將實作以下API端點：

獲取所有餐點 [GET] - /dishes
創建餐點 [POST] - /dishes/create
根據餐點ID進行刪除 [POST] - /dishes/delete/{dishId}
根據餐點ID進行編輯 [POST] - /dishes/edit/{dishId}

Controller層建立

首先，我們將建立Controller層，用於處理Thymeleaf網頁和處理API請求。以下是相關的程式碼：

@Controller
@RequestMapping("/dishes")
@RequiredArgsConstructor
@Slf4j
public class DishController {
    private final DishService dishService;

    // 獲取所有餐點
    @GetMapping
    public String getAllDishes(Model model) {
        List<DishEntity> dishes = dishService.getAllDishes();
        model.addAttribute("dishes", dishes);
        return "dishes";
    }

    // 新增餐點表單
    @GetMapping("/create")
    public String createDishForm(Model model) {
        model.addAttribute("dish", new DishEntity());
        model.addAttribute("dishTypes", dishService.getAllDishTypes());
        return "create-dish";
    }

    // 執行新增餐點
    @PostMapping("/create")
    public String createDish(@ModelAttribute("dish") DishEntity dish) {
        DishTypeEntity dishType = dishService.getDishTypeByName(dish.getDishType().getName());
        if (dishType != null) {
            dish.setDishType(dishType);
        } else {
            dishType = new DishTypeEntity();
            dishType.setName(dish.getDishType().getName());
            dishType = dishService.createDishType(dishType);
            dish.setDishType(dishType);
        }
        dishService.createDish(dish);
        return "redirect:/dishes";
    }

    // 編輯餐點表單
    @GetMapping("/edit/{dishId}")
    public String editDishForm(@PathVariable Long dishId, Model model) {
        model.addAttribute("dish", dishService.getDishById(dishId));
        model.addAttribute("dishTypes", dishService.getAllDishTypes());
        return "edit-dish";
    }

    // 執行編輯餐點
    @PostMapping("/edit/{dishId}")
    public String editDish(@PathVariable Long dishId, @ModelAttribute("dish") DishEntity updatedDish) {
        dishService.updateDish(dishId, updatedDish);
        return "redirect:/dishes";
    }

    @PostMapping("/delete/{dishId}")
    public String deleteDish(@PathVariable Long dishId) {
        dishService.deleteDish(dishId);
        return "redirect:/dishes";
    }
}

Repository層：建立餐點和餐點種類

在Repository層，我們將建立用於餐點和餐點種類的Repository接口。我們使用Spring Data JPA來簡化資料庫操作，因此這些接口只需繼承JpaRepository即可，無需編寫額外的程式碼。

@Repository
public interface DishRepository extends JpaRepository<DishEntity, Long> {
    // 這裡不用寫程式碼，只要將DishRepository繼承JpaRepository就可有基本的資料庫新增讀寫功能
}

@Repository
public interface DishTypeRepository extends JpaRepository<DishTypeEntity, Long> {
    Optional<DishTypeEntity> findByName(String name);
}

View層：餐點管理頁面

最後，我們將建立Thymeleaf模板來呈現餐點管理頁面。這包括新增餐點頁面、編輯餐點頁面和餐點管理總覽頁面。

新增餐點頁面

以下是新增餐點的HTML模板，它包含一個表單，用於輸入餐點的相關資訊：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>Create Dish</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h1>新增餐點</h1>
  <form action="/dishes/create" method="post" th:object="${dish}">
    <div class="form-group">
      <label>Type:</label>
      <input type="text" class="form-control" list="dishTypeList" th:field="*{dishType.name}" required>
      <datalist id="dishTypeList">
        <option th:each="dishType : ${dishTypes}" th:value="${dishType.name}"></option>
      </datalist>
    </div>

    <div class="form-group">
      <label for="name">Name:</label>
      <input type="text" class="form-control" id="name" name="name" th:field="*{name}" required />
    </div>
    <div class="form-group">
      <label for="price">Price:</label>
      <input type="number" class="form-control" id="price" name="price" th:field="*{price}" required />
    </div>
    <div class="form-group">
      <label for="description">Description:</label>
      <textarea class="form-control" id="description" name="description" th:field="*{description}"></textarea>
    </div>

    <button type="submit" class="btn btn-primary">Create</button>
  </form>
</div>
</body>

編輯餐點頁面
這是編輯餐點的HTML模板，它與新增餐點的頁面類似，但包含了餐點的當前資訊以供編輯：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>Edit Dish</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body class="container">
<h1>編輯餐點</h1>
<form th:action="'/dishes/edit/' + ${dishId}" method="post" th:object="${dish}">
  <div class="form-group">
    <label for="typeId">Type:</label>
    <input type="text" class="form-control" list="dishTypeList" id="typeId" th:field="*{dishType.name}" required>
    <datalist id="dishTypeList">
      <option th:each="dishType : ${dishTypes}" th:value="${dishType.name}"></option>
    </datalist>
  </div>
  <div class="form-group">
    <label for="name">Name:</label>
    <input class="form-control" type="text" id="name" name="name" th:field="*{name}" required />
  </div>
  <div class="form-group">
    <label for="description">Description:</label>
    <textarea class="form-control" id="description" name="description" th:field="*{description}"></textarea>
  </div>
  <div class="form-group">
    <label for="price">Price:</label>
    <input class="form-control" type="number" id="price" name="price" th:field="*{price}" required />
  </div>
  <div class="form-group">
    <button class="btn btn-primary" type="submit">Save</button>
  </div>
</form>
</body>
</html>

餐點管理總覽頁面

最後，這是餐點管理的總覽頁面，它用於顯示所有餐點的列表：

<!DOCTYPE html>
<html lang="zh-tw" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Dishes</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>
<body>
<div class="container">

    <div th:insert="~{navbar}"></div>

    <table class="table">
        <thead>
        <tr>
            <th>Index</th>
            <th>Name</th>
            <th>Description</th>
            <th>Price</th>
            <th>Type</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody>

        <tr th:each="dish,iterStat : ${dishes}">
            <td th:text="${iterStat.index+1}"></td>
            <td th:text="${dish.name}"></td>
            <td th:text="${dish.description}"></td>
            <td th:text="'$'+${dish.price}"></td>
            <td th:text="${dish.dishType.name}"></td>
            <td>
                <a class="btn btn-info" th:href="@{/dishes/edit/{dishId}(dishId=${dish.id})}"><i class="bi bi-pencil-square"></i></a>
                <a class="btn btn-danger" th:href="@{/dishes/delete/{dishId}(dishId=${dish.id})}"><i class="bi bi-trash3"></i></a>
            </td>
        </tr>
        </tbody>
    </table>
    <a class="btn btn-success" href="/dishes/create">新增餐點</a>
</div>
</body>
</html>