Lesson 3 Express 與 MongoDB 與與與與 By BigQ
Lesson 3 Express 與 MongoDB 連結應用
By BigQ
Content建立 Express 專案模板引擎介紹會員系統會員系統介面資料庫 --MongoDB註冊畫面註冊回應
建立 Express 專案我們可以透過之前介紹的 npm 安裝 express在終端輸入 npm install –g express
建立 Express 專案Express 在初始化一個專案的時候需要指定模板引擎,預設支援 Jade 與 ejs ,在這裡我們選用 ejs 。輸入下行指令。
建立 Express 專案
如同終端機顯示的提示,我們就照著做,看看會發生甚麼事。
建立 Express 專案自動安裝好 ejs 與 express 了 !! 為什麼呢 ?
因為 npm install 就是依專案的 package.json自動安裝相依套件。
建立 Express 專案
紀錄外部套件版本是很重要的 !!
模板引擎介紹有別於靜態 HTML ,模板引擎主要的功能就是建立一個 HTML 頁面模板,插入可執行的程式,執行時產生動態的 HTML 。
模板引擎介紹JavaScript
Express
<% code %> JavaScript 程式<%= code %> 取代過 HTML 特殊字元的內容<%- code%> 顯示原始 HTML 內容
會員系統
註冊 登入 登出
會員系統路由設計
修改 app.js 中的內容 / → 首頁/u/:user → 使用者頁面/post → 發表資訊/reg → 註冊/login → 登入/logout → 登出
會員系統路由設計
在 routes/index.js 中增加對應函數
會員系統介面介面設計 - 使用 Bootstrap
如果你也喜歡簡單風格的話,Twitter Bootstrap 是個好選擇。
會員系統介面設計 - 使用 Boostrap
會員系統介面介面設計 - 使用 Bootstrap
將 img 目錄複寫到 public 目錄下將 bootstrap.js 目等 .js 檔錄複放到 public/javascript 中將 bootstrap.css 等 .css 檔複製到 public/stylesheets 中
還需要下載一份最新版的 jQuerry.js放到 public/javascript 中。
會員系統介面修改 view/index.ejs
此為工具列的部分並結合我們一開始設計的路由規劃。
會員系統介面修改 view/index.ejs
Container為內容部分
Footer為頁尾部分
會員系統介面
前端設計輕鬆完成
會員系統
使用者的註冊與登入
哪些人是註冊會員
哪些人可以登入
資料庫 MongoDB
資料庫安裝存取資料庫 -MongoDB
到 MongoDB 的官方網站下載壓縮檔解壓縮出來的資料夾更名成 mongodb ,把這個資料夾移到 c 槽目錄下,讓路徑變成 c:\mongodb
再來,是要幫 MongoDB 設定放資料庫的地方MongoDB 預設會去找 c:\data\db 這個資料夾,請在 C 槽建立這個資料夾。
資料庫安裝存取資料庫 -MongoDB
到剛剛建立的 c:\mongodb\bin 資料夾裡,打開 mongod.exe 這樣就會啟動 MongoDB 的伺服器,這個時候,可以執行 mongo.exe 來連到 MongoDB 的伺服器進行操作 !
資料庫Node.js 連接 MongoDB
更改 package.json然後 npm install 更新相依模組
資料庫新增一個 Setting.js 在專案目錄中,用來連結資料庫。
cookieSecret 用於 Cookie 加密Db 為資料庫名稱Host 為資料庫位置
資料庫
在 midels 子目錄中建立 db.js 如下
做一個輸出建立與資料庫的連結
資料庫
Express 提供了一個中介軟體預設情況下是把使用者資訊儲存在記憶體中
我們既然安裝了 MongoDB就把資料存在資料庫裡吧 !
資料庫首先必須安裝 connect-mongo 這個模組
老方法, package.json 與 npm install 即可
資料庫在 app.js 中編修與增加以下內容
新增的 cookieParser() 是Cookie 解析的中介軟體
新增的 session() 設定他的參數為 MongoStore 實例,把資料
存到資料庫中。
註冊畫面
建立 views/reg.ejs
用 POST 的方式請求不然密碼不會被封起
最下面增加註冊連結
註冊畫面此表單分三種類型UsernamePasswordPassword-repeat
不能用錯 type不然密碼就會顯示
註冊畫面
十分清新的註冊畫面,看了就想註冊
註冊畫面
但現在按下註冊不會有任何事情發生
註冊畫面
因為還沒有處理 POST 請求後的回應。
在 routes/index.js 中增加 /reg 的 POST反應函數
註冊反應req.body 是 POST 請求資訊解析過後的物件。
req.flash 是 Express 提供的一個工具,經過他儲存的變數只會在使用者”現在”與“下一次”使用會被存取,之後會清除
註冊反應req.redirect 為重新導向功能通知瀏覽器導向對應頁面
Crypto 是 Nodejs的核心模組之一,透過他產生雜湊值。
使用前要先宣告提出 crypto 模組。
註冊反應User.get 可透過使用者名稱取得已知使用者,判斷使用者是否已經存在。
User.save 可以將使用者物件的修改寫入資料庫。
透過 req.session.user =newUser向階段物件寫入目前使用者的資訊。
註冊反應
我們剛剛一直使用的 User物件,是個描述資料的模型。
在 models 目錄中建立 user.js 的檔案,以實現 User 模型
註冊反應這頁與下頁的 code實現了兩個介面,User.prototype.save和 Uset.get
前者是物件實例的方法,將使用者物件的資料存到資料庫中。
註冊反應
Uset.get 是物件建構函數的方式,用於在資料庫中找到指定的使用者。
註冊簡易註冊系統完成了 !
註冊註冊結果