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,將靜態頁面會重復到的 headnavbarfooterbanner的分離開來,然後一開始一直沒辦法 load 出來,後來發現是在 <%- include('xx')%>中,少了 - 的符號,難怪一直都只有乾乾淨淨的 HTML 標籤。後面還遇到一些問題,像是圖片跟 CSS 檔案需要放在哪裡,後來查了 Express 的文件裡,發現是要放在專案資料夾底下 ./public 的位置,然後又可以在 public 底下分為 CSS/images/ 兩個資料夾,因為只有一個 style.cssCSS 檔案,所以就是只有創了 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 的路由、controllersmodelsviews 裡面打轉,需要真正了解這 MVC 架構裡面的各司什麼職,該怎麼樣取得 data、如何從靜態頁面傳料給資料庫。在 PHP 裡面,雖然 PHP 與 HTML 都夾雜在一起,在維護的角度上比較困難外,思考的流程都還算是一直線,不像 Express + Sequelize 分散在不同的區塊,不過真的是在 code 上也整潔許多,將負責不同的區塊都分開來。

Decisional 決定行動

禮拜一開始來做部落格的註冊與登入功能

#Sequelize #Express #Blog







你可能感興趣的文章

CSS 元素置中大全

CSS 元素置中大全

[FE201] SCSS

[FE201] SCSS

[MSSQL] 關於nvarchar(max)

[MSSQL] 關於nvarchar(max)






留言討論