nodejs -『PVD+』團隊內部Lesson4

Lesson 4 Express + Mongoose

By BigQ

Content環境設定

Todo List

ExpressMongoDB Mongoose

C.R.U.D

環境設定依照慣例，先設立一個 Express專案方便我們使用。

從 npm套件之中安裝 Express。

Project Name: “list”.

環境設定

環境設定

layout

Express 2.x Express 3.x

ejs-locals

express-partials

環境設定Express 3.x

ejs-locals

在 view根目錄下新增 layout.ejs

環境設定

環境設定

環境設定

環境設定

環境設定在根目錄下新增一個檔案叫做  db.js 來設定 Mongoose 和定義  Schema

環境設定在 app.js中

require mongoose

並且定義與實現Ejs模板引擎

來支援 layout模板

環境設定更改 index.js中的專案名稱

環境設定

Todo List

四項基本資料庫操作C.R.U.D

CreateRead

UpdateDelete

Todo List Create

我們需要一個可以輸入資料的地方

Todo List Create

加入一個吃 text的 form資料傳輸方式用 post

輸入的資料將傳到Router中的 create

Todo List Create

Todo List Create

呼叫出mongoose與 Todo這兩個models

Exports “create”為一筆資料庫中的資料

完成後直接導向首頁

Todo List Create

在 app.js中加入這行讓 Express可以解析POST傳來的資料

Routes 中增加 /create並且執行剛剛的 create

Todo List Create

馬上來試試看 !!!!

Todo List Create

甚麼事都不會發生……

那我們現在馬上拿出資料庫中的資料 !

Todo List Read

在 index.js中修改 index匯出的內容

因為我們要取出資料庫中的東西

Todo List Read

Index.ejs

在下方列出資料

Todo List Read

我們幾乎完成這個 todolist了 !!!!

可是剛剛在試 create的時候留下的資料好礙眼，可以更改嗎 ?

Todo List Update

在 index.ejs中做一個 edit的連結

資料庫中的 ID

Todo List Update

如果我們呼叫的資料 ID跟資料庫相符則可以 update新內容

沒有被呼叫的內容依然可以點選 edit編輯內容

新增一個 edit.ejs為編輯頁

Todo List Update

在 index.js中對 update定義並匯出讓 edit.ejs中的事件實行

Todo List Update

也別忘了更新 routesEdit.ejs中的 update我們是用 POST方法

Todo List Update

Update

Todo List Update

不符事實 ?

Todo List Delete

如同增加 edit， index.ejs中我們在文字旁再增加一個 delete連

結

Todo List Delete

有點像 export.update但現在動作為 remove

不要定義 export.delete

Todo List Delete

在 app.js的 routes中設定路徑並執行remove如果用 export.delete的話…無法

Todo List

Todo List 完成 !!!

Todo List

Todo List

你寫的這支 Program不只是一堆 code

更是正在記錄你的成長

Thanks for listening