2025-07-13 Line 訂單系統-C 階段 C4 子階段 — LINE 訂單紀錄後端 API 建立

2025-07-13 Line 訂單系統-C 階段 C4 子階段 — LINE 訂單紀錄後端 API 建立

我們現在進入 📘 C4 子階段 — LINE 訂單紀錄後端 API 建立，
這是整個 C 階段的最後一個部分，
完成後你就能在 Vue3 後台 (LineOrders.vue) 看到真實的 LINE 訂單資料。

---

🧩 新增檔案：backend/routes/orders.js

這個 API 將會：

• 提供 /api/orders 路由，查詢所有訂單資料；
• 讓前端（LineOrders.vue）可以取得並顯示；
• 支援「新增訂單」功能（可由 LINE webhook 呼叫）。

---

✅ 範例程式

// backend/routes/orders.js
import express from "express";
import mysql from "mysql2/promise";

const router = express.Router();

// 建立 MySQL 連線池
const pool = mysql.createPool({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME,
});

// ✅ 取得所有訂單
router.get("/orders", async (req, res) => {
  try {
    const [rows] = await pool.query(
      `SELECT o.id, o.user_name, p.name AS product_name, o.quantity, o.status, o.created_at
       FROM orders o
       LEFT JOIN products p ON o.product_id = p.id
       ORDER BY o.created_at DESC`
    );
    res.json(rows);
  } catch (err) {
    console.error("取得訂單錯誤:", err);
    res.status(500).json({ error: "伺服器錯誤" });
  }
});

// ✅ 新增訂單（可由 LINE Webhook 呼叫）
router.post("/orders", async (req, res) => {
  const { user_name, product_id, quantity } = req.body;
  try {
    const [result] = await pool.query(
      `INSERT INTO orders (user_name, product_id, quantity, status, created_at)
       VALUES (?, ?, ?, '新訂單', NOW())`,
      [user_name, product_id, quantity]
    );
    res.json({ success: true, orderId: result.insertId });
  } catch (err) {
    console.error("新增訂單錯誤:", err);
    res.status(500).json({ error: "伺服器錯誤" });
  }
});

export default router;

---

🧱 在 server.js 中整合

請確認你在 backend/server.js 中有這段設定：

import express from "express";
import cors from "cors";
import dotenv from "dotenv";
import lineWebhook from "./routes/lineWebhook.js";
import ordersRoute from "./routes/orders.js";

dotenv.config();

const app = express();
app.use(cors());
app.use(express.json());

app.use("/api", lineWebhook);
app.use("/api", ordersRoute);

app.get("/", (req, res) => {
  res.send("LINE 訂單系統後端運行中 🚀");
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`✅ Server 運行於 http://localhost:${PORT}`));

---

🗂️ 資料庫結構確認

確保你的 db_init.sql 至少包含以下三個表格：

CREATE TABLE products (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100),
  description TEXT,
  price DECIMAL(10,2)
);

CREATE TABLE orders (
  id INT AUTO_INCREMENT PRIMARY KEY,
  user_name VARCHAR(100),
  product_id INT,
  quantity INT DEFAULT 1,
  status VARCHAR(50) DEFAULT '新訂單',
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (product_id) REFERENCES products(id)
);

---

🔄 整體流程示意

階段	動作	系統反應
1️⃣	使用者在 LINE 輸入：「商品 1」	Bot 回傳商品資訊
2️⃣	使用者輸入：「購買 1」	webhook 觸發 /api/orders → 新增訂單
3️⃣	後端寫入 MySQL → orders 表	儲存訂單紀錄
4️⃣	Vue3 後台 LineOrders.vue 呼叫 /api/orders	顯示訂單清單（自動更新）

---

🚀 本階段完成後你將擁有

✅ LINE 訊息事件接收與回覆（webhook）
✅ 自動新增訂單紀錄至 MySQL
✅ 後台 Vue3 頁面可查詢訂單
✅ Node.js API 結構清晰，方便擴充

---

是否要我幫你繼續：
👉 整合 webhook 與 /orders API，讓「使用者輸入『購買 1』時自動建立訂單」？
（這會讓整個 LINE ↔ 後端 ↔ 資料庫 ↔ Vue 前端流程完全打通）