一,开篇分析

大家好哦,大熊君又来了,昨天因为有点个人的事没有写博客,今天又出来了一篇,这篇主要是写一个记事本的小应用,前面的文章,

我也介绍过“Connect”中间件的使用以及“Mongodb”的用法,今天就结合这两个中间件,写个实际的例子,不断完善和重构,已达到

充分学习的目的。好了,废话不说了,直接进入主题。

二,需求分析

(1),用户注册,登录功能(没有涉及很复杂的交互场景,注册时会有用户判断是否已存在)。

(2),用户登录成功,进入笔记管理系统的后台(笔记模块的增删改查功能)。

(3),用户可以具有简单的权限划分(管理员,注册用户)。

(4),界面比较简单,以学习为主。

三,开始设计应用(第一部分)

(1),建立用户登录页面,代码如下:

复制代码代码如下:
<!doctype html>
<html>
    <head>
        <title>Bigbear记事本应用登录</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记事本应用登录</div>
            <form action="/login" method="post">
                <span>用户名:</span><input type="text" name="name" /><br/><br/>
                <span>密  码:</span><input type="password" name="password" />
                <input type="submit" value="登录" />
                <a href="reg.html">我要注册</a>
            </form>
    </body>
</html>

  效果图:

(2),建立用户注册页面,代码如下:

复制代码代码如下:
 <!doctype html>
 <html>
     <head>
         <title>Bigbear记事本应用注册</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记事本应用注册</div>
             <form action="/reg" method="post">
                 <span>用户名:</span><input type="text" name="name" /><br/><br/>
                 <span>密  码:</span><input type="password" name="password" /><br/><br/>
                 <input type="submit" value="注册" />
             </form>
     </body>
 </html>

  效果图:

(3),建立“Mongodb”连接代码,如下:

复制代码代码如下:
 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),建立模型实体类“User”,如下:

复制代码代码如下:
 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),建立应用程序“app”,如下:

复制代码代码如下:
 // 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 .") ;
 }) ;

  说明一下:

    (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中间件应用实例的更多相关文章

  1. NodeJS学习笔记之Connect中间件模块(一)

    NodeJS学习笔记之Connect中间件模块(一) http://www.jb51.net/article/60430.htm NodeJS学习笔记之Connect中间件模块(二) http://w ...

  2. NodeJS学习笔记之Connect中间件模块(二)

    一,开篇分析 大家好,今天这篇文章主要是对"Connect"中间件以及相关辅助中间件,做一个源码分析系列,我想上一篇文章大家也看了, 介绍了使用方式及用途,而这篇也是出于本人的兴趣 ...

  3. Nodejs学习笔记(六)--- Node.js + Express 构建网站预备知识

    目录 前言 新建express项目并自定义路由规则 如何提取页面中的公共部分? 如何提交表单并接收参数? GET 方式 POST 方式 如何字符串加密? 如何使用session? 如何使用cookie ...

  4. Nodejs学习笔记(六)—Node.js + Express 构建网站预备知识

    前言 前面经过五篇Node.js的学习,基本可以开始动手构建一个网站应用了,先用这一篇了解一些构建网站的知识! 主要是些基础的东西... 如何去创建路由规则.如何去提交表单并接收表单项的值.如何去给密 ...

  5. Nodejs学习笔记(四)——支持Mongodb

    前言:回顾前面零零碎碎写的三篇挂着Nodejs学习笔记的文章,着实有点名不副实,当然,这篇可能还是要继续走着离主线越走越远的路子,从简短的介绍什么是Nodejs,到如何寻找一个可以调试的Nodejs ...

  6. OGG学习笔记02-单向复制配置实例

    OGG学习笔记02-单向复制配置实例 实验环境: 源端:192.168.1.30,Oracle 10.2.0.5 单实例 目标端:192.168.1.31,Oracle 10.2.0.5 单实例 1. ...

  7. Nodejs学习笔记(三)——一张图看懂Nodejs建站

    前言:一条线,竖着放,如果做不到精进至深,那就旋转90°,至少也图个幅度宽广. 通俗解释上面的胡言乱语:还没学会爬,就学起走了?! 继上篇<Nodejs学习笔记(二)——Eclipse中运行调试 ...

  8. Nodejs学习笔记(二)——Eclipse中运行调试Nodejs

    前篇<Nodejs学习笔记(一)——初识Nodejs>主要介绍了在搭建node环境过程中遇到的小问题以及搭建Eclipse开发Node环境的前提步骤.本篇主要介绍如何在Eclipse中运行 ...

  9. python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例

    python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例 新浪爱彩双色球开奖数据URL:http://zst.aicai.com/ssq/openInfo/ 最终输出结果格 ...

随机推荐

  1. AcWing 286. 选课 (树形依赖分组背包)打卡

    有依赖的背包 首先依赖的概念,就是一个东西依附与一个东西之上,我们想买附品的话必须要把主品先买下来,这个可以先做下这道题 https://www.cnblogs.com/Lis-/p/11047466 ...

  2. NX二次开发-Block UI C++界面Body Collector(体收集器)控件的获取(持续补充)

    Body Collector(体收集器)控件的获取 NX9+VS2012 #include <uf.h> #include <uf_obj.h> UF_initialize() ...

  3. Rollei SL66 使用说明

    根据记忆,并用不规范的语言描述我对sl66的使用心得:一.上卷1.用摇把顺时针转到12点位置,再退回3点位置:2.安插刀:3.后背上方按钮向右拨,打开后背:4.取出,装卷,再放入:5.转动后背上旋钮, ...

  4. jsonp的实现原理

    jsonp的实现原理 由于浏览器的安全性(同源策略)限制,不允许AJAX访问协议不同或域名不同或端口号不同的数据接口: 可以通过动态创建script标签的方式,把script标签的src属性指向数据接 ...

  5. FTPClient登录慢的问题

    java上传文件到ftp上,发现特别慢,debug了一下发现链接正常,ftp.login(username, password)这个登录方法特别慢 解决方案: vi /etc/vsftpd/vsftp ...

  6. 创建maven项目的时候:Could not resolve archetype org.apache.maven.archetypes:maven-archetype-webapp:1.0 from any of the configured repositories. 解决办法

    问题: https://yq.aliyun.com/ziliao/364921      尝试没成功. https://www.aliyun.com/jiaocheng/296712.html   尝 ...

  7. 10.Struts2值栈

    1.什么是值栈 * 值栈就相当于Struts2框架的数据的中转站,向值栈存入一些数据.从值栈中获取到数据. * ValueStack 是 struts2 提供一个接口,实现类 OgnlValueSta ...

  8. Servlet - request对象相关

    request对象中封装了当前请求的所有请求信息, request对象由Tomcat服务器创建, 并作为实参传递给处理请求的Servlet的service()方法 1. 获取请求头数据 // 获取请求 ...

  9. Perl 哈希

    Perl 哈希 哈希是 key/value 对的集合. Perl中哈希变量以百分号 (%) 标记开始. 访问哈希元素格式:${key}. 以下是一个简单的哈希实例: 实例 #!/usr/bin/per ...

  10. 【转载】查看Linux进程CPU过高具体的线程堆栈(不中断程序)

    具体的命令经常忘记,毕竟用的不是很多.为了避免去找备份一下 1.TOP命令,找到占用CPU最高的进程 $ top top - 20:11:45 up 850 days,  1:18,  3 users ...