NodeJS學(xué)習(xí)筆記之Connect中間件應(yīng)用實(shí)例

更新時(shí)間：2015年01月27日 16:03:35 投稿：hebedich

前面我們介紹了幾篇內(nèi)容的connect中間件的基礎(chǔ)知識(shí)，今天我們來(lái)實(shí)例應(yīng)用一下，做個(gè)記事本的小應(yīng)用，希望大家能夠喜歡。

一，開篇分析

大家好哦，大熊君又來(lái)了，昨天因?yàn)橛悬c(diǎn)個(gè)人的事沒有寫博客，今天又出來(lái)了一篇，這篇主要是寫一個(gè)記事本的小應(yīng)用，前面的文章，

我也介紹過“Connect”中間件的使用以及“Mongodb”的用法，今天就結(jié)合這兩個(gè)中間件，寫個(gè)實(shí)際的例子，不斷完善和重構(gòu)，已達(dá)到

充分學(xué)習(xí)的目的。好了，廢話不說(shuō)了，直接進(jìn)入主題。

二，需求分析

（1），用戶注冊(cè)，登錄功能（沒有涉及很復(fù)雜的交互場(chǎng)景，注冊(cè)時(shí)會(huì)有用戶判斷是否已存在）。

（2），用戶登錄成功，進(jìn)入筆記管理系統(tǒng)的后臺(tái)（筆記模塊的增刪改查功能）。

（3），用戶可以具有簡(jiǎn)單的權(quán)限劃分（管理員，注冊(cè)用戶）。

（4），界面比較簡(jiǎn)單，以學(xué)習(xí)為主。

三，開始設(shè)計(jì)應(yīng)用（第一部分）

(1)，建立用戶登錄頁(yè)面，代碼如下：

復(fù)制代碼代碼如下:

<!doctype html>

<html>

    <head>

        <title>Bigbear記事本應(yīng)用登錄</title>

        <meta content="IE=8" http-equiv="X-UA-Compatible"/>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <style type="text/css">

            .note-title {

                margin-bottom : 45px ;

                background : #6699cc ;

                font-size : 14px ;

                font-weight : bold ;

                color : #fff;

                font-family:arial ;

                height : 24px ;

                line-height : 24px ;

            }

            a {

                color : #336699;

                font-family:arial ;

                font-size : 14px ;

                font-weight : bold ;

            }

        </style>

        <script src="js/index.js"></script>

    </head>

    <body>

        <div class="note-title">Bigbear記事本應(yīng)用登錄</div>

            <form action="/login" method="post">

                <span>用戶名：</span><input type="text" name="name" /><br/><br/>

                <span>密&nbsp;&nbsp;碼：</span><input type="password" name="password" />

                <input type="submit" value="登錄" />

                <a href="reg.html">我要注冊(cè)</a>

            </form>

    </body>

</html>

　　效果圖：

（2），建立用戶注冊(cè)頁(yè)面，代碼如下：

復(fù)制代碼代碼如下:

 <!doctype html>

 <html>

     <head>

         <title>Bigbear記事本應(yīng)用注冊(cè)</title>

         <meta content="IE=8" http-equiv="X-UA-Compatible"/>

         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

         <style type="text/css">

             .note-title {

                 margin-bottom : 45px ;

                 background : #ff3300 ;

                 font-size : 14px ;

                 font-weight : bold ;

                 color : #fff;

                 font-family:arial ;

                 height : 24px ;

                 line-height : 24px ;

             }

         </style>

         <script src="js/index.js"></script>

     </head>

     <body>

         <div class="note-title">Bigbear記事本應(yīng)用注冊(cè)</div>

             <form action="/reg" method="post">

                 <span>用戶名：</span><input type="text" name="name" /><br/><br/>

                 <span>密&nbsp;&nbsp;碼：</span><input type="password" name="password" /><br/><br/>

                 <input type="submit" value="注冊(cè)" />

             </form>

     </body>

 </html>

　　效果圖：

（3），建立“Mongodb”連接代碼，如下：

復(fù)制代碼代碼如下:

 var mongodb = require("mongodb") ;

 var server = new mongodb.Server("localhost",27017,{

     auto_reconnect : true

 }) ;

 var conn = new mongodb.Db("bb",server,{

     safe : true

 }) ;

 conn.open(function(error,db){

     if(error) throw error ;

     console.info("mongodb connected !") ;

 }) ;

 exports = module.exports = conn ;

（4），建立模型實(shí)體類“User”，如下：

復(fù)制代碼代碼如下:

 var conn = require("../conn") ;

 function User(user){

     this.name = user["name"] ;

     this.password = user["password"] ;

 } ;

 User.prototype.save = function(callback){

     var that = this ;

     conn.collection("users",{

         safe : true

     },function(error,collection){

         if(error) return conn.close() ;

         collection.findOne({   // 判斷此用戶是否存在

             name : that.name

         },function(error,user){

             if(error) return conn.close() ;

             if(!user){

                 collection.insert({

                     name : that.name + "" ,

                     password : that.password + ""

                 },{

                     safe : true

                 },function(error,user){

                     if(error) return conn.close() ;

                     callback && callback(user) ;

                     conn.close() ;

                 }) ;        

             }

             else{

                 callback("User has registed !") ;

             }

         }) ; 

     }) ;

 } ;

 User.login = function(name,password,callback){

     conn.collection("users",{

         safe : true

     },function(error,collection){

         if(error) return conn.close() ;

         collection.findOne({

             name : name ,

             password : password

         },function(error,user){

             if(error) return conn.close() ;

             callback && callback(user) ;

             conn.close() ;

         }) ; 

     }) ;

 } ;

 exports = module.exports = User ;

　　效果圖：

（5），建立應(yīng)用程序“app”,如下：

復(fù)制代碼代碼如下:

 // app.js

 var connect = require("./lib/connect") ;

 var user = require("./models/user") ;

 var app = connect.createServer() ;

 app .use(connect.logger("dev"))

 .use(connect.query())

 .use(connect.bodyParser())

 .use(connect.cookieParser())

 .use(connect.static(__dirname + "/views"))

 .use(connect.static(__dirname + "/public"))

 .use("/login",function(request,response,next){

     var name = request.body["name"] ;

     var password = request.body["password"] ;

     user.login(name,password,function(user){

         if(user){

             response.end("Welcome to:" + user["name"] + " ^_^ ... ...") ;    

         }

         else{

             response.end("User:" + name + " Not Register !")    ;

         }

     }) ;

 })

 .use("/reg",function(request,response,next){

     var name = request.body["name"] ;

     var password = request.body["password"] ;

     new user({

         name : name ,

         password : password

     }).save(function(user){

         if(user && user["name"]){

         　　response.end("User:" + name + "Register Done !")    ;    

         }

         else{

         　　response.end("User: " + name + "has registed !") ;  

         }

     }) ;

 })

 .listen(8888,function(){

     console.log("Web Server Running On Port ---> 8888 .") ;

 }) ;