WEEK6 – 小專題完結

發佈留言 / 產業新尖兵 - 全端工程師, 課程與自學

今天是小專題的發表日，扣掉躺平跟思考還有看影片的時間呢，實作的天數大概是有八天，那八天能完成的部分就會比較少一點，所以有很多的功能沒有實作。那先來講一下我的感想好了，首先是我覺得我很努力的想要去克服我這個未知的東西，就是前後端，還有資料庫的部分。那為什麼會想要直接跑到後端去呢？是因為對前端沒有太多的想法，那我就不如去實作邏輯的部分，所以就跑到了後端。而且這是所有的開發工具，全部都是我這個班會學到的工具，所以這次就是先以這個為主。

那首先我很認真地去準備了今天的簡報，然後去把它盡量地弄完整一點，像是有一些可能架構啊、流程啊、系統的互動啊，還有整個發想的這個過程還有這些呈現，然後還有我實作可能做的圖。因為我不太會畫設計稿，所以當我想要什麼功能、什麼畫面的時候，我就會直接用 Canva 直接畫圖，然後去跟 ChatGPT 溝通。所以在今天呢，我很努力地去把這個簡報做完，但是報告只能五分鐘。

前面先聽我同學講的，我覺得他們算蠻厲害的，因為有很多個的前端的呈現都是很好的。我覺得我完全做不到這樣的程度，而且他們應該也是在很短的時間內完成的，當然實作的時間可能是比我長，但是他們做得很完整，所以我聽完前面的部分，就有一點，哇，看起來我還有很多要努力，很多東西要學習。

那總結一下我從上個禮拜三到這個禮拜三，這七天扣掉週末躺平，我剩下的時間基本上是在弄我的專題。因為我使用 ChatGPT 去幫我產生 code，所以debug 非常耗時間，但是我沒有就是從零開始寫，所以我總是覺得很不踏實。所以在這個專題後，我也有為自己訂一些計畫。

然後在小專結束後，我有去跟老師聊聊天，跟他講一下我的想法。那他的建議是就是那就一樣實作，但是先把線稿圖啊那些東西都做出來，然後專注做一個前端的作品。我已經想好我的作品會是《大航海時代》的攻略網站。

那我知道了自己很多不足的地方，但是以現階段來看，還算是可圈可點，還有很多的進步空間。我現在會開始比較專注在前端的基礎，然後嘗試去補強，嘗試去做出一個我的作品。至於我這個小專題能不能變成一個類似 prototype 或是一個作品集呢？我個人是覺得它並沒有完全到可以給人家展示，因為前端的部分沒有很吸睛，後端的邏輯部分也沒有做得太好，功能也不算完整。所以如果它要變成作品集的話，那可能就要再做第二個版本，嘗試去把很多的部分優化，然後把更多功能做出來。

明天開始應該會去思考我的攻略網站要怎麼樣去呈現，然後它可能會需要怎麼樣的效果。我覺得最麻煩的就是這個，因為我完全沒有想法，也完全沒有畫面，也沒有一個比較好參考的網站，所以這讓我非常非常擔心。但後來想想，其實與其在這邊想半天，什麼東西都沒有動，不如直接拿紙跟筆開始畫線稿圖，開始學 Figma，開始學前端的 CSS 跟 HTML，嘗試去做封裝，然後嘗試做出一個我想要的攻略網站。

🚀 已完成的部分

  1. 後端開發：
    • 環境設置：Laravel 安裝和配置、MySQL 資料庫設置。
    • 資料庫設計與遷移：books 資料表建立，包含欄位（標題、作者、描述、圖片等）。
    • Seeder：BooksTableSeeder 填充了三筆書籍資料。
    • CRUD 功能：完成了基本的書籍 CRUD API（在 BooksController 中）。
    • API 測試：確認後端 API 可以正確回傳書籍資料。
  2. 前後端整合：
    • CORS 問題解決：透過 Vite 代理設定，成功解決跨域問題。
    • API 測試：前端可以呼叫後端 API，成功取得書籍資料。
  3. 前端開發：
    • HTML/SCSS/BS5：完成靜態書籍卡片設計。
    • API 資料渲染：前端透過 fetch 成功動態渲染後端 API 回傳的書籍資料。

📍 目前所在階段

  • 前後端整合階段：前端已經可以成功取得和顯示書籍資料，我們已經完成了前後端基本的整合。

🛠️ 接下來的步驟

根據我們的進度，接下來可以考慮以下幾個方向：

  1. 會員認證功能：
    • 登入/註冊：在後端增加會員登入和註冊功能，並在前端加入登入表單。
    • 權限控制：限制某些操作（如新增、編輯、刪除書籍）必須登入後才能執行。
  2. 搜尋與過濾功能：
    • 在前端加入搜尋欄，讓使用者可以根據書籍標題或作者進行搜尋。
    • 在後端 BooksController 增加搜尋的邏輯。
  3. 個人頁面
  4. 寵物商店
  5. 功能完善與優化：
    • 新增書籍：在前端加入表單，讓使用者可以新增書籍。
    • 編輯/刪除書籍：在前端的每張書籍卡片上加入編輯和刪除按鈕，實現完整的 CRUD 功能。
    • 錯誤處理：增加 API 請求失敗時的錯誤提示。

📝 下一個階段規劃討論

根據你的專題目標和現有功能，我們可以考慮以下幾個方向來進行下一步實作：

  1. 🔐 會員登錄與註冊系統
    • 後端：
      • 在 api.php 中加入會員登錄和註冊 API（如 login、register）。
    • 前端：
      • 製作登入和註冊頁面，使用 Fetch 發送登錄請求，並處理回應（如 JWT Token）。
  2. 🔍 搜尋功能
    • 後端：
      • 在 BooksController 中添加搜尋功能的邏輯。
      • API 支援根據標題、作者進行模糊搜尋。
    • 前端：
      • 在頁面上加入搜尋欄位，透過 JavaScript 觸發搜尋並渲染結果。
  3. ⭐ 書籍收藏與評分功能
    • 後端：
      • 加入收藏書籍和評分的 API。
    • 前端：
      • 在書籍卡片上加入按鈕，點擊後發送收藏或評分請求，並更新按鈕狀態。
  4. 🗂️ 分類與篩選
    • 後端：
      • 提供根據書籍分類（如科幻、推理等）的篩選 API。
    • 前端：
      • 在頁面上加入分類按鈕或下拉選單，切換不同分類顯示書籍。
  5. 💬 新增留言與評論系統
    • 後端：
      • 提供新增留言的 API，支援對書籍進行留言。
    • 前端：
      • 在書籍詳細資訊頁面加入留言功能，發送留言請求並顯示留言列表。

🛠️ 接下來的步驟

  1. 🔍 搜尋與過濾功能（明天的目標）
    • 後端：
      • 在 BooksController 中添加搜尋功能的邏輯。
      • 支援根據書籍標題或作者進行模糊搜尋的 API。
    • 前端：
      • 在頁面上加入搜尋欄位，觸發搜尋請求並渲染結果。
      • 使用 JavaScript 將搜尋結果動態更新至書籍列表。

明天的搜尋功能詳細規劃

後端：搜尋 API

  1. 新增路由：
    • 在 api.php 中新增搜尋 API 路由，例如： Route::get('/search', [BooksController::class, 'search']);
  2. 控制器邏輯：
    • 在 BooksController 中新增 search 方法：
      • 根據 title 或 author 參數，進行模糊搜尋。
      • 回傳搜尋結果的 JSON。

前端：搜尋 UI 與邏輯

  1. 新增搜尋欄位：
    • 在書籍列表上方加入搜尋欄位的 HTML。
    • 使用 input 和 button 提供搜尋功能。
  2. 搜尋邏輯：
    • JavaScript 監聽搜尋按鈕點擊或輸入框內容變化。
    • 發送 fetch 請求至後端 /api/search，動態更新頁面內容。

明天的目標

  • 後端完成搜尋 API 的開發。
  • 前端新增搜尋欄並完成搜尋功能。
  • 確保搜尋結果能正確顯示，並進行錯誤處理。

今天卡三小時的地方：

  1. 確保 Laravel API 與前端的 Vite 代理功能正確運作。
  2. 測試 API 路由是否正常，並確保新建的 API 路由能正確回應。
  3. 確認 API 代理設定是否與不同的路徑相符，包括重複的 /api 前綴問題。
  4. 優化 Laravel 快取相關問題，避免因快取導致路由或設定異常。

問題清單：

  1. API 路由未正確回應：
    • 問題描述：新建的 api.php 路由（如 /test）無法正確回應，瀏覽器顯示 404 Not Found。
    • 原因：可能與 Laravel 路由快取、Vite 代理設置錯誤或目標伺服器路徑不一致有關。
  2. 重複的 /api 前綴問題：
    • 問題描述：Vite 代理設定將 /api 重寫為目標伺服器路徑時，出現 /api/api/test 的情況。
    • 原因：Vite 的 rewrite 設定和 Laravel 的 API 自帶前綴存在邏輯衝突。
  3. Laravel 路由快取影響：
    • 問題描述：清除快取後，部分路由才能正確回應；清除前則無法訪問新建的 API。
    • 原因：Laravel 路由快取導致更新的路由未及時應用。
  4. 簡體字輸出的來源：
    • 問題描述：API 的部分回應出現簡體字，但程式內的文字均為繁體字。
    • 原因：可能與 Laravel 的內部語系設定或 JSON 輸出的預設編碼有關。

解決方法：

  1. API 路由未回應解決：
    • 使用 php artisan route:list 確認所有 API 路由是否正確註冊。
    • 清除 Laravel 的快取：php artisan route:clear、php artisan cache:clear。
    • 測試每個路由是否能正確回應。
  2. 重複 /api 前綴問題解決：
    • 修改 Vite 的 proxy 設定： proxy: { '/api': { target: '<http://127.0.0.1:8000/api>', changeOrigin: true, rewrite: (path) => path.replace(/^\\/api/, ''), // 確保只移除最前面的 /api }, },
    • 確保目標伺服器的路徑正確對應 API。
  3. 快取問題解決：
    • 在修改路由後，立即執行以下命令清除快取： php artisan route:clear php artisan cache:clear php artisan config:clear
    • 確保清除後的快取能正確應用新的路由設定。

一開始，我們先處理了 HTML 的部分，目標是完成登入與註冊的介面。我們希望能讓這些功能以動態的方式實現，比如透過 JavaScript 來動態插入內容，但在測試時發現，這樣的方式會導致某些衝突出現，尤其是在彈跳出來的視窗中，會因為多層操作產生無法預期的問題。最後，我們選擇了一個更簡單、直接的解決方案，就是使用靜態的方式，把這些彈跳視窗的結構直接寫進 HTML，這樣雖然少了一點靈活性，但確實讓問題變得更可控。

到了下午，挑戰轉向了後端的部分。我們開始思考登入功能的邏輯，從資料庫的設計，到 Laravel 的路由設定，再到 Controller 的部分，逐步理清流程。我們確保註冊與登入的 API 都能運作，並通過後端的邏輯去驗證用戶的資料。在這過程中，還出現了許多迷人的討論，比如是否需要使用 Session 或 JWT 來管理用戶狀態。雖然這些方案聽起來很專業，但最終我還是選擇了一條更簡單的路——放棄這些複雜的管理邏輯，專注於完成核心的功能，快速實現註冊與登入。

接下來的部分，則是回到 JavaScript 上。我們重新撰寫了登入與註冊的邏輯，讓它能夠與後端 API 無縫對接。我花了不少時間在調整這些細節，特別是如何透過 JavaScript 去控制 HTML 的 ID，以及如何確保資料能成功傳到後端進行判斷。當然，這個過程並不順利，中間出現了許多小錯誤，比如表單無法提交、狀態無法切換，甚至還有前端與後端無法對接的情況。但經過一次次的測試與修正，這些問題都被一一解決了。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *