iT邦幫忙

2023 iThome 鐵人賽

DAY 27
0
Mobile Development

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

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

  • 分享至 

  • xImage
  •  

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

功能概述

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

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

實作API

我們將實作以下API端點:

  1. 獲取所有餐點 [GET] - /dishes
  2. 創建餐點 [POST] - /dishes/create
  3. 根據餐點ID進行刪除 [POST] - /dishes/delete/{dishId}
  4. 根據餐點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>

小結

在這篇文章中,我們實作了餐點管理功能,讓你能夠輕鬆管理餐廳菜單。我們建立了Controller層來處理頁面和API請求,Repository層來處理資料庫操作,以及Thymeleaf模板來呈現頁面。接下來,在明天的文章中,我們將實作新增訂單和訂單管理功能。敬請期待!


上一篇
【Day - 26】建立餐廳後台點餐應用02:開發環境與專案初始化
下一篇
【Day - 28】建立餐廳後台點餐應用04:實作新增&管理訂單功能
系列文
Spring Boot+Android 30天 實戰開發 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言