一，開篇分析
大家好哦，大熊君又來了，昨天因為有點個人的事沒有寫博客，今天又出來了一篇，這篇主要是寫一個記事本的小應用，前面的文章，
我也介紹過“Connect”中間件的使用以及“Mongodb”的用法，今天就結合這兩個中間件，寫個實際的例子，不斷完善和重構，已達到
充分學習的目的。好了，廢話不說了，直接進入主題。
二，需求分析
（1），用戶注冊，登錄功能（沒有涉及很復雜的交互場景，注冊時會有用戶判斷是否已存在）。
（2），用戶登錄成功，進入筆記管理系統的后台（筆記模塊的增刪改查功能）。
（3），用戶可以具有簡單的權限划分（管理員，注冊用戶）。
（4），界面比較簡單，以學習為主。
三，開始設計應用（第一部分）
(1)，建立用戶登錄頁面，代碼如下：
1 <!doctype html> 2 <html> 3 <head> 4 <title>Bigbear記事本應用登錄</title> 5 <meta content="IE=8" http-equiv="X-UA-Compatible"/> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <style type="text/css"> 8 .note-title { 9 margin-bottom : 45px ; 10 background : #6699cc ; 11 font-size : 14px ; 12 font-weight : bold ; 13 color : #fff; 14 font-family:arial ; 15 height : 24px ; 16 line-height : 24px ; 17 } 18 a { 19 color : #336699; 20 font-family:arial ; 21 font-size : 14px ; 22 font-weight : bold ; 23 } 24 </style> 25 <script src="js/index.js"></script> 26 </head> 27 <body> 28 <div class="note-title">Bigbear記事本應用登錄</div> 29 <form action="/login" method="post"> 30 <span>用戶名：</span><input type="text" name="name" /><br/><br/> 31 <span>密 碼：</span><input type="password" name="password" /> 32 <input type="submit" value="登錄" /> 33 <a href="reg.html">我要注冊</a> 34 </form> 35 </body> 36 </html>
效果圖：
（2），建立用戶注冊頁面，代碼如下：
1 <!doctype html> 2 <html> 3 <head> 4 <title>Bigbear記事本應用注冊</title> 5 <meta content="IE=8" http-equiv="X-UA-Compatible"/> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <style type="text/css"> 8 .note-title { 9 margin-bottom : 45px ; 10 background : #ff3300 ; 11 font-size : 14px ; 12 font-weight : bold ; 13 color : #fff; 14 font-family:arial ; 15 height : 24px ; 16 line-height : 24px ; 17 } 18 </style> 19 <script src="js/index.js"></script> 20 </head> 21 <body> 22 <div class="note-title">Bigbear記事本應用注冊</div> 23 <form action="/reg" method="post"> 24 <span>用戶名：</span><input type="text" name="name" /><br/><br/> 25 <span>密 碼：</span><input type="password" name="password" /><br/><br/> 26 <input type="submit" value="注冊" /> 27 </form> 28 </body> 29 </html>
效果圖：
（3），建立“Mongodb”連接代碼，如下：
1 var mongodb = require("mongodb") ; 2 var server = new mongodb.Server("localhost",27017,{ 3 auto_reconnect : true 4 }) ; 5 var conn = new mongodb.Db("bb",server,{ 6 safe : true 7 }) ; 8 conn.open(function(error,db){ 9 if(error) throw error ; 10 console.info("mongodb connected !") ; 11 }) ; 12 exports = module.exports = conn ;
（4），建立模型實體類“User”，如下：
1 var conn = require("../conn") ; 2 function User(user){ 3 this.name = user["name"] ; 4 this.password = user["password"] ; 5 } ; 6 User.prototype.save = function(callback){ 7 var that = this ; 8 conn.collection("users",{ 9 safe : true 10 },function(error,collection){ 11 if(error) return conn.close() ; 12 collection.findOne({ // 判斷此用戶是否存在 13 name : that.name 14 },function(error,user){ 15 if(error) return conn.close() ; 16 if(!user){ 17 collection.insert({ 18 name : that.name + "" , 19 password : that.password + "" 20 },{ 21 safe : true 22 },function(error,user){ 23 if(error) return conn.close() ; 24 callback && callback(user) ; 25 conn.close() ; 26 }) ; 27 } 28 else{ 29 callback("User has registed !") ; 30 } 31 }) ; 32 }) ; 33 } ; 34 User.login = function(name,password,callback){ 35 conn.collection("users",{ 36 safe : true 37 },function(error,collection){ 38 if(error) return conn.close() ; 39 collection.findOne({ 40 name : name , 41 password : password 42 },function(error,user){ 43 if(error) return conn.close() ; 44 callback && callback(user) ; 45 conn.close() ; 46 }) ; 47 }) ; 48 } ; 49 exports = module.exports = User ;
效果圖：
（5），建立應用程序“app”,如下：
1 // app.js 2 var connect = require("./lib/connect") ; 3 var user = require("./models/user") ; 4 var app = connect.createServer() ; 5 app .use(connect.logger("dev")) 6 .use(connect.query()) 7 .use(connect.bodyParser()) 8 .use(connect.cookieParser()) 9 .use(connect.static(__dirname + "/views")) 10 .use(connect.static(__dirname + "/public")) 11 .use("/login",function(request,response,next){ 12 var name = request.body["name"] ; 13 var password = request.body["password"] ; 14 user.login(name,password,function(user){ 15 if(user){ 16 response.end("Welcome to:" + user["name"] + " ^_^ ... ...") ; 17 } 18 else{ 19 response.end("User:" + name + " Not Register !") ; 20 } 21 }) ; 22 }) 23 .use("/reg",function(request,response,next){ 24 var name = request.body["name"] ; 25 var password = request.body["password"] ; 26 new user({ 27 name : name , 28 password : password 29 }).save(function(user){ 30 if(user && user["name"]){ 31 response.end("User:" + name + "Register Done !") ; 32 } 33 else{ 34 response.end("User: " + name + "has registed !") ; 35 } 36 }) ; 37 }) 38 .listen(8888,function(){ 39 console.log("Web Server Running On Port ---> 8888 .") ; 40 }) ;
說明一下：
（1）“connect.query()”------處理“Get”請求參數解析。
（2）“connect.bodyParser()”------處理“Post”請求參數解析。
（3）“connect.static(__dirname + "/views")，connect.static(__dirname + "/public")”
分別代表模板視圖“html”以及靜態資源如“js，css,jpg,gif”的資源目錄。
以下是這個應用的目錄結構：
四，總結一下
（1），掌握NodeJs操作數據庫的基本操作語句。
（2），划分層級，如模型，視圖，路由。
（3），不斷優化和修改本文的例子（比如注冊驗證用戶是否存在，可以獨立出“UserManager”做一層代理完成用戶驗證和保存的動作）。
（4），明天繼續完成后續的功能，盡請期待。
哈哈哈，本篇結束，未完待續，希望和大家多多交流夠溝通，共同進步。。。。。。呼呼呼……(*^__^*)