2022-09-12|閱讀時間 ‧ 約 4 分鐘

學期2-3 : Week 3 To-do List:優化與部署 ORID

Objective

本週除了要繼續熟悉CRUD,也學到用Bootswatch優化Bootstrap結果及如何藉由RESTful API語意化的風格和建立總路由器來重構程式碼。很感謝教材的設計在實際帶我們走過一次todo-list後,還要求我們要再自己將CRUD用在餐廳資料庫,但這週的目標其實並不能說是百分之百完成,中秋連假不小心荒廢了兩天,然後重新了解各CRUD操作後面的MVC架構與重構路由器又花了太多時間,造成A8的作業遲交,Sort的dropdown雖然後來找到透過this.form.submit()可以做到選擇一改變,就重新排序,但尚無法變更呈現在dropdown上預設的字,這是還可以再改進的地方。

Reflective

這週在第一份作業上花了較多時間,記得要怎麼建立表格,但忘記應該要用post方法;記得方法,但疏忽的路由設定的位置;路由設定正確,要抓req.body的資料又一直抓不到,原來是忘了載入body-parser;抓到資料要res.render到handlebars的樣板又忘記要傳回抓到的物件。雖然第一次看教材針對助教提醒的地方都有特別注意,新功能也默默再腦海中想一次,但全部看完實際要完成作業時卻又是東漏西露,後來幾乎每個功能又再複習todo-list的教案一次。而且慶幸終於完成作業後,想不到還要重構程式碼來讓關注點分離,且這次還不是單純建立Models、views、controllers三個資料夾這個簡單,而是要藉由建立一個總router,來管理下面的modules、index.js, modules資料夾中再定義各自的路由要呈現的功能。以我這次專案為例,我定義了home.js主要存放一開始進入根目錄與透過關鍵字搜尋的畫面,還定義restaurant.js來存放新增餐廳、修改餐廳資料等CRUD功能。

Interpretive

這週最大的「位移」大概是對於寫程式如何做到關注點分離有了較清晰的思路。之前學過MVC的設計模式,但跟著教案完成todo-list的時候,看著app.js一下子要用require載入套件、一下子要用use設定中間軟體、一下子要連接資料庫,最後又要設定各路由的功能,全部都在app.js完成,在導入總路由器和新增config檔案儲存mongoose相關語法後,才讓app.js看起來一目了然,也可以在modules的資料夾看到所設計的網頁所有功能,讓日後自己甚至是同事在進行維護時,可以縮小關注的範圍,也發現到原來程式設計不僅是技術能力,對於網頁運作流程的瞭解也是會影響程式碼閱讀是否容易的重要因素。

Decisional

這週第一次將記得在地端的作品放到雲端,有種不現實的感覺,在學期三開始之前對於前端與後端是怎麼串接的都沒有概念,現在雖不敢說可以自己獨立完成作品,但至少可以在參考網路資源完成一個簡單的全端作品,也很期待下週的技術驗收可以完成一個產生短網址的作品。
分享至
成為作者繼續創作的動力吧!
© 2024 vocus All rights reserved.