iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

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

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

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

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文 團隊ZeroToAI3 × 友AI輔能
DAY 21

Day 21: Vue中進行API請求

在前面Vuex資料流中呼叫actions時,其中一個步驟,即EmployeeService.query(params),乃是向API請求資料,相關步驟程式碼位置...

DAY 22

Day 22: Vue跨組件資料傳遞 props及emits

接下來要介紹的實例,是員工資料清單表格<EmployeeTable />,其中涉及到跨組件(component)的資料傳遞,即props(父傳子)及...

DAY 23

Day 23: Vue的v-model雙向綁定

最後,我們再次回到Employee.vue的區塊,這裡要介紹的是v-model雙向綁定的功能,參考如下: <!-- src/views/Employee....

DAY 24

Day 24: Vue互動視窗(modal)及表單(form)

再次回到最初的Employee.vue程式碼,之前針對互動視窗(modal),曾以此為例介紹前端組件內的資料傳遞,現在再次查看以下程式碼,可以更深刻了解各標籤實...

DAY 25

Day 25: Vue表單前端驗證及正則表達式(regular expression)

通常在使用者填寫表單時,網頁開發者會預設一定的輸入格式,避免使用者填寫一些不符合預期的內容,導致後續資料清理上所造成的時間浪費,並且若使用者所填寫的內容,與該項...

DAY 26

Day 26: Django專案結構簡單介紹

前面內容主要著重於前端網頁的開發,針對後端部分著墨較少,但因為前端時常需處理API請求,若完全不懂後端的東西,會不知道該如何請求網址,並且若有想要更改資料模型的...

DAY 27

Day 27: Docker編排檔(.yml)介紹及容器啟動

在完成前端網頁開發後,一個完整的網站專案通常還包含後端程式碼、資料庫檔案,以及各種環境設定檔案。若要將這些檔案移轉到其他電腦或伺服器進行測試,可能會因作業系統、...

DAY 28

Day 28: Docker區分開發及正式環境的部署設定

在網站開發到一定程度,準備正式部署網站時,環境設定通常會與開發階段不同。因此會建議區分開發環境及正式環境,並各有自己的docker-compose.yml檔案,...

DAY 29

Day 29: Nginx反向代理(reverse proxy) & Ngrok對外公開網址

在前面Docker於正式部署時,有稍微提到Nginx服務,因此想針對Nginx進行簡單介紹。Nginx是一個高速輕量化的網頁伺服器,架設在網站入口,主要任務是將...

DAY 30

Day 30: Git指令介紹

Git指令在多人協作的專案開發中,扮演了版本控制的核心角色,其重要性不言而喻。照理說,應該在前面的篇幅中提及,但Git指令在開發各階段,一直都有在使用,好像也不...