Top Banner
Lesson 3 Express 與 MongoDB 與與與與 By BigQ
40

nodejs -『PVD+』團隊內部Lesson3

May 24, 2015

Download

Technology

Mark Ven

『PVD+』實習生 許鈺群「BigQ」製作
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: nodejs -『PVD+』團隊內部Lesson3

Lesson 3 Express 與 MongoDB 連結應用

By BigQ

Page 2: nodejs -『PVD+』團隊內部Lesson3

Content建立 Express 專案模板引擎介紹會員系統會員系統介面資料庫 --MongoDB註冊畫面註冊回應

Page 3: nodejs -『PVD+』團隊內部Lesson3

建立 Express 專案我們可以透過之前介紹的 npm 安裝 express在終端輸入 npm install –g express

Page 4: nodejs -『PVD+』團隊內部Lesson3

建立 Express 專案Express 在初始化一個專案的時候需要指定模板引擎,預設支援 Jade 與 ejs ,在這裡我們選用 ejs 。輸入下行指令。

Page 5: nodejs -『PVD+』團隊內部Lesson3

建立 Express 專案

如同終端機顯示的提示,我們就照著做,看看會發生甚麼事。

Page 6: nodejs -『PVD+』團隊內部Lesson3

建立 Express 專案自動安裝好 ejs 與 express 了 !! 為什麼呢 ?

因為 npm install 就是依專案的 package.json自動安裝相依套件。

Page 7: nodejs -『PVD+』團隊內部Lesson3

建立 Express 專案

紀錄外部套件版本是很重要的 !!

Page 8: nodejs -『PVD+』團隊內部Lesson3

模板引擎介紹有別於靜態 HTML ,模板引擎主要的功能就是建立一個 HTML 頁面模板,插入可執行的程式,執行時產生動態的 HTML 。

Page 9: nodejs -『PVD+』團隊內部Lesson3

模板引擎介紹JavaScript

Express

<% code %> JavaScript 程式<%= code %> 取代過 HTML 特殊字元的內容<%- code%> 顯示原始 HTML 內容

Page 10: nodejs -『PVD+』團隊內部Lesson3

會員系統

註冊 登入 登出

Page 11: nodejs -『PVD+』團隊內部Lesson3

會員系統路由設計

修改 app.js 中的內容 / → 首頁/u/:user → 使用者頁面/post → 發表資訊/reg → 註冊/login → 登入/logout → 登出

Page 12: nodejs -『PVD+』團隊內部Lesson3

會員系統路由設計

在 routes/index.js 中增加對應函數

Page 13: nodejs -『PVD+』團隊內部Lesson3

會員系統介面介面設計 - 使用 Bootstrap

如果你也喜歡簡單風格的話,Twitter Bootstrap 是個好選擇。

Page 14: nodejs -『PVD+』團隊內部Lesson3

會員系統介面設計 - 使用 Boostrap

Page 15: nodejs -『PVD+』團隊內部Lesson3

會員系統介面介面設計 - 使用 Bootstrap

將 img 目錄複寫到 public 目錄下將 bootstrap.js 目等 .js 檔錄複放到 public/javascript 中將 bootstrap.css 等 .css 檔複製到 public/stylesheets 中

還需要下載一份最新版的 jQuerry.js放到 public/javascript 中。

Page 16: nodejs -『PVD+』團隊內部Lesson3

會員系統介面修改 view/index.ejs

此為工具列的部分並結合我們一開始設計的路由規劃。

Page 17: nodejs -『PVD+』團隊內部Lesson3

會員系統介面修改 view/index.ejs

Container為內容部分

Footer為頁尾部分

Page 18: nodejs -『PVD+』團隊內部Lesson3

會員系統介面

前端設計輕鬆完成

Page 19: nodejs -『PVD+』團隊內部Lesson3

會員系統

使用者的註冊與登入

哪些人是註冊會員

哪些人可以登入

資料庫 MongoDB

Page 20: nodejs -『PVD+』團隊內部Lesson3

資料庫安裝存取資料庫 -MongoDB

到 MongoDB 的官方網站下載壓縮檔解壓縮出來的資料夾更名成 mongodb ,把這個資料夾移到 c 槽目錄下,讓路徑變成 c:\mongodb

再來,是要幫 MongoDB 設定放資料庫的地方MongoDB 預設會去找 c:\data\db 這個資料夾,請在 C 槽建立這個資料夾。

Page 21: nodejs -『PVD+』團隊內部Lesson3

資料庫安裝存取資料庫 -MongoDB

到剛剛建立的 c:\mongodb\bin 資料夾裡,打開 mongod.exe 這樣就會啟動 MongoDB 的伺服器,這個時候,可以執行 mongo.exe 來連到 MongoDB 的伺服器進行操作 !

Page 22: nodejs -『PVD+』團隊內部Lesson3

資料庫Node.js 連接 MongoDB

更改 package.json然後 npm install 更新相依模組

Page 23: nodejs -『PVD+』團隊內部Lesson3

資料庫新增一個 Setting.js 在專案目錄中,用來連結資料庫。

cookieSecret 用於 Cookie 加密Db 為資料庫名稱Host 為資料庫位置

Page 24: nodejs -『PVD+』團隊內部Lesson3

資料庫

在 midels 子目錄中建立 db.js 如下

做一個輸出建立與資料庫的連結

Page 25: nodejs -『PVD+』團隊內部Lesson3

資料庫

Express 提供了一個中介軟體預設情況下是把使用者資訊儲存在記憶體中

我們既然安裝了 MongoDB就把資料存在資料庫裡吧 !

Page 26: nodejs -『PVD+』團隊內部Lesson3

資料庫首先必須安裝 connect-mongo 這個模組

老方法, package.json 與 npm install 即可

Page 27: nodejs -『PVD+』團隊內部Lesson3

資料庫在 app.js 中編修與增加以下內容

新增的 cookieParser() 是Cookie 解析的中介軟體

新增的 session() 設定他的參數為 MongoStore 實例,把資料

存到資料庫中。

Page 28: nodejs -『PVD+』團隊內部Lesson3

註冊畫面

建立 views/reg.ejs

用 POST 的方式請求不然密碼不會被封起

最下面增加註冊連結

Page 29: nodejs -『PVD+』團隊內部Lesson3

註冊畫面此表單分三種類型UsernamePasswordPassword-repeat

不能用錯 type不然密碼就會顯示

Page 30: nodejs -『PVD+』團隊內部Lesson3

註冊畫面

十分清新的註冊畫面,看了就想註冊

Page 31: nodejs -『PVD+』團隊內部Lesson3

註冊畫面

但現在按下註冊不會有任何事情發生

Page 32: nodejs -『PVD+』團隊內部Lesson3

註冊畫面

因為還沒有處理 POST 請求後的回應。

在 routes/index.js 中增加 /reg 的 POST反應函數

Page 33: nodejs -『PVD+』團隊內部Lesson3

註冊反應req.body 是 POST 請求資訊解析過後的物件。

req.flash 是 Express 提供的一個工具,經過他儲存的變數只會在使用者”現在”與“下一次”使用會被存取,之後會清除

Page 34: nodejs -『PVD+』團隊內部Lesson3

註冊反應req.redirect 為重新導向功能通知瀏覽器導向對應頁面

Crypto 是 Nodejs的核心模組之一,透過他產生雜湊值。

使用前要先宣告提出 crypto 模組。

Page 35: nodejs -『PVD+』團隊內部Lesson3

註冊反應User.get 可透過使用者名稱取得已知使用者,判斷使用者是否已經存在。

User.save 可以將使用者物件的修改寫入資料庫。

透過 req.session.user =newUser向階段物件寫入目前使用者的資訊。

Page 36: nodejs -『PVD+』團隊內部Lesson3

註冊反應

我們剛剛一直使用的 User物件,是個描述資料的模型。

在 models 目錄中建立 user.js 的檔案,以實現 User 模型

Page 37: nodejs -『PVD+』團隊內部Lesson3

註冊反應這頁與下頁的 code實現了兩個介面,User.prototype.save和 Uset.get

前者是物件實例的方法,將使用者物件的資料存到資料庫中。

Page 38: nodejs -『PVD+』團隊內部Lesson3

註冊反應

Uset.get 是物件建構函數的方式,用於在資料庫中找到指定的使用者。

Page 39: nodejs -『PVD+』團隊內部Lesson3

註冊簡易註冊系統完成了 !

Page 40: nodejs -『PVD+』團隊內部Lesson3

註冊註冊結果