Movie Galaxy 影評網 (團隊)

GitHub  Demo

一、使用技術：

#Vue  #Vite  #Pinia #Sweetalert2  #Bootstrap5  #Sass  #RWD  #JSON Server + JSON Server Auth  #Axios  #VeeValidate.js #vue-easy-lightbox(燈箱套件)  #Swiper(輪播套件)   #ckeditor5(文字編輯器套件)

二、專案背景：

發想靈感源於自己也是電影愛好者，發現目前市面上似乎沒有完整的影評網能具備搜尋電影及無雷影評的網站，有時想尋找影評卻不小心遭到劇透，因此便著手製作該專案。

該專案目的在於讓需求不同的使用者皆能獲得良好體驗，若屬於尚未觀影而不想受劇透困擾的用戶，可至無雷影評區查看自身有興趣的電影影評；而已觀影的用戶則可直接到所有影評討論區暢所欲言。

另外也可使用關鍵字、類別搜尋功能尋找電影資訊。

三、網站功能：

前台(未登入)：

• 查看熱門電影
• 以關鍵字、類別搜尋電影
• 查看電影簡介
• 可選擇所有影評/無雷影評查看

前台(已登入)：

• 可發布影評
• 可進入會員專區查看資訊及曾發布影評

後台：

• 帳戶管理
• 電影管理
• 影評管理

四、網站介紹：

【概要】

該專案以 Vue + Vite 建置，使用 Pinia 進行狀態管理

資料部分則使用 Axios 串接，以JSON Server + JSON Server Auth 套件模擬後端，製作註冊及登入功能，並將 JSON Server 部署於 Render

【個人負責部分】

該專案中，我負責的部分為：首頁、關鍵字及類別搜尋、會員註冊及登入、電影介紹頁面、發布影評、後台管理功能

另外，於開發過程中，我額外負責團隊中 PM 角色，與設計師溝通頁面設計，並建立 notion 模板進行專案進度、時程控管，以及團隊 gitHub PR 審核

首頁輪播圖使用 Swiper 套件製作，但因為在同頁面使用多個輪播圖，若使用官方文件中 Vue 的寫法，會出現多個輪播圖互相干擾、點擊 navigation 後同時作用的問題，因此將不同 swiper 分別定義，並將 navigation 的nextEl、prevEl 於不同輪播圖中皆使用不同 class 名稱後，便成功解決該問題

搜尋功能部分，可使用兩個以上關鍵字對於電影中/英文名稱進行搜尋，同時也可以點選類別進行搜尋

電影簡介頁面中使用動態路由，進入簡介頁面後會顯示對應資訊，因為電影資料建立時有包含各電影預告片的id，所以用 axios 取得該電影的資料後即可使用 iframe 標籤將對應的 youtube 預告片嵌入

劇照區塊則使用了 vue-easy-lightbox 套件，點擊劇照後可進行圖片旋轉、縮放、拖曳功能

註冊、登入功能使用 JSON Server Auth 套件模擬後端，進行 JWT 驗證

註冊資料輸入則使用 VeeValidate.js 驗證格式

評論區使用 Bootstrap Navs and tabs 區分為所有評論、無雷評論

若未登入即點擊「我要評論」會觸發 sweet alert 警示須先登入

發布影評使用 ckeditor5 套件實現文字編輯器功能

後台管理主要使用 Boostrap Modal 進行各類管理，包括新增、編輯、刪除等