Notes for a front-end developer, esyou.net

0%

NODE+EXPRESS+MONGODB注册登录实例

发表于 分类于 Valine：
本文字数： 11k 阅读时长 ≈ 10 分钟

如果你之前对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的环境变量的方法。

mongodb添加环境变量

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

1
C:\Users\Administrator>mongo
2
MongoDB shell version v3.4.3
3
connecting to: mongodb://127.0.0.1:27017
4
MongoDB server version: 3.4.3
5
Server has startup warnings:
6
2017-04-19T13:51:47.704+0800 I CONTROL  [initandlisten]
7
2017-04-19T13:51:47.704+0800 I CONTROL  [initandlisten] ** WARNING: Access control is not enabled for the database.
8
2017-04-19T13:51:47.705+0800 I CONTROL  [initandlisten] **          Read and write access to data and configuration is unrestricted.
9
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可以全局安装，也可以依赖安装，我这里使用全局安装，使用

install -g hotnode```
1
2
## express+mongodb+mongoose链接数据库
3
### 使用mongodb创建一个数据库
4
首先在命令提示符中输入如下命令来指定数据库存储的文件夹
5
```mongod --dbpath H:\DB

这个H:\DB，你自己设置成你想要的目录即可
设置好了以后，我们需要再开启一个命令提示符窗口，直接使用mongo命令就可以看到已经链接上了本地上的db目录了。
下面我们就来创建一个数据库，使用use命令

1
use test //如果数据库不存在则会自动创建一个名为test的数据库

我们再创建一个数据库表为user,并且添加一个admin用户

1
查看数据库信息，请使用find
2
```db.user.find()

是不是很简单啊。
至此，我们需要将以上mogodb的两个窗口都保留，这样才能保证我们后面的步骤。关闭后则数据库连接就断了。当然你也可以将其注册成为windows的一个服务，相关命令请自行google.

连接到test数据库

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

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

现在我们就可以测试下数据库连接是否成功了。使用hotnode的命令启动服务

./bin/www```
1
当在命令提示符中看到“连接成功了”，那么就说明了我们已经链接了数据库了。
2
3
## 使用bootstrap与express的router创建登录与注册
4
首先下载bootstrap3与jQuery，将css文件放到public/stylesheets目录下，将js文件及jQuery文件放到javascripts目录下，另外bootstrap是需要自提支持的，因此直接将bootstrap的fonts目录直接拷贝到public目录下即可。
5
6
### 修改views目录下index.ejs文件
7
```html
8
<% include header.ejs %>
9
    <div class="index">
10
        <div class="container">
11
            <h1><%= title %></h1>
12
            <form name="form" action="/home" method="post">
13
            <div class="input-group">
14
                <span class="input-group-addon" id="sizing-addon1">USERNAME</span>
15
                <input type="text" name="name" class="form-control" placeholder="用户名" aria-describedby="sizing-addon1" id="name">
16
            </div>
17
            <div class="input-group">
18
                <span class="input-group-addon" id="sizing-addon2">PASSWORD</span>
19
                <input type="password" name="password" class="form-control" placeholder="密码" aria-describedby="sizing-addon2" id="password">
20
            </div>
21
                <a href="/register" class="btn btn-warning reg">注册</a>
22
                <input name="submit" type="submit" class="btn btn-primary login" value="登录">
23
            </form>
24
        </div>
25
    </div>
26
<% include footer.ejs %>

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

header.ejs文件内容

1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <title><%= title %></title>
5
    <link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />
6
    <link rel='stylesheet' href='/stylesheets/style.css' />
7
</head>
8
<body>
1
    <script src="/javascripts/jquery-3.2.1.min.js"></script>
2
    <script src="/javascripts/bootstrap.min.js"></script>
3
  </body>
4
</html>

修改routers/index.js

1
'use strict';
2
var express = require('express');
3
var router = express.Router();
4
5
/* GET home page. */
6
router.get('/', function(req, res) {
7
    res.render('index', { title: '后台登录' });
8
});
9
module.exports = router;

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

修改public/stylesheets/style.css

1
.index {
2
  width: 80%;
3
  position: absolute;
4
  top: 50%;
5
  left: 50%;
6
  transform: translate(-50%, -50%);
7
}
8
.index h1 {
9
  text-align: center;
10
  color: #333;
11
  border-bottom: 1px #eee solid;
12
  padding-bottom: 10px;
13
}
14
.index .container {
15
  width: 400px;
16
  background: #fff;
17
  border-radius: 6px;
18
  padding: 10px;
19
  box-shadow: 0 0 8px #ccc;
20
}
21
.index .container .input-group {
22
  margin: 20px auto;
23
}
24
.index .container .login {
25
  float: right;
26
}
27
.index .container .reg {
28
  float: left;
29
}

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

6、新建user.js
在test目录下创建一个model文件夹，并新建一个user.js的文件，内容如下：

1
/**
2
 * Created by tony on 2017/4/18.
3
 */
4
var mongoose = require('mongoose');
5
6
var UserSchema = new mongoose.Schema({
7
    name: String,
8
    password: String
9
});
10
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

1
<% include header.ejs %>
2
<div class="index">
3
    <div class="container">
4
        <h1><%= title %></h1>
5
        <form id="form" action="/register_suc" method="post">
6
            <div class="input-group">
7
                <span class="input-group-addon" id="sizing-addon1">USERNAME</span>
8
                <input type="text" name="name" class="form-control" placeholder="用户名" aria-describedby="sizing-addon1" id="name">
9
            </div>
10
            <div class="input-group">
11
                <span class="input-group-addon" id="sizing-addon2">PASSWORD</span>
12
                <input type="password" name="password" class="form-control" placeholder="密码" aria-describedby="sizing-addon2" id="password">
13
            </div>
14
            <input type="submit" class="btn btn-primary login" value="注册" >
15
        </form>
16
    </div>
17
</div>
18
<% include footer.ejs %>

然后在routers下建立register.js

1
'use strict';
2
var express = require('express');
3
var router = express.Router();
4
5
/* GET home page. */
6
router.get('/', function(req, res) {
7
    res.render('register', { title: '用户注册' });
8
});
9
10
module.exports = router;

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

1
'use strict';
2
var express = require('express');
3
var router = express.Router();
4
var mongoose = require('mongoose');
5
var user = require('../model/user');
6
/*导入node的加密库*/
7
var crypto = require('crypto');
8
9
/* GET home page. */
10
router.post('/', function(req, res) {
11
    var md5 = crypto.createHash('md5');
12
    var name = req.body.name;
13
    var password = req.body.password;
14
    if(name==='' && name.length<=0 && password==='' && password.length<=0){
15
        res.render('register_suc.ejs', {title: '用户名或密码不能为空', name: '', password: ''});
16
    }else {
17
        /*MD5加密密码*/
18
        md5.update(password + name);
19
        var pwd = md5.digest('base64');//将加密后的md5密码使用base64加密
20
        //使用findOne查询数据库中是否存在相同的用户名，如果存在则提示更换用户名，否则将内容写入数据库
21
        user.findOne({name: name}, function (err, doc) {
22
            if (err) return next(err);
23
            //查询数据库是否有相同的用户名，假如存在则提示注册失败
24
            if (doc) {
25
                res.render('register_suc.ejs', {title: '用户名已经存在，请更换', name: '', password: ''});
26
            } else {
27
                /*var usernow =new user({name:name,password:pwd});
28
                 //如果用户名不存在，则将当前用户名和密码保存到数据库
29
                 usernow.save();
30
                 res.render('register_suc.ejs', { title: '注册成功',name:name,password:pwd });*/
31
                user.create({ // 创建一组user对象置入model
32
                    name: name,
33
                    password: pwd
34
                }, function (err, doc) {
35
                    if (err) {
36
                        res.send(500);
37
                        console.log(err);
38
                    } else {
39
                        res.render('register_suc.ejs', {title: '注册成功', name: name, password: pwd});
40
                        //res.send(200);
41
                    }
42
                });
43
            }
44
        })
45
    }
46
});
47
48
49
module.exports = router;

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

1
<% include header.ejs %>
2
<div class="index">
3
    <div class="container">
4
        <h1><%= title %></h1>
5
        <%if(name!='' && password != ''){%>
6
        用户名：<%=name%><br>密码：<%=password%>
7
        <%}%>
8
    </div>
9
</div>
10
<% 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，可以看到如下画面

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

注册功能实现了，下面我们就实现下登录功能吧
8、编写登录页面
首先我们的在views下新建一个home.ejs来显示登录成功后的用户名
home.ejs

1
<% include header.ejs %>
2
<div class="index">
3
    <div class="container">
4
        <h1><%= title %></h1>
5
        <%if(name !='' && name.length>0){%>
6
        <%=name%>
7
        <%}%>
8
    </div>
9
</div>
10
<% include footer.ejs %>

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

1
'use strict';
2
var express = require('express');
3
var router = express.Router();
4
var mongoose = require('mongoose');
5
var user = require('../model/user');
6
/*导入node的加密库*/
7
var crypto = require('crypto');
8
/* 创建路由，并使用post接受index传递过来的name和password */
9
router.post('/', function(req, res, next) {
10
    var md5 = crypto.createHash('md5');
11
    var password = req.body.password;//获得传递过来的password
12
    var name = req.body.name;//获得传递过来的name
13
    md5.update(password+name);//MD5混淆加密内容为password+name
14
    var pwd = md5.digest('base64');//将加密好的MD5以base64的形式展现出来
15
    if(pwd==='' && name ===''){//假如传递过来的name和password为空
16
        res.render('home', { title: '发生错误',name:'请输入用户名和密码' });//路由则传递相关错误信息
17
    }
18
    //console.log(pwd+' '+name);
19
    /* 查询数据库中的name与password是否与用户输入的一致，使用findOne({},callback)方法 */
20
    user.findOne({ name:name,password:pwd },function (err, doc) {
21
        if (err) return next(err);
22
            if(doc){
23
                res.render('home', { title: '登录成功',name:name });
24
            }else{
25
                res.render('home',{title:'发生错误',name:'请检查您的用户名及密码'});
26
            }
27
    });
28
});
29
30
module.exports = router;

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