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.idid ,然後去資料庫找相對應的 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 決定行動

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

#Sequelize #Express







你可能感興趣的文章

Leetcode  JS 2623. Memoize 簡易筆記

Leetcode JS 2623. Memoize 簡易筆記

圈套

圈套

[JavaScript ES6] Promise 以及 async await

[JavaScript ES6] Promise 以及 async await






留言討論