zoukankan      html  css  js  c++  java
  • 大熊君大话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),明天继续完成后续的功能,尽请期待。

              
                  哈哈哈,本篇结束,未完待续,希望和大家多多交流够沟通,共同进步。。。。。。呼呼呼……(*^__^*)             

  • 相关阅读:
    开源.net 混淆器ConfuserEx介绍
    k8s删除namespace失败,状态Terminating解决方案
    java get all threadlocal from thread
    mysql查看索引的大小
    InnoDB一定会在索引中加上主键吗?
    全链路追踪traceId,ThreadLocal与ExecutorService
    redis 批量删除keys
    shell逐行读取excel并执行sql
    Is it possible to create @Around Aspect for feign.Client
    Spring Boot后台启动不打印nohup.out
  • 原文地址:https://www.cnblogs.com/bigbearbb/p/4229444.html
Copyright © 2011-2022 走看看