---
# System prepended metadata

title: 第七週
tags: [Vue 直播班 - 2023 冬季班]

---

# 第七週

課程範例版型：

- [https://hexschool.github.io/js-training-layout-1/](https://hexschool.github.io/js-training-layout-1/)
- [https://hexschool.github.io/js-training-layout-2/](https://hexschool.github.io/js-training-layout-2/)


### 本週提醒

- <a href="https://rpg.hexschool.com/training/39/task?type=detail&id=376" target="_top">第七週主線任務：後台開發</a>
- 作業範例：https://hexschool.github.io/live-vue3-training-chapter-2023/
- 心得牆開放
    - [心得牆素材圖](https://hackmd.io/UGWuY24QRLWjU2s0LvvAAQ?view)
- 線上助教服務
![](https://i.imgur.com/BhfA7hV.png)



### 上一週的團隊作業討論：

https://casper-wang.notion.site/7555488641404d03a1b697dae6e5b2d5?pvs=4
https://docs.google.com/spreadsheets/d/1mz3yb8wwM316llf4w9PoDlmeb0iMmuVxBZRmf_MzNvo/edit#gid=1397510807


### 最終作業 / 專題流程說明

**基本使用者故事：**

用戶：

- 用戶可以進入首頁，了解該產品的特色
- 用戶可以查看產品列表
    - 用戶可以透過分類過濾產品
    - 用戶可以搜尋產品
    - 用戶可以在產品列表加入購物車
    - 可以查看更詳細的內容
- 用戶可以進入商品細節頁面
    - 可以得知商品的細節描述
    - 可以選擇不同數量，並加入購物車
    - 可以加入收藏
    - 可以查看相似的品項
- 用戶可以加入購物車
    - 購物車的商品，可以在任何頁面得知數量
    - 重複加入相同的商品，購物車的同商品數量會增加 1
    - 用戶可以重新調整購物車商品數量
    - 用戶可以將購物車的商品品項移除
    - 用戶可以透過優惠券折扣商品
- 用戶可以結帳
    - 用戶可以將加入購物車的商品結帳
    - 結帳表單會提供最基本的驗證
    - 結帳完成，用戶可以查看付款相關資訊

管理者：

- 管理者可以登入後台
- 管理者可以新增、編輯、刪除商品
- 管理者可以新增優惠券
    - 管理者可以設定優惠券到期時間
- 管理者可以管理訂單
    - 管理者無法新增訂單
    - 管理者可以調整訂單的狀態

**需要製作的頁面**

- 前台
    - 基本頁面：
        - 首頁（不含 Navbar 至少包含五個 section）
        - 產品列表
        - 單一產品細節頁面
        - 購物車
        - 表單填寫
        - 付款完成
    - 可延伸功能或畫面：
        - 關於/品牌/產品介紹…：[https://hoongyuu.github.io/Cheeto-s-Wine/#/intro](https://hoongyuu.github.io/Cheeto-s-Wine/#/intro)
        - 部落格/文章：[https://bear-luo.github.io/OpenseasonWeb/#/openseason_home#newslist](https://bear-luo.github.io/OpenseasonWeb/#/openseason_home#newslist)
        - 分類：[https://vvvvvvii.github.io/tasteof/dist/#/product_list?search=城市導覽](https://vvvvvvii.github.io/tasteof/dist/#/product_list?search=%E5%9F%8E%E5%B8%82%E5%B0%8E%E8%A6%BD)
        - 延伸產品：[https://char849.github.io/vue3-week8a-main/#/course](https://char849.github.io/vue3-week8a-main/#/course)
        - 搜尋：[https://kevinhes.github.io/finalworkvue2022/#/](https://kevinhes.github.io/finalworkvue2022/#/)
        - 優惠券發放活動：[https://mickey116.github.io/PuzzleVue/#/getcoupon](https://mickey116.github.io/PuzzleVue/#/getcoupon)
        - 我的最愛：[https://jordan-ttc-design.github.io/fine-job/#/](https://jordan-ttc-design.github.io/fine-job/#/)
        - 一堆動態效果：[https://huan5678.github.io/chill-bar/#/](https://huan5678.github.io/chill-bar/#/)
        - 可愛的插畫：[https://22495521.github.io/BigGo/#/FrontPage](https://22495521.github.io/BigGo/#/FrontPage)
        - 視差滾動：[https://potatoleee.github.io/iiincookie-vue/#/](https://potatoleee.github.io/iiincookie-vue/#/)
- 後台（第七週作業，可以與第八週作業合併審合）

**需要達到的條件：**

1. 視為一個正式運行的網站
2. 不能有假字、假圖
3. 所有連結均需要能夠正確運作
4. 符合基本的使用者體驗

### 設計概念分享

[https://www.figma.com/proto/0oZaYFoT6iyclwj1heDrWt/202302---Vue-%E7%9B%B4%E6%92%AD%E7%8F%AD-%E8%A8%AD%E8%A8%88%E6%95%99%E6%9D%90?page-id=0%3A1&node-id=1%3A4&viewport=936%2C249%2C0.75&scaling=scale-down](https://www.figma.com/proto/0oZaYFoT6iyclwj1heDrWt/202302---Vue-%E7%9B%B4%E6%92%AD%E7%8F%AD-%E8%A8%AD%E8%A8%88%E6%95%99%E6%9D%90?page-id=0%3A1&node-id=1%3A4&viewport=936%2C249%2C0.75&scaling=scale-down)

### 頁面製作哪些需要注意呢？

- 穩定為主（單色）
- 整齊
- 盡可能符合使用者體驗


### 其他參考資源

1. 資訊傳達 → 引導用戶看到他想看的東西
    - 每個網站都有一個最重要的目標，參考案例：
        1. [https://aws.amazon.com/tw/](https://aws.amazon.com/tw/)
        2. [https://evernote.com/intl/zh-tw](https://evernote.com/intl/zh-tw)
        3. [https://www.shopify.com/tw](https://www.shopify.com/tw)
2. 美觀 → 讓用戶符合期待
    - 你的網站想要呈現如何的風格？
        1. 很貴：[https://tw.louisvuitton.com/zht-tw/homepage](https://tw.louisvuitton.com/zht-tw/homepage)
        2. 搶便宜：[https://i3fresh.tw/](https://i3fresh.tw/)
        3. 新創、自然：[https://www.greenvines.com.tw/](https://www.greenvines.com.tw/)
    - 在符合資訊傳達概念下，如何有更美觀的樣式
        1. 色彩單純、文字運用、格線系統
        2. 最重要的是排整齊…
3. 使用者體驗 → 讓用戶可以順利達到他的目標
    - 關於使用者體驗的表單設計
        1. [https://github.com/Wcc723/Google-UX-Playbook-for-Retail-translate/blob/master/zh-tw/section_8.md](https://github.com/Wcc723/Google-UX-Playbook-for-Retail-translate/blob/master/zh-tw/section_8.md)
    - Google Accessibility 說明文件
        1. [https://web.dev/learn/accessibility/](https://web.dev/learn/accessibility/)
        2. 案例 - 顏色對比度：[https://web.dev/learn/accessibility/color-contrast/](https://web.dev/learn/accessibility/color-contrast/)
4. 特效教學
    - 如何在課程作品中加入輪播、SweetAlert 等各種特效：https://courses.hexschool.com/courses/vue-2021211/lectures/49940037

## 作業說明

- 本週作業：
    - <a href="https://rpg.hexschool.com/training/39/task?type=detail&id=376" target="_top">第七週主線任務：後台開發</a>
    - 作業範例：https://hexschool.github.io/live-vue3-training-chapter-2023/
- 課後測驗：
    - 測驗題：https://casper-wang.notion.site/fc7861d7c63f42099f0f6b0e76b5128c?pvs=4
    - 回答位置：https://docs.google.com/spreadsheets/d/1mz3yb8wwM316llf4w9PoDlmeb0iMmuVxBZRmf_MzNvo/edit#gid=895249498
- 團隊任務： 
    - https://rpg.hexschool.com/training/39/show?embedhm=57sdvv8YR7yRGE29nLh-Ng