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

由于版本差异巨大且不兼容的情况下，作为才开始学习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" οnsubmit="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" οnsubmit="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 = "";//展示信息的messageif(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对象置入modelname: 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是参照他的实现的哦~谢谢

网页截图：

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

MongoDB+Node.js+express简单实现数据的提交与回显
这是一个从前端到后台到数据库都是用js写的小demo，所以我们的口号是：将javascript进行到底一、项目目录从图片上也可以看出来，用了一个伪MVC的设计模式，简单来说controllers文件夹是C层，它类似于一个包工头，把所有的脏活累活都给了M层，M层得到C层的指令去拿到数据然后处…...
2024/4/24 13:33:30
Node.js对MongoDB进行增删改查操作
MongoDB简介MongoDB是一个开源的、文档型的NoSQL数据库程序。MongoDB将数据存储在类似JSON的文档中，操作起来更灵活方便。NoSQL数据库中的文档(documents)对应于SQL数据库中的一行。将一组文档组合在一起称为集合(collections)，它大致相当于关系数据库中的表。除了作为一个No…...
2024/4/24 13:33:29
Node.js--使用MongoDB存储数据
MongoDB的基本使用特点：使用BSON存储数据支持相对丰富的查询操作支持索引副本集分片无模式部署简单方便服务的启动：MongoDB运行的两种方式启动命令的使用 mongo 127.0.0.1:27017 连接指定ip地址下的27017端口 show dbs 查看数据库 db.users.insert({"username": …...
2024/4/24 13:33:28
Node.js操作MongoDB数据库
引包：npm install mongodb --save-dev / cnpm install mongodb --save-dev 教程网址：https://docs.mongodb.com/getting-started/node/introduction/ https://docs.mongodb.com/getting-started/node/query/ Node.js 连接 MongoDb 数据库Node.js 查找 MongoDb 数据库集…...
2024/4/15 3:54:01
Java和Node.js实战 MongoDB 4.x 新特性：Change Streams 变化流...
作者：Dj Walker-Morgan译者：徐雷原文地址：https://www.mongodb.com/blog/post/five-minute-mongodb--change-streams-and-mongodb-4x 监控数据库发生的变化是MongoDB同步数据服务的关键。我们不需要去定期轮训查询集合中的更改文档，我们就可以可以更轻松地过滤Change Strea…...
2024/4/15 3:54:00
MongoDB Node.JS Driver 1.4.9 documentation
db.open(function(err, db) { 摘自 MongoDB Node.JS Driver 1.4.9 documentation openInitialize the database connection. open(callback) Arguments:callback (function) – this will be called after executing this method. The first parameter will contain the Error …...
2024/4/19 14:02:51
centos7下安装Node.js MongoDB Nginx
一.Node.js 方法1(笔者采用).如果对Node.js环境有比较高的要求，建议选择源码安装的方式进行安装，通过wget命令下载Node.js官网上的tar.gz文件包到centos服务器上，进行源码安装。cd /home mkdir download cd download#准备yum -y install gcc make gcc-c++ openssl-devel wge…...
2024/4/15 3:53:58
node.js与mongodb连接
上一章交代了什么是关系型数据与非关系型数据，还有mongodb的基础操作。本章继续探究mongodb与node.js是如何建立起连接的。名词解释 Schema：一种以文件形式存储的数据库模型骨架，不具备数据库的操作能力 Model：由Schema编译而成的假想（fancy）构造器，具有抽象属性和行…...
2024/4/24 13:33:27
应用node.js+mongodb数据库实现一个mvc架构的web项目
最近在学nodejs，也没怎么学就是大概学了一点，并尝试着写了一个应用mvc架构的web项目，和传统的web项目比较起来确实能节省了很多，不用再用第三方的服务器，有过js或jq的经验的同学更容易上手，好了废话不多说，来给大家说说这个简单的web项目。首先用express简历一个web项目…...
2024/4/24 13:33:26
Node.js+MongoDB初体验
首先要有Node.js基础,还要有MongoDB基础根据MongoDB文档来看,点击进入MongoDB示例npm init npm install mongodb -S根据菜鸟教程提供的Node.js连接MongoDB的方法点击进入菜鸟教程Node.js连接MongoDB第一次使用Node.js配合MongoDB,先简单的写个小Demo吧const express = require(…...
2024/4/24 13:33:26
Node.js对于MongoDB的操作DAO的封装
Node.js对于MongoDB的操作DAO的封装在看下面的代码之前，希望你阅读过这个，在阅读完之后，你应该就会明白，我下面的这些代码的整体思想。首先，下面是代码的大体的样子var mongoClient = require(mongodb).MongoClient;function MongoDB(url) { ... } ...MongoDB.prototype.i…...
2024/4/24 13:33:26
Node.js 操作Mongodb
Node.js 操作Mongodb1.简介官网英文文档 https://docs.mongodb.com/manual/ 这里几乎什么都有了MongoDB is open-source document database that provides high performance , high availability , and automatic scaling.MongoDB是一个开源的文档数据库，提供高性能、高可用…...
2024/4/24 13:33:23
node.js中为MongoDB的文档添加自增字段
MongoDB数据库本身并没有提供创建自增字段的方法，不过在其官方文档中，有一篇介绍创建自增字段的一篇文章，虽然该文章是针对_id的，不过其实用在其他字段上道理都是相同的，可以通过如下两种方式来为文档创建自增字段：使用计数集合（use counter collection）这一种…...
2024/4/24 13:33:22
Node.js的编译(转)
之前编译和简单测试了Google V8引擎，Node.js就是在V8引擎的基础上进一步扩展打造的服务端的JavaScript解释器，当然这个功劳自然离不开牛叉的V8了 V8的设计最初为了浏览器使用，而Node.js让它在服务端继续发扬光大，熟悉MongoDB的一定会想在这个数据库中的引擎是什么了,那是将…...
2024/4/24 13:33:21
node.js - MongoDB count()获取表长度，解决Promise {}
自己一直想要用node操作db.count()去获取某个表的长度，奈何用collection.find().count()却又一直获取不到，查看了许多文章，都没有什么详细的解释，官方文档也是吧啦吧啦一大堆。。。var collection=client.db(UrlPath).collection(collectionname)var total=collection.find…...
2024/4/24 13:33:21
node.js使用mongodb存储数据-客户端使用
1.客户端使用命令同样,打开Xshell操作Linux服务器1.1 进入数据库命令:mongo,这里可能会出现一个问题,如下出现这个问题的原因是没有启动服务端的mongod,执行mongod --dbpath=/data/db --port=27017 --fork -logpath=/var/log/mongod.log 或者:mongod --dbpath=/data/db --port…...
2024/4/24 13:33:19
Node.js开发入门—用MongoDB改造LoginDemo
这次的示例基于之前的LoginDemo（见使用cookie保持登录），我们引入MongoDB来保存用户数据。要运行这个示例，前提是MongoDB数据要正常运行（见Node.js开发入门——MongoDB与Mongoose）。示例运行的结果呢，和之前的LoginDemo是一样一样的。因此，我们就只分析引入数据库时项目…...
2024/4/24 13:33:18
node.js连接Sql Server数据库
最近对node.js比较感兴趣，网上的例子大多都是node.js集成MongoDB。我对MongoDB实在不是太感冒，并不是因为它有什么不好听，只是在工作上的确是很难遇到。在工作上还是和Sql Server打交道多，所以要研究一下如何从node.js连接Sql Server。在搭建环境之前，我不得不说，node.js…...
2024/4/24 13:33:18
Node.js使用MongoDB模块时的常见错误
在Node.js中使用MongoDB模块，报错 Error: Cannot find module ../build/Release/bson... 解决方案：首先安装bson模块，npm install bson 然后将根目录下node_modules/mongodb/node_modules/bson/ext/index.js文件中（15行） bson = require(../build/Release/bson)改为bson …...
2024/4/24 13:33:25
Node.js+MongoDB写前后端的一些东西，比如分页，比如session
1.首先，先分享用来做分页查询的简单函数，先上代码，function findByPagination(collections, selector, page, count, fn) {let skipnumber = (page - 1) * count;let totalCount;MongoClient.connect(Urls, function (err, db) {let collection = db.collection(collections…...
2024/4/24 13:33:15

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

相关文章

最新文章