Day 139 (Week20), 2021/08/29 (Saturday)
學習時數：7 hr
Done
- [done] w17 hw2 餐廳網頁功能製作（抽獎功能及抽獎頁面）
To Do @ this week
- [ ] w17 & w18 餐廳網頁改寫
學習心得紀錄
Objective 客觀
餐廳網頁改寫（JavaScript 的隨機抽獎）
其實一直在想要怎麼寫，昨天還是今早已經將小範例放進去之後測試成功，但是還要搭配起資料庫內的資料，還有找到獎項後，需要回傳哪些資料。
第一個卡住的地方是在 controller 取到 data 後，使用 console.log(JSON.stringify(prize, null, 4)) 想說將資料以 JSON 的形式印在 terminal 上，看是什麼樣的輸出資料，然後想說將其儲存成一個變數：let json = JSON.stringify(prize, null, 4) 再印出來 console.log(json) 結果發現怎麼樣印都是 undefined，後來還回去查找了上課筆記，發現只要 prize[0].prizeName 就可以印出資料了！後來還在想是不是 JSON.stringify 的參數哪裡有問題，一開始學這個指令時，也沒有深查這是什麼意思，後來才知道在 MDN 的原式為 JSON.stringify(value[, replacer[, space]])，才知道各個參數的意思。
其實還有在思考一件事情，那就是權重要怎麼表示？儘管可以像段考那樣，國文權重 4，英文權重 3 之類的，但是再思考一下，其實抽獎的中獎率，好像沒有段考單一顆木在總權重的比例大，反而可能是 1 % 或者 0.1 % 的很小機率，所以我在想要怎麼在後台表示單位，然後怎麼在 JavaScript 做抽獎的機率。
後來我是以 0.01 % 為最小單位，假設壹獎為 0.01 %，那我就會假設有 10000 個樣本數，這樣壹獎就是一萬個裡面的僅僅一項，如果二獎為 2 %，那這樣就是 10000 個裡面的 200 個二獎，那當然也有沒有中獎（槓龜）的，所以要 10000 - 有獎項的總數，這只是獎項在樣本裡的出現機率。那要怎麼知道這一堆樣本裡，哪個是壹獎，哪個是二獎，哪個是參獎，哪個是槓龜？我就將這些樣本命為數字，0 為槓龜，1 為壹獎，2 為二獎，然後再在 10000 個亂數裡抽一個數字，假設是陣列裡 10000 個元素裡的第 9394 個元素，值為 0，那就是槓龜。
然後我發現釐清這些花滿多時間的，然後轉換成 code 的邏輯，也卡了一些時間。
餐廳網頁改寫（抽獎）
今天花了一些時間在怎麼把 JavaScript 的權重抽獎機率放進餐廳網頁裡面，後來偷偷參考了一下同學的寫法，是將其放在 controllers 內，因為 code 有點長，我後來把 code 做成 function 包成 module，再引入，這樣 code 就乾淨許多了！
不過很少做成 module，所以還查了一下怎麼使用。
抽獎結果頁面
我後來發現一個點就是：原本寫的抽獎是利用 HTML DOM 將抽獎說明的 HTML 內容刪掉，再新增抽獎結果的 HTML 內容，然後因為是呼叫抽獎 API，所以直接呼叫就好。但這次是用資料庫儲存抽獎獎項，然後還要用 JavaScript 去寫，將結果傳回靜態頁面。後來想想好像其實不會影響，因為一樣是直接傳回抽獎結果。
不過 Express 可以決定路由，所以我後來就嘗試新作法，將抽獎結果設為另一個路由，從抽獎說明頁面導到抽獎結果頁面，跟先前的 HTML DOM 不一樣的地方，大概是有換頁的感覺吧。
抽獎品項的編輯
其實晚上才剛開始做這個，還在思考要怎麼呈現，結果就發現我對於編輯的路由跟 get、post method 不太熟悉，明天再來研究QQ。
感受
天哪，第十七週的作業二餐廳網頁改寫的抽獎真的是耗費很多腦細胞QQ，有回到以前在寫跟數學、統計有關的 code 的感覺...，好像有什麼沒考慮到，就是頭有點痛 XD，浮現被遺忘的統計...。
後來查了下 18 週的作業一，好像是改寫餐廳網站，咦！那這樣我好像改寫好了。
Decisional 決定行動
希望明天可以把抽獎的編輯及刪除做好，有個好的 17 週與 20 週收尾！這個週末再做不完要停止 17 ~ 18 週的後端了，然後開始 21 週的 React。
其實還有個小小的期許就是看有沒有辦法再 21 週花一丁點時間做十八週餐廳網頁的作業，感覺 final project 也會用到購物車什麼的概念QQ。
