学习新技术最快捷的方式就是做项目。这两天我写了个基于express和MongoDB的Web登录功能
先看看效果
技术选择
其中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 //入口文件
实现思路
进入登陆页面
点击登录按钮并利用POST方法提交
提交的数据传给后台与数据库取出的数据进行匹配按情况分配路由
路由
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 ;)