Day 125-126 (Week19), 2021/08/14 - 15 (Saturday & Sunday)
學習時數：6 hr
Done
- [done] w17 hw1 部落格改寫（檔案夾設置及靜態頁面）
To Do @ this week
- [done] w17 [BE201]
- [ ] w17 HW1 部落格改寫
學習心得紀錄
Objective 客觀
回顧了一下自己手寫的筆記！
w17 部落格改寫：檔案夾設置及靜態頁面 @ Saturday
週五將初始的資料夾架構建好後，還沒有開始做 views 的部分，週六日有稍微做一些，途中發現在製作 template，將靜態頁面會重復到的 head、navbar、footer、banner的分離開來，然後一開始一直沒辦法 load 出來，後來發現是在 <%- include('xx')%>中，少了 - 的符號，難怪一直都只有乾乾淨淨的 HTML 標籤。後面還遇到一些問題，像是圖片跟 CSS 檔案需要放在哪裡，後來查了 Express 的文件裡，發現是要放在專案資料夾底下 ./public 的位置，然後又可以在 public 底下分為 CSS/及images/ 兩個資料夾，因為只有一個 style.css 的 CSS 檔案，所以就是只有創了 images/ 的資料夾放一些圖片檔案，這都還是剛開始，後來才發現有所謂「路徑」的問題，一開始一直無法在靜態網頁 load 出圖片，後來查看 Chrome 的 dev Tool 才發現原來圖片的網址點下去，沒有顯示任何圖片，才去尋找怎麼樣找到localhost:5001 的圖片路由，但是會隨著 /posts/:id 的帶入 query String，就需要調整相對路徑，這樣有一點麻煩，所以我後來將 /public 設成絕對路徑：app.use('/public', express.static(__dirname + '/public'));，這樣就不會有相對路徑改變所造成的圖片 URL 需要逐一修改的問題。
w17 部落格改寫：建立與連線資料庫 @ Sunday
一開始就是思考一下流程跟方法，然後使用 sequelize-CLI 來建立資料庫，後來就開始從註冊功能開始製作，然後就遇到問題了！
要怎麼樣在 controllers/user.js 中引入 dataBase，然後要怎麼把 POST 表單提交的內容（註冊的帳號及密碼），交給 Cotroller 去處理？如果順利在 controller 取到表單提交的內容，那要怎麼做錯誤訊息提示、將明碼改成雜湊、註冊好是否要重新導向到首頁、session 的登入機制。
從 controllers 抓取網頁提交的內容開始思考，因為命名相似，其實覺得還滿複雜的，因為 code、變數在檔案之間跳來跳去，資料取來取去、使用，後來把他對照在一起，如下：
(@./views/login.ejs): <form action='/login' method='POST'>
(@./index.js): app.post('/login', userController.login)
(@./controllers/user.js):
login: (req, res) => {
req.body.username = username
寫好對照後，思考了一下流程：網頁填寫帳密，傳送到 controller 處理前，需要在 controller 裡，先解析瀏覽器 POST 的內容（body-parser），然後找資料庫裡面的使用者帳號及密碼雜湊是否符合（bcrypt），印出幾種錯誤訊息的提示（connect-flash）。這些過程，還有查詢了怎麼使用語法，有時候沒有查到正確的用法，就偷看了一下課程影片 [BE201] 的留言版登入範例。
禮拜日後來只做到了錯誤訊息提示的開始，複習怎麼將 connect-flash 引用至路由（./index.js），理解了 req.flash() 語法的「讀取」與「寫入」有何不同。
感受
與 PHP 相比，我覺得 PHP 在思考製作的過程上比較簡易，這幾週的內容來，我發現在 index.js 的路由、controllers、models、views 裡面打轉，需要真正了解這 MVC 架構裡面的各司什麼職，該怎麼樣取得 data、如何從靜態頁面傳料給資料庫。在 PHP 裡面，雖然 PHP 與 HTML 都夾雜在一起，在維護的角度上比較困難外，思考的流程都還算是一直線，不像 Express + Sequelize 分散在不同的區塊，不過真的是在 code 上也整潔許多，將負責不同的區塊都分開來。
Decisional 決定行動
禮拜一開始來做部落格的註冊與登入功能
