iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Vue.js

遊戲活動關卡查詢網站 系列

1.將資料存取於Supabase中,網站載入Supabase資料
2.使用者可在網站中做包括敵人技能、屬性或關卡屬性的查詢
3.在30天的規劃中
前半段會先介紹使用的工具與流程規劃
中段會涉及資料的處理
後半段預計做視覺化的優化處理

鐵人鍊成 | 共 30 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 1

遊戲活動關卡查詢網站Day1-前言

這是之前做的選卡網站算是第一次用Vue的嘗試 這是靜態網站 因為當時做網站時 並不是用引入套件的方式去做也就是說不是用NodeJS這種管理式套件去開發這次要做...

2025-08-12 ‧ 由 jack1234552000 分享
DAY 2

遊戲活動關卡查詢網站Day2-工具使用介紹

目標將資料存放於Supabase後,專案透過載入的方式能讓使用者查詢到資料 步驟接下來的幾天會做網站規劃設計、管理資料和網站佈版以下逐一列出 1.網站規劃設計 ...

2025-08-13 ‧ 由 jack1234552000 分享
DAY 3

遊戲活動關卡查詢網站Day3-設計規劃(Miro)

目標  A.繪製出線稿,後續的開發都會按照上面的設計  B.    其實工程師最大的問題是,很常有自己的想法    變成開發途中,東做一個西做一個    產出的...

2025-08-14 ‧ 由 jack1234552000 分享
DAY 4

遊戲活動關卡查詢網站Day4-資料規劃1(簡易版Schema)

目標昨天完成了初步的畫面設計的規劃接下來要做建立資料的工作 以便之後匯入Supabase所以今天會為需要的資料做分類和整理替這些資料做一個簡易版的Schema。...

2025-08-15 ‧ 由 jack1234552000 分享
DAY 5

遊戲活動關卡查詢網站Day5-資料規劃2(Excel)

目標昨天我們先建立了資料表間對應的關係有了一個簡易版的Schema可以參考接下來,我們在Excel表建立幾筆簡單的資料之後匯出資料並匯入Supabase。 步驟...

2025-08-16 ‧ 由 jack1234552000 分享
DAY 6

遊戲活動關卡查詢網站Day6-資料匯入1(Supabase)

目標接下來Supabase的部分與下一篇 會分成共兩天撰寫今天是寫關於註冊的部分明天則是正式進到資料匯入的環節因為分成了兩天敘述,字沒有很多,放輕鬆看就好 步驟...

2025-08-17 ‧ 由 jack1234552000 分享
DAY 7

遊戲活動關卡查詢網站Day7-資料匯入2(Supabase)

目標昨天已經完成了註冊Supabase和建立專案今天要做的是將前天匯出的五份檔案匯進來而這次新增了一個驗證項目在最後一段確認我們匯入的資料都有匯成功。 步驟1...

2025-08-18 ‧ 由 jack1234552000 分享
DAY 8

遊戲活動關卡查詢網站Day8-程式安裝(Node.JS)

目標程式安裝會分成兩篇敘述這邊會先敘述安裝Node.JS的執行環境 步驟1安裝Nodejs網站會先依照你的系統 初步辨識你需要的檔案這邊選紅框的MSI檔案 2...

2025-08-19 ‧ 由 jack1234552000 分享
DAY 9

遊戲活動關卡查詢網站Day9-程式安裝2(Node.JS)

目標上一篇安裝好Node.JS環境後這邊會建立Vue專案並打開網址確認啟動完成 步驟 1 接著安裝Vue需要的檔案輸入npm install -g @vue/c...

2025-08-20 ‧ 由 jack1234552000 分享
DAY 10

遊戲活動關卡查詢網站Day10-切開畫面(Vue:Component)

目標依照線稿設計,將畫面做切割使網站由至少5個組件(Component)組成 步驟1.回到線稿0.1A、0.1B原先需求是 按下活動一覽時 會出現活動一覽和副本...

2025-08-21 ‧ 由 jack1234552000 分享