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 ；）