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

閱讀時間約 3 分鐘

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

這週第一次將記得在地端的作品放到雲端,有種不現實的感覺,在學期三開始之前對於前端與後端是怎麼串接的都沒有概念,現在雖不敢說可以自己獨立完成作品,但至少可以在參考網路資源完成一個簡單的全端作品,也很期待下週的技術驗收可以完成一個產生短網址的作品。
avatar-img
2會員
15內容數
紀錄轉職路上的點點滴滴
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Blockcyber的沙龍 的其他內容
OBJECTIVE 除了這些技術與見識的增加,與先前學習較大的差異,會強迫自己每週撰寫ORID學習筆記,並針對每週的作業,新增至少一個教材沒有提到的功能,訓練自己查資料並內化的能力。 REFLECTIVE INTERPRETIVE DECISIONAL
Objective 這週為自己設定為禮拜六完成所有課程,同時為兩個小作品「社群名單」、「電影清單」增加至少一個教材要求以外的小功能。 Reflective Interpretive S3 - A14 : 電影清單加碼功能 (codepen.io) Decisional
電影清單:前端體驗綜合實作 Objective Reflective Interpretive Decisional
Objective 因後面有幾個周末無法全空下時間學習,最近又因為專案開始進行常常會加班,為使課程可於期限內完成,為自己設定的目標就是在7/18學期2-2開始前至少完成一周的作業。現在看來至少是完成了最低的標準,並提前開始下週進度。 Reflective Interpretive
OBJECTIVE 除了這些技術與見識的增加,與先前學習較大的差異,會強迫自己每週撰寫ORID學習筆記,並針對每週的作業,新增至少一個教材沒有提到的功能,訓練自己查資料並內化的能力。 REFLECTIVE INTERPRETIVE DECISIONAL
Objective 這週為自己設定為禮拜六完成所有課程,同時為兩個小作品「社群名單」、「電影清單」增加至少一個教材要求以外的小功能。 Reflective Interpretive S3 - A14 : 電影清單加碼功能 (codepen.io) Decisional
電影清單:前端體驗綜合實作 Objective Reflective Interpretive Decisional
Objective 因後面有幾個周末無法全空下時間學習,最近又因為專案開始進行常常會加班,為使課程可於期限內完成,為自己設定的目標就是在7/18學期2-2開始前至少完成一周的作業。現在看來至少是完成了最低的標準,並提前開始下週進度。 Reflective Interpretive
你可能也想看
Google News 追蹤
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
近期一直在進行文件製作,在往返不斷溝通的過程中,看見當目標不明確時,就會不知道要往那個方向去,以致漫無目標,即使有文件名稱,也很難搞清楚內容應該寫些什麼,很多東西可以放進文件中,但又覺得食之無味、棄之可惜。 在過程中學習到,想要寫好這份文件,就要有目確的目標,不僅僅是文件名稱,也要知道文件是做什麼
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
第四步驟 :建立自己的任務管理系統 白話一點說,任務管理系統 = To Do List 說實話,我一直以為自己的工作內容算是單純,沒有特別想過要使用To Do List,後來拆解每天的代辦事項之後,驚覺於公、於私,每天超過30項代辦事項,但是神(ㄓㄨ)腦(ㄊㄡˊ)如我,想靠著好記性去記憶所有事情
目前開發目標-完善github 今日完成 1.房間設施圖片Room image model建立 2.上傳完專案操作說明影片 未完成 1​.Coupan機制 2.已瀏覽過項目清單、看過此項目的人同時也看過什麼商品 3.roomdetail和roomList清單同值性太像 4
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
近期一直在進行文件製作,在往返不斷溝通的過程中,看見當目標不明確時,就會不知道要往那個方向去,以致漫無目標,即使有文件名稱,也很難搞清楚內容應該寫些什麼,很多東西可以放進文件中,但又覺得食之無味、棄之可惜。 在過程中學習到,想要寫好這份文件,就要有目確的目標,不僅僅是文件名稱,也要知道文件是做什麼
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
第四步驟 :建立自己的任務管理系統 白話一點說,任務管理系統 = To Do List 說實話,我一直以為自己的工作內容算是單純,沒有特別想過要使用To Do List,後來拆解每天的代辦事項之後,驚覺於公、於私,每天超過30項代辦事項,但是神(ㄓㄨ)腦(ㄊㄡˊ)如我,想靠著好記性去記憶所有事情
目前開發目標-完善github 今日完成 1.房間設施圖片Room image model建立 2.上傳完專案操作說明影片 未完成 1​.Coupan機制 2.已瀏覽過項目清單、看過此項目的人同時也看過什麼商品 3.roomdetail和roomList清單同值性太像 4
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題