在 Express 上面把資料變美吧


Posted by Christy on 2022-01-13

本文為 Lidemy [BE201] > [把留言板變得更完整] 之 [美化頁面],練習使用 bootstrap 美化畫面。

1. EJS 新語法 include 導入 bootstrap

a. 把重複的元素放在 template 資料夾裡面

b. head.ejs 放引入 Starter template 的那三行

c. 用 include 引入重複的部分

// index.ejs 裡面用 include 引入重複的部分

<!doctype html>
  <head>
    <%- include('template/head') %>
  </head>

<html>
</html>

2. 找尋合適的 css 修改成想要的樣子

取決於對 bootstrap 熟不熟悉,用久了會知道哪些適合,有哪些元素可以用。

3. 邊做邊確定功能沒有壞

每做一小段就跑一下,試試看功能有沒有壞掉

4. createdAt 時間格式

轉換 createdAt 成 2022-01-01 12:20:31 的格式

a. 把資料庫的 createdAt 輸出,會長這樣:

Thu Jan 13 2022 16:55:16 GMT-0500 (東部標準時間)

b. 用 new Date().toISOString().replace(/T/, ' ').replace(/\..+/, '')

就可以變成這樣了:2022-01-13 22:07:58

<div>Posted by: 
  <%= new Date(comment.createdAt).toISOString()
    .replace(/T/, ' ').replace(/\..+/, '') %>
</div>

心得:看老師 demo,值得學習的地方是

  1. 頭腦很清楚,知道自己在做什麼

  2. debug 很有條理










Related Posts

MTR04_0923

MTR04_0923

Lidemy HTTP Challenge 破關紀錄

Lidemy HTTP Challenge 破關紀錄

Debug Windows Service

Debug Windows Service


Comments