2025-06-28 Line 訂單系統-階段D

發表於 2025-11-12 分類於 OneDayOneNote 閱讀次數：

2025-06-28 Line 訂單系統-階段D

2025-06-28 Line 訂單系統-階段D

🅳 階段 D：Vue3 管理後台

🎯 目標

建立管理者頁面，可新增商品、查看訂單。

🔧 步驟

1️⃣ 安裝 Element Plus

1 2	cd frontend npm install element-plus

2️⃣ 在 `src/main.js` 加入

1
2
3

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

3️⃣ 建立頁面（src/views/Products.vue）

<template>
  <div>
    <h2>商品管理</h2>
    <el-table :data="products">
      <el-table-column prop="name" label="名稱" />
      <el-table-column prop="price" label="價格" />
    </el-table>
    <el-button @click="loadProducts">重新整理</el-button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const products = ref([])
const loadProducts = async () => {
  const res = await axios.get('http://localhost:3000/api/products')
  products.value = res.data
}

onMounted(loadProducts)
</script>

🧪 Checkpoint

✅ 管理後台能顯示商品資料
✅ 新增商品後可即時顯示

💡 延伸

增加登入驗證（簡單 JWT）
增加訂單頁面

0%