---
tags: JS 5組 - 2022 秋季 JS直播班, 最終關卡挑戰 Day4 - 後台(訂單列表 - 功能整合)
title: 最終關卡挑戰 Day4 - 後台(訂單列表 - 功能整合)
---

###### tags: `JS 5組 - 2022 秋季 JS直播班` 、` 最終關卡挑戰 Day4 - 後台(訂單列表 - 功能整合)`

###### *date: 2022 / 11/ 23*

# Day4 - 後台(訂單列表 - 功能整合)

昨天我們已經完成前台頁面的 **API資料串接** 與 **功能整合**，今天將進入到後台開發的訂單列表 API設計。

### 今日挑戰目標: 後台(訂單列表 - 功能整合)

### 使用 API

### 確認 API 路徑

### 訂單列表 - 功能整合任務
- 取得訂單列表
- 刪除單筆訂單
- 刪除全部訂單
- 修改訂單狀態
- 處理日期格式 (timestamp)

### 後台開發資源整理
- [後台版型](https://codepen.io/hexschool/pen/WNJXgrR?editors=1010)

---

### shinyhung#3825

### WeiJ#7376

後台的功能上和前台基本一模一樣，特別的部份在訂單 API 回傳的時間為時間戳(timestamp)，關於時間戳轉換為日期字串
我拉出來而外寫一個 date.js，好處是以後有在遇到時間相關的都可以在寫到這個 js 來
更可以拿到別的專案當做一個套件使用

/* 
    @param {int} timestamp
    @return {string} 2020-01-01
*/
export const timestampToTime = timestamp => {
    const date = new Date(timestamp * 1000)
    const Y = date.getFullYear() + '-';
    const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    const D = date.getDate() + ' ';
    return Y + M + D;
}

### charlottelee849#0366
待辦事項
- 前台優化

- [x] 加入 Loding 效果
- 後台

- [x] c3圖表
- [x] 日期格式 (時間戳)
- [x] 刪除訂單
- [x] 狀態修改
- [x] 加入 Loding 效果

**前台知識點**
加入 lading... 效果，在axios之前加入讓 loading 顯示

  document.getElementById("preloder").style.display = "block";
  axios....

.catch 之後加入 finally => 讓 loading 消失 ( catch 沒用到可以省略 )

.finally(() => {   
      document.getElementById("preloder").style.display = "none";
 });

### jimmyFang#9575
**任務清單**
- 後台開發
- [x] 取得訂單列表
- [x] 刪除單筆訂單
- [x] 刪除全部訂單
- [x] 修改訂單狀態
- [x] 處理日期格式 (timestamp)
- 整理專案結構
- [x] 複習 [JS ESM 開發核心課程](https://rpg.hexschool.com/training/32/show?embedhm=wHOMdhGtQRu7IxOM8FwQIA)
- [x] 使用 JS ESM 整合 通用 JS 與 [API 統一管理](https://github.com/WeiJ0/Hexscholl-JSLive-Final/blob/main/helper/api.js)(參考 WeiJ 程式)

目前進度: [demo](https://jimmyfang-ai.github.io/js-finalWork-wowoRoom/#orderInfo)

**知識點分享:**

訂單資料在跑迴圈時並在付款按鈕，直接使用 **條件 (三元) 運算子** ， **order.isPaid ? '已付款' : '未付款'**，就可依照資料的內的付款狀態去顯示相對應的字串。

<iframe height="300" style="width: 100%;" scrolling="no" title="條件 (三元) 運算子" src="https://codepen.io/pohxiqqo/embed/LYrmEdw?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/pohxiqqo/pen/LYrmEdw">
條件 (三元) 運算子</a> by 方振吉 (<a href="https://codepen.io/pohxiqqo">@pohxiqqo</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### Judy Wei#6103

### Mia小福#4473

### Ringo#7583

### yawun#0042
- 後台開發
- [x] 取得訂單列表
- [x] 刪除單筆訂單
- [x] 刪除全部訂單
- [x] 修改訂單狀態
- [x] 處理日期格式 (timestamp)
- 整理專案結構
- [x] 使用 JS ESM 整合 JS 檔案架構(整合API和通用JS、未整合外部函式)
- [x] API統一管理(參考WeiJ程式)
- 知識點分享

### 法希娜#3206
->>完成：
一般商品顯示
購物車顯示+正確總額
購物車單筆刪除
全部刪除
加入購物車
送出訂單

->>待完成：輸入驗證/ 送出訂單後清空購物車

＊＊本次新增知識點：

（一）抓取擁有同樣class但各自不同id的元素，求個別click事件的該id

const addCardBtn = document.querySelectorAll('.addCardBtn');
    addCardBtn.forEach((btn) =>{
        btn.addEventListener('click', (e) => {
        const idVal = e.target.getAttribute('id');
    })
})