iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

從零打造網頁系統:非資訊人也能完成的全端專題實作 系列

這次我選擇的主題是「從零打造網頁系統:非資訊人也能完成的全端專題實作」。起緣於修習輔仁大學專題課程時,有實際參與網站開發,雖然本身非資訊專業出身,但過程中透過不斷地向老師、學長及AI工具提問,經拆解問題與修正,逐步完成前後端整合的專題網站。

系列文章預計以紀錄者的角度,記錄我在實作中的心得,範圍包括前端、後端、Docker及部署等技術。相關內容將以實例逐步開展,記錄我對各個實例的心得與學習成果,希望對同樣從非資訊背景踏入網頁開發的朋友,能有所助益。

參賽天數 22 天 | 共 22 篇文章 | 3 人訂閱 訂閱系列文 RSS系列文 團隊ZeroToAI3 × 友AI輔能
DAY 11

Day 11: JavaScript的模組管理

在前面事件監聽的程式碼中,有使用到一個呼叫函式searchSchedule(),要能呼叫該函式的前提是,在先前的程式碼已經有先定義完成,否則直接呼叫一個不存在的...

DAY 12

Day 12: JavaScript的非同步函式操作async/await

再回到事件監聽的程式碼中,可以在箭頭函式前添加async,將其變成「非同步函式」,並且於呼叫函式前添加await,以等待呼叫函式的回傳值,避免執行結果的順序,因...

DAY 13

Day 13: Vue專案結構及與傳統網頁程式對應

在熟悉HTML、CSS及JavaScript之後,接下來可以嘗試使用Vue框架,進行網頁前端的撰寫。有別於HTML、CSS及JavaScript的彼此獨立而各自...

DAY 14

Day 14: Vue載入流程

在介紹完Vue基本架構及SFC組件等基本概念後,接下來要介紹Vue是如何載入流程,以能呈現出網頁 首先,於public/index.html中,會提供掛載點...

DAY 15

Day 15: Vue路由設定

我們在前面的App.vue例子中,有import Sidebar.vue,因此載入完成後,畫面的顯示內容應該會在Sidebar.vue中找到,因此我們順著路徑可...

DAY 16

Day 16: Vue按鈕樣式及監聽事件

前面我們介紹完配置路由的網址及組件畫面,接下來針對組件畫面的內容,進行介紹,以 src/views/Employee.vue為例,這個組件畫面,主要提供幾個功能...

DAY 17

Day 17: Vue資料流與狀態管理-前端組件內的資料初始化及狀態設定

接續前面按鈕的@click監聽點擊事件後,執行的方法,繼續進行相關介紹,首先針對openCreate(),仔細去看其中的內容,參考如下。 // src/view...

DAY 18

Day 18: Vue資料流與狀態管理-Vuex資料流及集中狀態管理

接下來我們要針對refreshList()進行介紹,此方法是從後端API撈取員工資料,因為資料需要在多個組件之間共享,須透過Vuex管理狀態,由其向後端請求,經...

DAY 19

Day 19: Vue資料流與狀態管理-Vuex模組物件

在以dispatch呼叫actiion後,進而發送API請求,詳細的流程,要進一步查看Vuex的模組物件(module object),可以查看src/stor...

DAY 20

Day 20: Vue字串管理及命名空間(namespaced)

在理解Vuex資料流後,還有幾個重點需要提醒,而在這裡想要介紹的是字串管理及命名空間。在前面介紹的Vuex中,actions與mutations的名稱本質上都屬...