首页 > 代码库 > 大熊君大话NodeJS之------基于Connect中间件的小应用（Bigbear记事本应用之第一篇）
大熊君大话NodeJS之------基于Connect中间件的小应用（Bigbear记事本应用之第一篇）
一，开篇分析
大家好哦，大熊君又来了，昨天因为有点个人的事没有写博客，今天又出来了一篇，这篇主要是写一个记事本的小应用，前面的文章，
我也介绍过“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 : true10 },function(error,collection){11 if(error) return conn.close() ;12 collection.findOne({ // 判断此用户是否存在13 name : that.name14 },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 : true22 },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 : true37 },function(error,collection){38 if(error) return conn.close() ;39 collection.findOne({40 name : name ,41 password : password42 },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 : password29 }).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），明天继续完成后续的功能，尽请期待。
哈哈哈，本篇结束，未完待续，希望和大家多多交流够沟通，共同进步。。。。。。呼呼呼……(*^__^*)
大熊君大话NodeJS之------基于Connect中间件的小应用（Bigbear记事本应用之第一篇）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。