例子：实现最新版本Node.js中Express+mongodb的登录注册页面

其他 2018-11-01 11:32:26 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Miss_LL/article/details/53927873

由于版本差异巨大且不兼容的情况下，作为才开始学习Node.js的菜鸟，书籍上的例子是不能看了，因此仿照着网络大神中的例子自己再归纳总结了一遍，方便自己以后查看。好记性不如烂笔头嘛。

这里主要使用的版本是express4.0+mongodb最新版本以及Bootstrap3.0界面所做。

一、新建项目文件且搭建依赖关系

下图步骤1：首先用命令行进入一个自定的项目存放地址

下图步骤2：运行命令行搭建express框架的项目文件。（我的项目文件夹取名为LoginRegister）

下图步骤3：根据提示要求命令行进入新建的项目文件夹LoginRegister

下图步骤4：运行命令创建依赖包关系

二、项目初始化成功，运行命令后打开浏览器http://localhost:3000即可查看是否成功显示Express的欢迎界面。

npm start
三、题外话：文件初始情况介绍。

现在打开该目录即可看到刚才新建的LoginRegister文件夹下面新建了一些东西

bin是项目的启动文件，默认npm start启动

public是项目静态文件，放置Js、Css、Img等文件的地方

routes是项目路由信息文件，控制地址的

view是视图文件，放置ejs或jade等的也就是相当于html模板的

package.json是管理依赖包的，一般项目主要采用了哪些包都会在这里显示

四、题内话：（大概了解下即可）项目框架设计


这里还提供了注销功能，但无界面路径为/logout。

如果浏览器中直接输入http://localhost:3000/home企图直接跳入主界面，那么会有一个判断，判断是否登录成功，未登录者不允许进入。

五、为了方便使用，我们把View文件夹下面所有.ejs模板全部更改为.html后缀名。并且在app.js里面也相应修改一下配置。


六、由于上面项目框架设计知道需要几个界面模板，因此现在开始在view下面创建界面模板文件。

（1）index.html是登录注册的主界面。a标签中用到了路由路径的方法

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>

    <p><a href="/login">登录</a></p>
    <p><a href="/register">注册</a></p>
  </body>
</html>
（2）新建register.html，它是注册界面。

首先给form表单返回return false防止默认提交。然后只有在输入正确的情况下才能通过ajax把表单信息post到路径/register里。提示：界面皆由bootstrap3.0构成。记得提前引入bootstrap的css、js以及jq。应该将js和css文件相应存入public文件夹下面哦。并且把bootstrap的fonts文件夹一起放入public根目录方便调用里面的图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title><%= title%></title>
    <link rel="stylesheet" href="stylesheets/bootstrap3.3.7.min.css">
    <script type="text/javascript" src="javascripts/jquery1.11.3.min.js"></script>
    <script type="text/javascript" src="javascripts/bootstrap3.3.7.min.js"></script>
    <style>
        .tc{text-align: center;font-size: 18px;font-weight: 600;}
        .m15{margin: 15px;}
    </style>
    <script>
        $(function(){
           $("#login1").click(function (){
               location.href = 'login';
           });
           $("#register1").click(function(){
               var username = $("#username").val();
               var password = $("#password").val();
               var passwordAgin = $("#passwordAgin").val();
               if(password !== passwordAgin){
                   $("#password").css("boder","1px solid red");
                   $("#passwordAgin").css("boder","1px solid red");
               }else if(password === passwordAgin){
                   var data = {"uname":username,"upwd":password};
                   $.ajax({
                       url:'/register',
                       type:'post',
                       data:data,
                       success:function(data,status){
                           if(status == 'success'){
                               location.href = 'login';
                           }
                       },
                       error:function(data,err) {
                           location.href = 'register';
                       }
                   });
               }
           });
        });

    </script>
</head>
<body>
    <div class="container">
        <form class="form-horizontal col-sm-4 col-sm-offset-4" role="form" method="post" onsubmit="return false">
            <fieldset>
                <legend></legend>
                <div class="panel panel-default">
                    <div class="page-header">
                        <p class="tc">注册信息</p>
                    </div>
                    <div class="panel-body m15">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-user"></span>
                                </span>
                                <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-lock"></span>
                                </span>
                                <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-lock"></span>
                                </span>
                                <input type="text" class="form-control" id="passwordAgin" name="passwordAgin" placeholder="请再次输入密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn bg-primary btn-block" id="register1">注册</button>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-info col-sm-2 col-sm-offset-10" id="login1">登录</button>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</body>
</html>
（3）新建一个login.html跟上面register.html原理相似。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title><%= title%></title>
    <link rel="stylesheet" href="stylesheets/bootstrap3.3.7.min.css">
    <script type="text/javascript" src="javascripts/jquery1.11.3.min.js"></script>
    <script type="text/javascript" src="javascripts/bootstrap3.3.7.min.js"></script>
    <style>
        .tc{text-align: center;font-size: 18px;font-weight: 600;}
        .m15{margin: 15px;}
    </style>
    <script>
        $(function(){
           $("#register0").click(function(){
               location.href = 'register';
           });
           $("#login0").click(function(){
               var username = $("#username").val();
               var password = $("#password").val();
               var data = {"uname":username,"upwd":password};
               $.ajax({
                   url:'/login',
                   type:'post',
                   data:data,
                   success:function(data,status){
                       if(status === 'success'){
                           location.href = 'home';
                       }
                   },
                   error: function (data,status) {
                       if(status === 'error'){
                           location.href = 'login';
                       }
                   }
               });
           });
        });
    </script>
</head>
<body>
<div class="container">
    <form class="form-horizontal col-sm-4 col-sm-offset-4" role="form" method="post" onsubmit="return false">
        <fieldset>
            <legend></legend>
            <div class="panel panel-default">
                <div class="page-header">
                    <p class="tc">请先登录</p>
                </div>
                <div class="panel-body m15">
                    <div class="form-group">
                        <div class="input-group">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-user"></span>
                                </span>
                            <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-lock"></span>
                                </span>
                            <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn bg-primary btn-block" id="register0">注册</button>
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-info col-sm-2 col-sm-offset-10" id="login0">登录</button>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>
</div>
</body>
</html>
（4）新建home.html。
里面的user.name就是还有ejs模板通过session.user来获取的user对象。（这里user有name和password属性） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<link rel="stylesheet" href="stylesheets/style.css">
<style>
    a{margin-left: 20px;text-decoration:none;}
    a:hover{text-decoration: underline;}
</style>
<body>
    <h1>your name:<%- user.name%></h1>
    <p>Welcom to your home</p>
    <p><a href="/logout">我要注销</a></p>
</body>
</html>
七、接下来需要给app.js增加路由配置，让游览器访问到路径后可以解析出来 

//设置路径
app.use('/',index);
app.use('/users',users);
app.use('/login',index);
app.use('/register',index);
app.use('/home',index);
app.use('/logout',index);
八、因为要实现界面之间的跳转所以需要数据库的支持，这里采用mongodb，运用到mongoose工具。

（1）在根目录创建一个database文件夹，建立文件models.js，然后建立model处理文件dbHandel.js

（2）然后在model.js里面写入user集合，包括name和password属性

module.exports = {
  user:{
      name:{type:String,required:true},
      password:{type:String,required:true}
  }
};
（3）在dbHandel.js里面主要是获取Schema，然后处理获取model,最后就是返回一个model 
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var models = require("./model");
for(var m in models){
    mongoose.model(m,new Schema(models[m]));
}
module.exports = {
    getModel:function (type) {
        return _getModel(type);
    }
};
var _getModel = function (type) {
    return mongoose.model(type);
};
（4）建立好基本文件后，我们需要在app.js中调用使用它，这需要使用到multer和mongoose模块，由于项目没有，所以我们需要安装。

使用命令行进入此项目目录后运用命令安装multer和mongoose模块

（5）然后在app.js中加上multer和mongoose

//新增multer和mongoose
var multer = require('multer');
var mongoose = require('mongoose');
global.dbHandel = require('./database/dbHandel');
global.db = mongoose.connect("mongodb://localhost:27017/nodedb");

//新增上multer和mongoose
app.use(bodyParser.urlencoded({extended:true}));
app.use(multer());
app.use(cookieParser());

（6）因为我们用到了数据库，因此新建一个nodedb的数据库，以便存储数据。

a.首先用MongoDB.bat快捷打开mongodb数据库（具体怎么建立MongoDB.bat参照我的上文http://blog.csdn.net/miss_ll/article/details/53436608）。使用浏览器打开http://localhost:27017/查看即可。

b.命令行进入存放mongodb的bin目录，然后初始化nodedb


（7）又因为我们用到了session（就是进入到home的时候判断session值是否为空），因此需要用到express-session模块

同样命令行进入到该项目目录中，运行命令安装express-session模块


（8）然后在app.js中引用express-session并作初始值设置。

//引用express-session
var session = require('express-session');
var app = express();
app.use (session({
  secret:'secret',
    cookie:{
        maxAge:1000*60*30
    }
}));
app.use(function (req,res,next) {
    res.locals.user = req.session.user;//从session获取user对象
    var err = req.session.error;//获取错误信息
    delete req.session.error;
    res.locals.message = "";//展示信息的message
    if(err){
      res.locals.message = '<div class="alert alert-danger" style="margin-bottom:20px;color:red">'+err+'</div>';
    }
    next();//中间件传递
});
九、处理路径部分。修改routes目录下的index.js。新增上几个页面对应路径。 

/* GET index page. */
router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });// 到达此路径则渲染index文件，并传出title值供index.html使用
});
/* GET login page. */
router.route("/login").get(function(req,res){    // 到达此路径则渲染login文件，并传出title值供 login.html使用
    res.render("login",{title:'User Login'});
}).post(function(req,res){                        // 从此路径检测到post方式则进行post数据的处理操作
    //get User info
    //这里的User就是从model中获取user对象，通过global.dbHandel全局方法（这个方法在app.js中已经实现)
    var User = global.dbHandel.getModel('user');
    var uname = req.body.uname;                //获取post上来的 data数据中 uname的值
    User.findOne({name:uname},function(err,doc){   //通过此model以用户名的条件 查询数据库中的匹配信息
        if(err){                                         //错误就返回给原post处（login.html) 状态码为500的错误
            res.send(500);
            console.log(err);
        }else if(!doc){                                 //查询不到用户名匹配信息，则用户名不存在
            req.session.error = '用户名不存在';
            res.send(404);                            //    状态码返回404
            //    res.redirect("/login");
        }else{
            if(req.body.upwd != doc.password){     //查询到匹配用户名的信息，但相应的password属性不匹配
                req.session.error = "密码错误";
                res.send(404);
                //    res.redirect("/login");
            }else{                                     //信息匹配成功，则将此对象（匹配到的user) 赋给session.user  并返回成功
                req.session.user = doc;
                res.send(200);
                //    res.redirect("/home");
            }
        }
    });
});
/* GET register page. */
router.route("/register").get(function(req,res){    // 到达此路径则渲染register文件，并传出title值供 register.html使用
    res.render("register",{title:'User register'});
}).post(function(req,res){
    //这里的User就是从model中获取user对象，通过global.dbHandel全局方法（这个方法在app.js中已经实现)
    var User = global.dbHandel.getModel('user');
    var uname = req.body.uname;
    var upwd = req.body.upwd;
    User.findOne({name: uname},function(err,doc){   // 同理 /login 路径的处理方式
        if(err){
            res.send(500);
            req.session.error =  '网络异常错误！';
            console.log(err);
        }else if(doc){
            req.session.error = '用户名已存在！';
            res.send(500);
        }else{
            User.create({                             // 创建一组user对象置入model
                name: uname,
                password: upwd
            },function(err,doc){
                if (err) {
                    res.send(500);
                    console.log(err);
                } else {
                    req.session.error = '用户名创建成功！';
                    res.send(200);
                }
            });
        }
    });
});
/* GET home page. */
router.get("/home",function(req,res){
    if(!req.session.user){                     //到达/home路径首先判断是否已经登录
        req.session.error = "请先登录"
        res.redirect("/login");                //未登录则重定向到 /login 路径
    }
    res.render("home",{title:'Home'});         //已登录则渲染home页面
});
/* GET logout page. */
router.get("/logout",function(req,res){    // 到达 /logout 路径则登出， session中user,error对象置空，并重定向到根路径
    req.session.user = null;
    req.session.error = null;
    res.redirect("/");
});
十、至此项目已经成功完成了。运行命令行进入该项目目录，启动项目。


运行成功后打开浏览器输入http://localhost:3000访问界面，还可以边注册边查看mongodb数据库node的user里面数据变动哦



源码：http://download.csdn.net/detail/miss_ll/9713274

感谢，http://www.cnblogs.com/imwtr/p/4360341.html是参照他的实现的哦~谢谢

网页截图：






猜你喜欢

转载自blog.csdn.net/Miss_LL/article/details/53927873
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022