Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

node+express+mongodb注册登录实例

Posted on 2017年4月19日2017年4月20日 by king2088

如果你之前对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 %>

<%= title %>

USERNAME
PASSWORD

注册

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

2、header.ejs文件内容




<%= title %>

3、footer.ejs




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 %>

<%= title %>

USERNAME
PASSWORD


<% 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 %>

<%= title %>

<%if(name!='' && password != ''){%>
用户名:<%=name%>
密码:<%=password%>
<%}%>

<% 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 %>

<%= title %>

<%if(name !='' && name.length>0){%>
<%=name%>
<%}%>

<% 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登录

3 thoughts on “node+express+mongodb注册登录实例”

  1. jie说道:
    2017年8月2日 上午10:58

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

    回复
  2. 康家豪说道:
    2019年9月23日 下午9:05

    为什么POST /register_suc – – ms – – 注册页面点击注册时服务被挂起

    回复
  3. 康家豪说道:
    2019年9月23日 下午9:10

    是因为我express自动生成的框架没有test目录嘛

    回复

发表评论 取消回复

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

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 4月
一 二 三 四 五 六 日
 12
3456789
10111213141516
17181920212223
24252627282930
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme