###### tags: `yunju-working-space`

# 學期 2-3 作業相關資料 by Sherry

[toc]

格式可參考：

## A5:幹話產生器

- 切版時不了解表單標籤 (應該只有我不了解..) 的運作，不知道``<form></form>``應該要包在``<card></card>``的外層、原來 submit button 要包在表單標籤內，導致 submit 按半天沒反應。故查詢關於表單標籤的介紹與範例。
[表單簡介](https://www.fooish.com/html/form.html)
[bootstrap表單](https://www.runoob.com/bootstrap/bootstrap-forms.html)
- 物件操作不太熟悉，再重新看了MDN文件及一些資料
[Object.keys()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)
[Object.values()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values)

## Todo List
- 照著教案U85做到了最後一步，成功顯示10筆Todo，但當重新整理頁面時Todo又消失出不來，重新整理很多次都一樣，看一下終端機中的catch error message：Error: Can't set headers after they are sent to the client，查了[stack overflow](https://stackoverflow.com/questions/7042340/error-cant-set-headers-after-they-are-sent-to-the-client)才發現，原來我的程式碼中res.render()了兩次
> When you see this error, try to look for anything that tries to send a header after some of the body has already been written. For example, look for callbacks that are accidentally called twice, or any error that happens after the body is sent.

## A6:餐廳清單CRUD
- 在種子資料產生器中載入restaurant.json時找不到路徑，查了[資料](https://www.itread01.com/content/1549094777.html)才比較清楚相對路徑的寫法，順利載入檔案
- 在處理搜尋功能時，需要從資料庫撈資料，查詢 [Mongoose 語法](https://mongoosejs.com/docs/tutorials/query_casting.html)來篩選從資料庫中撈出來的資料
- 為了讓電話號碼輸入限制只能填入數字，以及規定幾位數，去查了[input 屬性的用法](https://www.fooish.com/html/input-tag.html)、[表單用法](https://oberonlai.blog/tw/html5-form/)

---

這次CRUD作業提示中有說：試著改用資料庫建置種子資料，而非依賴原來的 restaurant.json
由於我是在舊專案（上週的餐廳清單專案）的基礎上做修改，我在實作上碰到的問題有兩個：

1. 在改寫 GET +路由 裡的函式時，我需要將原本撈資料的路徑改變（restaurant.json ->> db）但一開始我不知道「當初賦值 db 的變數是什麼」，那時候還是從 json 檔拿，所以使用的變數是 restaurants.results ，然後我再嘗試理解教案內容繞了一大圈才知道原來我們當初定義的資料庫 Model 就是 db 資料庫裡面的 collection

2. 在 GET /search 的函式裡，不知道怎麼 filter 出只包含 keyword 的資料，查了文件才知道，MongoDB 在 find 方法中還有很多參數可以設定例如
.find({
    "$or":
      [{
        "name": { $regex: `${keyword}`, $options: '$i' }
      }]
  })

3. 因為瀏覽 detail 時是抓 params 中的 id 去跟資料庫中的資料 id 做對照，來撈出資料。但當初生成種子資料時，我是用 restaurant.json.forEach() 去下，所以變成前八筆資料都有個位數 id ，用 params 抓 id 顯示頁面沒問題，但我後續新增的資料無法讓 user 自行填入 id，只好棄用 id 欄位，所以新增的資料的 detail 頁面抓不到資料。最後我的方式是乾脆連 json 檔中原本的 id 也棄用，生成種子資料時也不生 id，用原生的 db 流水號 _id 就好，不管新的舊的都抓得到 _id，所以我的 params 中的 _id 也是醜醜的流水號，但至少抓得到資料
有空再來思考怎麼改善 

有在看學期 2-2 物件導向 this 和建構式 那邊，2-3 有用到，沒搞懂的話會看不懂 QQ

## A8: 重構餐廳清單
- 查詢下拉式選單如何抓取資料，及其屬性 [下拉式選單](https://www.fooish.com/html/select-option-optgroup-tag.html)
- 查詢 mongoose 的 sort 方法，[如何定義其屬性來篩選資料](https://stackoverflow.com/questions/4299991/how-to-sort-in-mongoose) [官方文件](https://mongoosejs.com/docs/api.html#query_Query-sort)

## A12: 老爸私房錢
- 為了保留篩選選單的選取內容，想利用樣板引擎提供的方法去標記選過的選項，查了 [handlebars的helpers怎麼設定](https://handlebarsjs.com/guide/builtin-helpers.html#if)

## A13: 實作 middleware
- 查詢print時間戳記的相關語法 [Date.prototype.toLocaleDateString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString)、[stack overflow討論串](https://stackoverflow.com/questions/30158574/how-to-convert-result-from-date-now-to-yyyy-mm-dd-hhmmss-ffff)、[更詳細的時間戳記屬性設定](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat)
- response time 的部分，發現直接去 npm 下載套件很快，但也找到一些用 axios/ajax 來抓資料的方式，有空再好好研究 [stack overflow 的討論](https://stackoverflow.com/questions/14849314/measuring-server-response-time-client-side)、[medium 上的分享](https://sabljakovich.medium.com/axios-response-time-capture-and-log-8ff54a02275d)

## A14: 短網址產生器
- 因為想在results的頁面做一個「過去紀錄」+「熱騰騰剛做好的最新一筆短網址」，因此查詢[如何利用mongoose抓取最新一筆資料](https://blog.csdn.net/le_17_4_6/article/details/94740071)
- 前端刻版沒什麼想法，想說市場調查一下大家都有哪些UI布局，參考了 [bitly](https://bitly.com/) 和老東家 [picsee](https://picsee.io/?utm_source=web&utm_medium=picsee.co&utm_content=no_login)(以前大學時在這裡實習行銷，沒偷學幾招開發短網址產生器的秘訣QQ)
- 寫防止短網址字串重複的演算法時，想到利用查詢 [DB中是否有該筆資料](https://mongoosejs.com/docs/api.html) 來當作判斷是否重新產生字串的依據
- 查詢如何製作 [一鍵複製按鈕](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp)