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。








Related Posts

在 ES6 你會遇到的新功能

在 ES6 你會遇到的新功能

ASP.NET Core Web API 入門教學 - 使用AutoMapper自動對應Dto欄位

ASP.NET Core Web API 入門教學 - 使用AutoMapper自動對應Dto欄位

{210411} markdown

{210411} markdown






Comments