node+express+mongodb注册登录实例

如果你之前对mysql以及Oracle等关系数据库有过了解的话,那么你mongodb对于你来说上手应该是很快的。但是mongodb并不是使用诸如mysql与Oracle中的select、delete、update等关键字进行SQL查询的,因为具mongodb官方介绍说,mongodb是一个nosql的数据库,也就是说,他不需要你对sql语句有一定的了解,但是如果你已经了解了sql语句,那么我相信你学习起来是很快的。
网上已经很多这方面的教程了,为什么我还要在写一次?
主要是因为我在参照网上的相关例子的时候遇到了不少问题,有些例子要么是express版本低,要么就是代码不完整,因此我才打算写这一篇文章来与大家分享下学习心得。本文仅作为express+mongodb入门教程。使用的express版本为~4.15.2,

一、准备工作

看到标题就知道应该需要安装些什么软件了吧,我们需要在电脑上安装nodejs和mongodb,而express是nodejs的一个插件,因此需要通过nodejs来进行安装。
nodejs与mongodb的安装非常的简单,只要你会安装QQ,会安装游戏,那么你就会安装nodejs和mongodb了。不过我们需要注意的是,mongodb安装后,我们需要对其进行相应的设置,以提高我们的开发效率。关于mongodb的使用方法,请大家查看官方的文档。
安装好了mongodb后,我们给mongodb的bin目录添加到环境变量里面,这样我们就可以直接在命令提示符中直接使用mongodb的命令了,省的还要跑到mongodb目录下输命令。下面是设置mongodb的环境变量的方法。

1、mongodb添加环境变量

在桌面上,我的电脑(计算机或者此电脑)右键,点击属性,选择左边的“高级系统设置”,在弹出窗口中,选择“高级”,看到右下角有个“环境变量”,点击它。
之后我们在“系统变量”(不是Administrator的用户变量)中Path中将mongodb的bin目录填写进去,比如我的bin目录是C:\Program Files\MongoDB\Server\3.4\bin。
然后,打开你的命令提示符窗口,输入mongo,如果看到下面的信息,说明你的设置已经成功了。

C:\Users\Administrator>mongo
MongoDB shell version v3.4.3
connecting to: mongodb://127.0.0.1:27017
MongoDB server version: 3.4.3
Server has startup warnings:
2017-04-19T13:51:47.704+0800 I CONTROL  [initandlisten]
2017-04-19T13:51:47.704+0800 I CONTROL  [initandlisten] ** WARNING: Access control is not enabled for the database.
2017-04-19T13:51:47.705+0800 I CONTROL  [initandlisten] **          Read and write access to data and configuration is unrestricted.
2017-04-19T13:51:47.705+0800 I CONTROL  [initandlisten]

2、在nodejs中安装express

打开nodejs的命令窗口,输入以下命令进行express全局安装
npm install -g express
OK,安装会有些慢,如果觉得很慢,请使用taobao的node镜像。完成后,我们就来创建一个express项目吧
直接使用命令
express test --view=ejs
//test就是项目的名称及目录,--ejs则是使用ejs模板引擎,如果不使用--ejs,默认就是jade模板引擎。
在这里我使用ejs模板引擎,因为它跟html一样,易看易懂,如果你之前使用过asp、jsp的话,那么你一看就懂了,根本不需要再进行多余的学习,如果没有用过,那还是学习下的好,不过这个模板引擎也是非常简单易学的,大部分懂js的或懂一点后端的应该看一下就会了吧。
项目创建完成,我们需要安装相关的依赖包了
cd test & npm install
现在我们已经创建好了test项目了,我们看看项目的目录
--bin //这个是express服务端的配置文件
--node_modules //一些依赖的库
--public //静态文件目录(css、js、images等)
--views //ejs模板文件(视图)
--app.js //express配置文件
--package.json //项目信息及依赖库的json信息
到此,项目创建完成了。下面我们需要与mongodb进行相关的链接,那就必须得安装一个mongoose的依赖库,直接使用命令
npm install mongoose --save
这样就安装成功了。下面我们正式进入express+mongoose+mongodb的数据库操作吧。

重要部分来了:由于express与nodejs一起使用,无法实现热加载(所谓热加载就是无需重启node来刷新页面),因此我们需要另一个插件hotnode,使用hotnode可以让我们更好的调试代码与测试代码。hotnode可以全局安装,也可以依赖安装,我这里使用全局安装,使用npm install -g hotnode

二、express+mongodb+mongoose链接数据库

1、使用mongodb创建一个数据库

首先在命令提示符中输入如下命令来指定数据库存储的文件夹
mongod --dbpath H:\DB
这个H:\DB,你自己设置成你想要的目录即可
设置好了以后,我们需要再开启一个命令提示符窗口,直接使用mongo命令就可以看到已经链接上了本地上的db目录了。
下面我们就来创建一个数据库,使用use命令
use test //如果数据库不存在则会自动创建一个名为test的数据库
我们再创建一个数据库表为user,并且添加一个admin用户
db.user.insert({name:'admin',password:'password'});
查看数据库信息,请使用find
db.user.find()
是不是很简单啊。
至此,我们需要将以上mogodb的两个窗口都保留,这样才能保证我们后面的步骤。关闭后则数据库连接就断了。当然你也可以将其注册成为windows的一个服务,相关命令请自行google.

2、连接到test数据库

打开app.js
添加如下代码测试数据库链接是否成功:

/*引入mongoose链接数据库*/
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/one');
var db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() {
    console.log('链接成功了')
});

现在我们就可以测试下数据库连接是否成功了。使用hotnode的命令启动服务
hotnode ./bin/www
当在命令提示符中看到“连接成功了”,那么就说明了我们已经链接了数据库了。

三、使用bootstrap与express的router创建登录与注册

首先下载bootstrap3与jQuery,将css文件放到public/stylesheets目录下,将js文件及jQuery文件放到javascripts目录下,另外bootstrap是需要自提支持的,因此直接将bootstrap的fonts目录直接拷贝到public目录下即可。

1、修改views目录下index.ejs文件

<% include header.ejs %>
    <div class="index">
        <div class="container">
            <h1><%= title %></h1>
            <form name="form" action="/home" method="post">
            <div class="input-group">
                <span class="input-group-addon" id="sizing-addon1">USERNAME</span>
                <input type="text" name="name" class="form-control" placeholder="用户名" aria-describedby="sizing-addon1" id="name">
            </div>
            <div class="input-group">
                <span class="input-group-addon" id="sizing-addon2">PASSWORD</span>
                <input type="password" name="password" class="form-control" placeholder="密码" aria-describedby="sizing-addon2" id="password">
            </div>
                <a href="/register" class="btn btn-warning reg">注册</a>
                <input name="submit" type="submit" class="btn btn-primary login" value="登录">
            </form>
        </div>
    </div>
<% include footer.ejs %>

看到了吧,如果你懂jsp,那么你就能看懂上面的代码了,很简单的,当然懂JavaScript也能很容易看懂以上代码,只不过代码中的include可能就不太了解了,include是引入一个文件,然后我们来建立header.ejs和footer.ejs,让他们两个文件可以进行重用

2、header.ejs文件内容

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />
    <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>

3、footer.ejs

    <script src="/javascripts/jquery-3.2.1.min.js"></script>
    <script src="/javascripts/bootstrap.min.js"></script>
  </body>
</html>

4、修改routers/index.js

'use strict';
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
    res.render('index', { title: '后台登录' });
});


module.exports = router;

路由为我们创建了第一个页面,并传递一个title参数。

5、修改public/stylesheets/style.css

.index {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.index h1 {
  text-align: center;
  color: #333;
  border-bottom: 1px #eee solid;
  padding-bottom: 10px;
}
.index .container {
  width: 400px;
  background: #fff;
  border-radius: 6px;
  padding: 10px;
  box-shadow: 0 0 8px #ccc;
}
.index .container .input-group {
  margin: 20px auto;
}
.index .container .login {
  float: right;
}
.index .container .reg {
  float: left;
}

OK,现在我们可以看看浏览器中所显示的状况了,如果你没有操作错误的话,你应该看到如下图一样的效果:

express+mogondb登录

express+mogondb登录

6、新建user.js

在test目录下创建一个model文件夹,并新建一个user.js的文件,内容如下:

/**
 * Created by egtch.com on 2017/4/18.
 */

var mongoose = require('mongoose');

var UserSchema = new mongoose.Schema({
    name: String,
    password: String
});
module.exports = mongoose.model('user', UserSchema,'user');

以上代码主要是创建一个数据模型对应于数据库内容,这个数据库模型就相当于java中的javabeans。我们需要注意的是最后一行,mongoose.model('user', UserSchema,'user'),这里面的最后一个参数'user'就是我们创建的test数据库下面的user表的名称。如果不填写这个参数,后面我们可能将无法获取到user中的数据,当然后面你也可以直接使用for循环来循环,但是如果数据量太大,我相信for肯定不会那么好使了。
下面是非常重要的两个步骤,我都对代码进行了注释,大家一定要好好看。

7、编写注册页面(注册的密码通过MD5加密)

在views下新建register.ejs

<% include header.ejs %>
<div class="index">
    <div class="container">
        <h1><%= title %></h1>
        <form id="form" action="/register_suc" method="post">
            <div class="input-group">
                <span class="input-group-addon" id="sizing-addon1">USERNAME</span>
                <input type="text" name="name" class="form-control" placeholder="用户名" aria-describedby="sizing-addon1" id="name">
            </div>
            <div class="input-group">
                <span class="input-group-addon" id="sizing-addon2">PASSWORD</span>
                <input type="password" name="password" class="form-control" placeholder="密码" aria-describedby="sizing-addon2" id="password">
            </div>
            <input type="submit" class="btn btn-primary login" value="注册" >
        </form>
    </div>
</div>
<% include footer.ejs %>

然后在routers下建立register.js

'use strict';
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
    res.render('register', { title: '用户注册' });
});


module.exports = router;

我们已经完成了注册页面了,下面就是与数据库对接了。
在routers目录下新建register_suc.js
register_suc.ejs

'use strict';
var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var user = require('../model/user');
/*导入node的加密库*/
var crypto = require('crypto');

/* GET home page. */
router.post('/', function(req, res) {
    var md5 = crypto.createHash('md5');
    var name = req.body.name;
    var password = req.body.password;
    if(name==='' && name.length<=0 && password==='' && password.length<=0){
        res.render('register_suc.ejs', {title: '用户名或密码不能为空', name: '', password: ''});
    }else {
        /*MD5加密密码*/
        md5.update(password + name);
        var pwd = md5.digest('base64');//将加密后的md5密码使用base64加密
        //使用findOne查询数据库中是否存在相同的用户名,如果存在则提示更换用户名,否则将内容写入数据库
        user.findOne({name: name}, function (err, doc) {
            if (err) return next(err);
            //查询数据库是否有相同的用户名,假如存在则提示注册失败
            if (doc) {
                res.render('register_suc.ejs', {title: '用户名已经存在,请更换', name: '', password: ''});
            } else {
                /*var usernow =new user({name:name,password:pwd});
                 //如果用户名不存在,则将当前用户名和密码保存到数据库
                 usernow.save();
                 res.render('register_suc.ejs', { title: '注册成功',name:name,password:pwd });*/

                user.create({ // 创建一组user对象置入model
                    name: name,
                    password: pwd
                }, function (err, doc) {
                    if (err) {
                        res.send(500);
                        console.log(err);
                    } else {
                        res.render('register_suc.ejs', {title: '注册成功', name: name, password: pwd});
                        //res.send(200);
                    }
                });
            }
        })
    }
});


module.exports = router;

在views目录下新建一个register_suc.ejs

<% include header.ejs %>
<div class="index">
    <div class="container">
        <h1><%= title %></h1>
        <%if(name!='' && password != ''){%>
        用户名:<%=name%><br>密码:<%=password%>
        <%}%>
    </div>
</div>
<% include footer.ejs %>

到这里还没有完哦,我们建立了router后,必须要在app.js中加入router,否则将无法实现router功能,打开app.js,增加以下内容
var register = require('./routes/register');
var register_suc = require('./routes/register_suc');
app.use('/register', register);
app.use('/register_suc', register_suc);
OK,现在我们就可以看看效果了,http://localhost:3000/register,可以看到如下画面

express+mongodb注册

express+mongodb注册


你试着输入用户名和密码,然后点击注册看看,是否会出现如下画面,如果出现了那恭喜你,你离成功越来越近了:
express+mongodb注册

express+mongodb注册


注册功能实现了,下面我们就实现下登录功能吧

8、编写登录页面

首先我们的在views下新建一个home.ejs来显示登录成功后的用户名
home.ejs

<% include header.ejs %>
<div class="index">
    <div class="container">
        <h1><%= title %></h1>
        <%if(name !='' && name.length>0){%>
        <%=name%>
        <%}%>
    </div>
</div>
<% include footer.ejs %>

然后我们需要配置home的路由,因此我们还需要在routers目录下新建一个home.js的文件
home.js

'use strict';
var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var user = require('../model/user');
/*导入node的加密库*/
var crypto = require('crypto');
/* 创建路由,并使用post接受index传递过来的name和password */
router.post('/', function(req, res, next) {
    var md5 = crypto.createHash('md5');
    var password = req.body.password;//获得传递过来的password
    var name = req.body.name;//获得传递过来的name
    md5.update(password+name);//MD5混淆加密内容为password+name
    var pwd = md5.digest('base64');//将加密好的MD5以base64的形式展现出来
    if(pwd==='' && name ===''){//假如传递过来的name和password为空
        res.render('home', { title: '发生错误',name:'请输入用户名和密码' });//路由则传递相关错误信息
    }
    //console.log(pwd+' '+name);
    /* 查询数据库中的name与password是否与用户输入的一致,使用findOne({},callback)方法 */
    user.findOne({ name:name,password:pwd },function (err, doc) {
        if (err) return next(err);
            if(doc){
                res.render('home', { title: '登录成功',name:name });
            }else{
                res.render('home',{title:'发生错误',name:'请检查您的用户名及密码'});
            }
    });
});

module.exports = router;

终于完成了,下面我们就直接打开http://localhost:3000进行登录吧,记得之前我们创建的admin的密码是未进行加密的,因此在这里直接使用admin登录是不可行的,因为其密码与加密后的密码不一致,因此你不必为此劳心费神,追求完美。
我们输入之前我们注册的egtch.com的用户名,再输入密码来进行登录,即可登录成功。如图:

express+mongodb登录

express+mongodb登录

评论 关于 node+express+mongodb注册登录实例

  1. jie says:

    少写了home路由,到app.js里面

发表评论

电子邮件地址不会被公开。 必填项已用*标注

52 + 0 = ?