czhtr 发表于 2017-2-22 13:03:27

大熊君大话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>密&nbsp;&nbsp;码:</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>密&nbsp;&nbsp;码:</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),明天继续完成后续的功能,尽请期待。
            
         哈哈哈,本篇结束,未完待续,希望和大家多多交流够沟通,共同进步。。。。。。呼呼呼……(*^__^*)      
页: [1]
查看完整版本: 大熊君大话NodeJS之------基于Connect中间件的小应用(Bigbear记事本应用之第一篇)