Upload
mark-ven
View
252
Download
2
Embed Size (px)
DESCRIPTION
『PVD+』團隊實習生: 許鈺群「BigQ」製作
Citation preview
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