SteveChuang個人網頁

個人首頁

NBA比賽資訊 預設當天 可切換日期

聊天室練習(使用socket.io

專案clone前置作業

• 準備node_modulesnpm install
• 準備bowerbower install

---

注意事項

-推到heroku上的話需再package.json的scripts加入(因為要讓heroku安裝bower.json內依賴的東西)

    "postinstall": "node_modules/.bin/bower install"

-要使用Node.js7以上的版本 否則async await語法不支援 會有錯誤 -使用gulp套件(因版本問題造成gulp壞了懶得修理直接換成webpack) -使用webpack打包sass、js檔(尚未完成)

---

NBA爬蟲練習

目前功能

• 當日比分
• Live 結束 未開打判斷
• 即時更新live場次比分(需重新整理)
• 日期切換 查看切換日期比賽比分
• BOX詳細資訊
• 各節得分

遭遇問題

1. 抓取各節比分時 是想把資訊都帶到table內 並使用vuejs的v-for='value in object功能

    //table head部分
    th(v-if="object.ScoreDetailData[0].length=='8'") ot
    //table body部分
    tr(v-for='value in object.ScoreDetailData')
      td ...
      td ...
      td ...
      td(v-show="value.length=='8'") {{value[6]}}

原本以為這樣就可以成功了，th部分不能用value的原因為沒有在v-for裡面
但是會出現TypeError: Cannot read property '0' of undefined的錯誤
應該是因為 object還沒從ajax娶回來 他就取它的值 所以出現的錯誤
解決方法為先判斷是不是有抓回來資料了!
th(v-if="object.ScoreDetailData[0].length=='8'") ot
th(v-if="object.ScoreDetailData && object.ScoreDetailData[0].length=='8'") ot

2. 有些隊伍詳細資訊 爬蟲網址會是隊伍兩碼 例如勇士 會是GS 不知道規則 已知兩碼
   勇士 GS
   鵜鶘 NO
   馬刺 SA
   尼克 NY

3. 在css內要使用before偽元素製作li圖示時(font-awesome 5) css也要載入，若只用html tag好像載入js就可以使用了 所以之前漏掉

使用技術

• node.js
• pug
• bootstrap4
• vuejs
• bower
• node.js套件
• express
• nodemailer
• puppeteer
• socket.io
• gulp

---

IDE

• VSCODE
• ESLint
• JSHint
• TSLint
• Code Runner

---

參考網站

• 使用puppeteer教學
• css load資料時的動畫
• socket.io製作聊天室

爬蟲網站

此爬蟲網站無任何收益，僅供練習使用 若有侵權敬請告知 馬上移除

以此場比賽為範例

• NBA比分資訊JSON傳入日期20180502 傳入美國時間 得到當天每一場比賽資訊
• NBA隊伍資訊JSON 傳入隊伍資訊簡寫 得出完整隊伍名稱
• NBA那一場比賽詳細資訊 傳入日期 & 客場隊伍@主場隊伍 得到比賽資訊 有使用cheerio 因為是爬蟲 不是爬json

*** 測試pull request 怎麼使用