Day 128

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>&lt;script&gt;。

Decisional 決定行動

希望明天可以繼續完成部落格權限管理的部分！