學期2-3 : Week 2 To-do List:CRUD & Mongo DB ORID

閱讀時間約 3 分鐘

Objective

本周目標為順利完成資料庫的串接與運用路來熟悉資料庫CRUD的功能,同時再次複習除了連線資料庫以外,建立一個Express專案所需要的基本流程,包含從使用npm init -y初始化專案、安裝express、建立handlebars、到最後新增.gitignore檔案,將專案於本機進行版本控制。

Reflective

這周先利用密碼產生器讓我再熟悉一次express專案建立的流程,並學習如何透過<form>建立表單輸入的各種要求,在這階段與之前較大的差異是加上了POST這個http方法,由於透過GET來建立request時,會將傳送的資料顯示在網址列上,而一般我們在輸入input可能會有密碼、生日等個資,所以通常會改用POST這個方法。而值得注意的是,最後則要再注意使用POST請求,要解析待資料的req.body物件時,應該要使用body-parser這個套件,來處理表單前端所送出的資料。
此外,這周第二個重點則是透過To-do list清單來練習使用文件式資料庫。我們使用的文件式資料庫為MongoDB,然後透過JavaScript 撰寫Mongoose提供的語法,將其翻為可以操作資料庫的語法。其用到的CRUD操作有如下:
  • 透過.find()瀏覽所有資料
  • 透過.create()新增資料
  • 透過.findById()與params取得特定清單
  • 透過.findById()與.save()修改特定清單
  • 透過.findById()與.remove()刪除特定清單
最後教材會再透過流程圖顯示MVC架構各元件的溝通,也讓我可以更清楚再使用不同HTTP 方法與路由後會到輸出哪個樣板的畫面,比較特別的是,這次階段的學習也真正開始操作資料庫,也算是慢慢對網頁工程師整體的會用運的技術與架設網頁的流程有了最基本的認識。

Interpretive

踏入串接資料庫的步驟雖讓我自己覺得往成為工程師更靠近的一步,但其實第一步在連線資料庫的時候就遇到許多困難,因為抓不到環境變數一直無法找到鄭去的URI,對於這種不是因為程式邏輯上的挫折確實後來帶給我些學習上的阻力,覺得為什麼要花這麼多時間研究一個好像與自己技術能力沒什麼大多關聯的事物,且網路上的解決方式也跟教材預設差異較大,最後還是無法設定環境變數,而是直接在mongoose.connect()帶入原先取得的URI資訊,這是之後還需要修改的地方。


Decisional

第二周較有困難的學習在於環境變數的設定與MVC架構裡面controller、view、model之間的溝通,發現如果全部遮起來,就比較難透過自己的話說出修改前端畫面資料到寫入後端資料庫所經過的所有流程,覺得之後應該要花更多時間在於思考各元件之間是如何做串接,才會對在app.js輸入路由的各個動作與整體專案何時要新增partial template、哪個handlebars要更改架構、到整體專案接到請求到送出回應的流程更為熟悉。
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
※ 具備三項工具: 編輯器 終端機 瀏覽器 ※ 步驟一:建立資料夾 mkdir mongodb-demo cd mongodb-demo code . ※ 步驟二:初始化,建立package.json npm init -y ※ 步驟三:安裝網頁伺服器 – Express 因為
Thumbnail
※建置 MongoDB 資料庫,可以有兩種方式: 上 MongoDB 官網,把 MongoDB 的軟體下載下來,在本地安裝資料庫。 使用 MongoDB Atlas,這是 MongoDB 官方提供的全球雲端文件資料庫服務。 兩者的功能和操作上是相同的,在本地安裝與啟動資料庫會有連線速度上的優勢
Thumbnail
※ Schema Design 小測驗 ● 測驗一:電商平台是後端開發最基本的例子 幫電商平台設計一個SQL Database Schema,需要保存商品資料、顧客資料、訂單資料… 輔助設計Schema的工具: https://drawsql.app 優點: 網頁版,方便使用。 功能
Thumbnail
MongoDB 是一個靈活的 NoSQL 資料庫,這篇文章將帶你了解如何在 Node.js 中操作MongoDB 資料庫,包括基本連接、CRUD操作,以及如何使用 Mongoose ODM 來簡化資料庫操作。
今天學習Git 的第一步: 取得與建立項目 Getting and Creating Projects [1]。 之前提到「儲存庫 Repository」就是儲存所有「檔案 File」的地方。 在Git 的邏輯裡,儲存庫是要儲存所有的「快照 Snapshots」。 什麼是快照
Thumbnail
這篇文章介紹了面試時以及開始工作後可能會遇到的問題,包括物件導向OOP、SOLID 設計原則、測試方式,以及 Cookie、Session 與 Cache 的相似處與不同處。提供了豐富的相關資訊。
儲存庫 (Repository) 是檔案(File)的儲存區域。 在版本控制中,儲存庫是包含所有檔案的資料夾[1]。 每次改動檔案,你都可以選擇要不要儲存。 而那些有被處存的改動,就被稱為「提交 Commit」[2]。 而當一個儲存庫有多個開發者(Developer)在貢獻,
Thumbnail
在進行Electron 專案時,後端夥伴選擇將 sqlite 資料庫跟專案檔打包成一個執行檔。在開發過程中,前端的操作經常會更動到 db的資料,此時 Git 就會追蹤到 db 的變化,因此前端在推送檔案到遠端 repo 前,會需要將其移出 Git 追蹤範圍,該怎麼做?
※ Express 專案步驟筆記清單 Node.js 環境建置核對 新增專案資料夾 設定 package.json npm init -y 設定程式入口為 app.js 安裝 Express:npm install express 設定主程式 app.js 建構應用程式伺服器 設定
Thumbnail
※ 基本操作:SQL 語法,SELECT, WHERE, CREATE, UPDATE, DELETE。 SELECT:從資料庫中或資料表中指定要選擇的欄位中取得資料,稱之為查詢 (query)。 ※ 語法:要由兩部分構成,第一部分是要 "拿什麼" 資料 (若有多項用逗號隔開);第二部分則為
Thumbnail
※ 具備三項工具: 編輯器 終端機 瀏覽器 ※ 步驟一:建立資料夾 mkdir mongodb-demo cd mongodb-demo code . ※ 步驟二:初始化,建立package.json npm init -y ※ 步驟三:安裝網頁伺服器 – Express 因為
Thumbnail
※建置 MongoDB 資料庫,可以有兩種方式: 上 MongoDB 官網,把 MongoDB 的軟體下載下來,在本地安裝資料庫。 使用 MongoDB Atlas,這是 MongoDB 官方提供的全球雲端文件資料庫服務。 兩者的功能和操作上是相同的,在本地安裝與啟動資料庫會有連線速度上的優勢
Thumbnail
※ Schema Design 小測驗 ● 測驗一:電商平台是後端開發最基本的例子 幫電商平台設計一個SQL Database Schema,需要保存商品資料、顧客資料、訂單資料… 輔助設計Schema的工具: https://drawsql.app 優點: 網頁版,方便使用。 功能
Thumbnail
MongoDB 是一個靈活的 NoSQL 資料庫,這篇文章將帶你了解如何在 Node.js 中操作MongoDB 資料庫,包括基本連接、CRUD操作,以及如何使用 Mongoose ODM 來簡化資料庫操作。
今天學習Git 的第一步: 取得與建立項目 Getting and Creating Projects [1]。 之前提到「儲存庫 Repository」就是儲存所有「檔案 File」的地方。 在Git 的邏輯裡,儲存庫是要儲存所有的「快照 Snapshots」。 什麼是快照
Thumbnail
這篇文章介紹了面試時以及開始工作後可能會遇到的問題,包括物件導向OOP、SOLID 設計原則、測試方式,以及 Cookie、Session 與 Cache 的相似處與不同處。提供了豐富的相關資訊。
儲存庫 (Repository) 是檔案(File)的儲存區域。 在版本控制中,儲存庫是包含所有檔案的資料夾[1]。 每次改動檔案,你都可以選擇要不要儲存。 而那些有被處存的改動,就被稱為「提交 Commit」[2]。 而當一個儲存庫有多個開發者(Developer)在貢獻,
Thumbnail
在進行Electron 專案時,後端夥伴選擇將 sqlite 資料庫跟專案檔打包成一個執行檔。在開發過程中,前端的操作經常會更動到 db的資料,此時 Git 就會追蹤到 db 的變化,因此前端在推送檔案到遠端 repo 前,會需要將其移出 Git 追蹤範圍,該怎麼做?
※ Express 專案步驟筆記清單 Node.js 環境建置核對 新增專案資料夾 設定 package.json npm init -y 設定程式入口為 app.js 安裝 Express:npm install express 設定主程式 app.js 建構應用程式伺服器 設定
Thumbnail
※ 基本操作:SQL 語法,SELECT, WHERE, CREATE, UPDATE, DELETE。 SELECT:從資料庫中或資料表中指定要選擇的欄位中取得資料,稱之為查詢 (query)。 ※ 語法:要由兩部分構成,第一部分是要 "拿什麼" 資料 (若有多項用逗號隔開);第二部分則為