這次我選擇的主題是「從零打造網頁系統:非資訊人也能完成的全端專題實作」。起緣於修習輔仁大學專題課程時,有實際參與網站開發,雖然本身非資訊專業出身,但過程中透過不斷地向老師、學長及AI工具提問,經拆解問題與修正,逐步完成前後端整合的專題網站。
系列文章預計以紀錄者的角度,記錄我在實作中的心得,範圍包括前端、後端、Docker及部署等技術。相關內容將以實例逐步開展,記錄我對各個實例的心得與學習成果,希望對同樣從非資訊背景踏入網頁開發的朋友,能有所助益。
在前面Vuex資料流中呼叫actions時,其中一個步驟,即EmployeeService.query(params),乃是向API請求資料,相關步驟程式碼位置...
接下來要介紹的實例,是員工資料清單表格<EmployeeTable />,其中涉及到跨組件(component)的資料傳遞,即props(父傳子)及...
最後,我們再次回到Employee.vue的區塊,這裡要介紹的是v-model雙向綁定的功能,參考如下: <!-- src/views/Employee....
再次回到最初的Employee.vue程式碼,之前針對互動視窗(modal),曾以此為例介紹前端組件內的資料傳遞,現在再次查看以下程式碼,可以更深刻了解各標籤實...
通常在使用者填寫表單時,網頁開發者會預設一定的輸入格式,避免使用者填寫一些不符合預期的內容,導致後續資料清理上所造成的時間浪費,並且若使用者所填寫的內容,與該項...
前面內容主要著重於前端網頁的開發,針對後端部分著墨較少,但因為前端時常需處理API請求,若完全不懂後端的東西,會不知道該如何請求網址,並且若有想要更改資料模型的...
在完成前端網頁開發後,一個完整的網站專案通常還包含後端程式碼、資料庫檔案,以及各種環境設定檔案。若要將這些檔案移轉到其他電腦或伺服器進行測試,可能會因作業系統、...
在網站開發到一定程度,準備正式部署網站時,環境設定通常會與開發階段不同。因此會建議區分開發環境及正式環境,並各有自己的docker-compose.yml檔案,...
在前面Docker於正式部署時,有稍微提到Nginx服務,因此想針對Nginx進行簡單介紹。Nginx是一個高速輕量化的網頁伺服器,架設在網站入口,主要任務是將...
Git指令在多人協作的專案開發中,扮演了版本控制的核心角色,其重要性不言而喻。照理說,應該在前面的篇幅中提及,但Git指令在開發各階段,一直都有在使用,好像也不...