Node.js基于express搭建注册登录功能

学习新技术最快捷的方式就是做项目。这两天我写了个基于express和MongoDB的Web登录功能

先看看效果

技术选择

1. Node.js
2. MongoDB
3. express
4. mongoose
5. Bootstrap

其中MongoDB的简单使用可以看我上一篇博文

项目目录

.
├── database 
│   ├── entity.js //实体Entity
│   ├── model.js //模型Model
│   └── schema.js //骨架Schema
├── package.json
├── public
│   ├── home.html //主页
│   ├── login.html //登陆页
│   ├── register.html //注册页
│   └── source
│       ├── login.css
│       ├── login.less
│       └── reset.css
├── routes
│   ├── home.js //主页路由
│   ├── login.js //登录路由
│   ├── login_process.js //登录POST处理
│   ├── register.js //注册路由
│   └── register_process.js //注册POST处理
└── server
    └── index.js //入口文件

实现思路

1. 进入登陆页面
2. 点击登录按钮并利用POST方法提交
3. 提交的数据传给后台与数据库取出的数据进行匹配按情况分配路由

路由

index.js

app. use( '/', loginRouter); app. use( '/login_process', loginProcessRouter); app. use( '/home', homeRouter); app. use( '/register', registerRouter); app. use( '/register_process', registerProcessRouter);

在入口文件中分配路由

login.js

var express = require( 'express'); var app = express(); var path = require( 'path'); var router = express.Router(); router.get( '/', function (req, res) { res.sendFile(path.join(__dirname, '../public', 'login.html')); }); module.exports = router;

简单说明一下，当浏览器的地址栏变为localhost:3000/的时候，渲染login.html

login_process.js

var express = require( 'express'); var path = require( 'path'); var bodyParser = require( 'body-parser'); var app = express(); var router = express.Router(); var UserModel = require( '../database/model'); var UserEntity = require( '../database/entity'); var urlencodedParser = bodyParser.urlencoded({ extended: false }); router.post( '/', urlencodedParser, function (req, res) { response = { username: req.body.username, password: req.body.password }; var input_username = response.username; var input_password = response.password; function getUser() { var user; user = UserModel.findOne({ USERNAME: input_username }) .exec() .then( function (result) { return result; }) .error( function (error) { return 'Promise Error:' + error; }) return user; } getUser() .then( function(result){ if(result === null) { res.redirect( '/'); } else if (input_username === result.USERNAME || input_password === result.PASSWORD) { console.log( 'true'); res.redirect( '/home'); } else { console.log( 'false'); res.redirect( '/'); } }) .error( function(error){ return 'Promise Error:' + error; }) }); module.exports = router;

在login_process.js文件内，我们接收到了前端页面POST过来的数据，并利用mongoose的Model来查询数据库与之比较。利用了Promise来避免回调地狱，使得代码能够更好的被读懂和维护。

注：Model模型，是经过Schema构造来的，除了Schema定义的数据库骨架以外，还具有数据库行为模型，他相当于管理数据库属性、行为的类

不足

这毕竟只是个小demo，有很多不完善的地方，就在这里列出来，以便日后补上

• 前端输入提示不友好
• 没有利用session和cookie进行登录拦截

就写到这里，祝大家have a nice day ；）

个人建了前端学习群，旨在一起学习前端。纯净、纯粹技术讨论，非前端人员勿扰！入群加我微信：iamaixiaoxiao。