Day 128 (Week19), 2021/08/17 (Tuesday)
學習時數:8 hr
Done
- [done] w17 hw1 部落格改寫(文章新增、編輯、刪除、列表)
To Do @ this week
- [done] w17 [BE201]
- [ ] w17 HW1 部落格改寫
學習心得紀錄
Objective 客觀
w17 部落格改寫:首頁的文章列表
新增文章的功能算滿順利的,使用 create()
,沒有遇到什麼困難。
在做文章列表時,如果要將 data 的變數傳到 ejs 顯示的話,可以在資料庫 find
後,在 then( 變數 => {})
,然後再 render
時輸入要傳到 ejs
的變數。
然後在文章列表顯示時間的時候,發現資料庫的時間與筆電的時間不符,而且格式好醜,所以就去找怎麼樣修改格式,然後修改時間。後來在 config
檔裡面的 development
環境上加了 timezone: "+08:00"
的時區,顯示在頁面就正確了,然後還是覺得格式很醜「xxx 標準時間」,後來查了資料發現可以使用:moment
的 npm 套件,然後在 ./index.js
路由的地方引入跟使用,並設到 res.locals
裡面,這樣在 views
裡面的 ejs
檔案就可以使用, 然後設定 format 為 YYYY-MM-DD HH:mm
。結果這個顯示的格式,跟 PHP 一模一樣XD!
w17 部落格改寫:遇到相對路徑及絕對路徑的問題
|--views
|-- models
|-- public
|-- style.css
|-- images
|-- icon.svg
|-- xxx.svg
|-- etc.
先前有在 app.use
設定:app.use('/public', express.static(__dirname + '/public'))
,將圖片及 CSS 檔案通通放在裡面,但遇到 path 設定為 app.get('/article/:id'
時,裡面圖片跟 CSS 的路徑一開始是寫 ./images
,然後在 Chrome 的 dev tool 看,就會變成 localhost:5001/article/public/style.css
,與我的資料夾路徑 專案/public/style.css
不一樣,後來去查了查,相對路徑的話,會是 ./xxx
的 .
點開頭,絕對路徑的話是:/
或 http://
開頭。
我後來將靜態頁面的圖片及 CSS 檔案從相對路徑 ./images
改成絕對路徑 /images
之後,就沒有路徑錯誤,抓不到檔案的問題了。
不過我只改了文章會用到的部分,在 CSS 裡面的圖片路徑,之後才要修改,在這邊還沒有使用 SASS,覺得一個一個改真麻煩,之後看看要不要使用 SASS 也比較好修改跟整潔!
w17 部落格改寫:更新文章內容
更新文章要先使用 where
找到該 id 後,再新增,要先 findOne
,再 .update
新增。
另外有做文章主題分類的下拉選單,因為在編輯更新文章時,會先載入原本舊的內容,所以就在思考要怎麼樣讓下拉選單落在原本選的 option
內,後來想到是類似 PHP 的方法,在 HTML 夾雜 PHP 語法,<option value='旅遊' <% if(){%><%=selected%><% }%>
來達到:當我選擇「旅遊」主題時,<option value='旅遊' selected>
的 HTML 標籤。
w17 部落格改寫:刪除文章
在 delete
的功能的地方,原本設定路由 app.post('/delete', blogController.delete)
沒有加上 :id
,所以在 findOne
時找不到 id,所以就沒有辦法刪除想要刪除的文章,後來路由改成 app.post('/delete/:id', blogController.delete)
就可以從 req.params.id
取 id
,然後去資料庫找相對應的 id 後刪除文章。刪除的方法是用 is_deleted
的方法,這樣在資料庫就還有紀錄,不會完全刪除掉。
感受
今天還有另外的 ckEditor 的小插曲,因為在 ejs
裡面 <%= %>
及 <%- %>
用 =
escapes HTML, -
則沒有 escape HTML,然後我一直在嘗試怎麼樣可以讓他 escape HTML 然後又可以 display <p>
之類的 HTML tag,結果後來發現 ckEditor 會把<p>
存在資料庫,如果是 JavaScript 的語法,像是<p><script>
就會在資料庫存成 <p><script>
。
Decisional 決定行動
希望明天可以繼續完成部落格權限管理的部分!