iT邦幫忙

2023 iThome 鐵人賽

DAY 12
0
Vue.js

試試用Vue建立網站吧系列 第 12

Day12-試試Vue3-使用者故事(會員主頁)

  • 分享至 

  • xImage
  •  

這篇簡單說明使用者故事(以會員角度)。

假定華特義式餐廳為一餐飲集團,旗下有多個義式料理相關的餐飲品牌。為提供集團會員更多便利和互動性,會員主頁除首頁、登出外提供「口袋餐廳」、「餐廳實評」兩項功能。說明請見以下小節。

會員主頁

(1)會員主頁
會員登入後主頁會顯示歡迎訊息。畫面下方可再增加主頁功能說明等文字,或放置更多餐飲集團相關圖片來排版。在此就不示範了。

Day8-試試Vue3-會員登入後轉跳主頁」有程式碼可參考。

(2)口袋餐廳
透過該集團的選單供會員挑選出喜愛的餐飲品牌。選單會列出品牌的合適受眾、品牌名稱、地址、地圖(試看看能不能做到/images/emoticon/emoticon16.gif)。選取後的結果會羅列在一張表上。

這功能為學習對 API 資料做撈取、篩選與排序。

(3)餐廳實評
依據「口袋餐廳」選出的資料列表,增加餐廳文字評論的功能。提供會員紀錄餐飲品牌用餐體驗,此評論為私密文章,其他會員無法瀏覽。藉此幫助會員下次用餐選擇時的參考依據。

這功能為學習對 API 資料做撈取、篩選、新增與編輯。

(4)登出
選擇登出後會將頁面導至會員登入頁面。

Day8-試試Vue3-會員登入後轉跳主頁」有程式碼可參考。


上一篇
Day11-試試Vue3-歡迎訊息顯示會員名(localStorage)
下一篇
Day13-試試Vue3-建立餐廳API
系列文
試試用Vue建立網站吧30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言