電商購物網站 - 實現註冊

一、項目啓動

簡單啓動

首先，新建一個項目工程目錄，而後在目錄下建立啓動文件app.js。

這裏會用到Express框架來實現相關功能，因此，須要先安裝它。

在啓動文件添加以下內容，來測試Express框架是否引用成功。

let express = require('express');
let app = express();
app.get('/', function (req, res) {
    res.send('Hello World!');
});
app.listen(80);

瀏覽器查看結果顯示"Hello World!"，如收到響應信息則代表咱們項目的第一步已經成功搞定。

二、建立目錄

項目已經啓動成功，下面咱們開始建立相關目錄，用於存儲不一樣的文件。

1. public目錄：存放靜態文件。

2. routes目錄：存放路由文件。

3. views目錄： 存放頁面文件。

4. common目錄：存放公共文件。

5. public目錄(可不選)，新建javascripts、stylesheets、images三個目錄用以存儲js、css、img相關文件。

這裏咱們內置了一些js、css文件來實現簡單頁面樣式和操做，在頁面視圖中直接使用便可，引用方法以下：

<link href="example/css/bootstrap.min.css" rel="stylesheet" >    

<script src="example/js/jquery.min.js" type="text/javascript"></script> 

<script src="example/js/bootstrap.min.js" type="text/javascript"></script>

三、添加註冊視圖頁面

添加文件

有了目錄，咱們開始添加文件，先來添加一個登陸頁面register.html，便於管理和開發，統一把視圖頁面放到views目錄下。

views目錄，添加register.html註冊視圖頁，以下簡單效果圖：

有了視圖頁面，咱們就能夠訪問它了，那要如何訪問呢，這裏就要使用到ejs模板了，安裝方法npm install ejs --save，引用以下：

app.set('view engine', 'html');
app.engine('.html', require('ejs').__express);

使用engine函數註冊模板引擎並指定處理後綴名爲html的文件。

設定視圖存放的目錄：

app.set('views', require('path').join(__dirname, 'views'));

若是是在本地項目中，咱們還要指定本地靜態資源訪問的路徑,以下設置：

app.use(express.static(require('path').join(__dirname, 'public')));

四、訪問註冊視圖頁面

訪問註冊頁

有了視圖頁面，下面咱們就開始訪問它，app.js文件部份內容，引入相關模塊資源，而後簡單訪問以下：

app.get('/', function (req, res) {
    res.render('register');
});
app.listen(80);

啓動訪問80端口，如成功看到註冊頁面則表示項目已經運行成功，如未看到，查看相關錯誤信息，是否缺乏相關模塊，安裝和引用便可。

五、定義user集合Schema

定義Schema

首先在common目錄內添加models.js文件用來保存各個集合的Schema文件(集合屬性)，也便於咱們查看和訪問，具體內容以下所示：

module.exports = {
    user: {
        name: {type: String, required: true},
        password: {type: String, required: true},
        gender: {type: Boolean, default: true}
    }
};

有了集合的Schema文件，如何訪問呢，接着咱們會介紹如何使用Model模型操做這些屬性。

六、建立公共方法

仍是common目錄，咱們在新建一個公共方法 —— dbHelper.js文件，來操做這些Schema，由於後面還會涉及此問題，因此咱們寫成一個公共的方法，dbHelper文件內容以下：

let mongoose = require('mongoose'),
    Schema = mongoose.Schema,
    models = require('./models');

for (let m in models) {
    mongoose.model(m, new Schema(models[m]));
}
module.exports = {
    getModel: function (type) {
        return _getModel(type);
    }
};
let _getModel = function (type) {
    return mongoose.model(type);
};

如上所示咱們經過getModel可獲取集合的Model模型就能夠對數據庫有實質性的操做了。

關於Model，簡單介紹：由Schema構造生成的模型，具備數據庫操做的行爲。

七、添加註冊頁單擊函數

添加函數

關於dbHelper.js文件裏方法的訪問很簡單，以下所示：

global.dbHelper = require('./common/dbHelper');

這裏咱們使用global來定義全局變量dbHelper，那麼dbHelper就能夠在任何模塊內調用了。

而後咱們就開始修改register視圖頁面，添加單擊事件，例如：

<input type="button" onclick="register()" value="注 冊">

對應register()函數，大體以下：

function register() {
    //經過serialize()方法進行序列化表單值，建立文本字符串。
    var data = $("form").serialize();
    //例如："username=張三&password=12345"
    $.ajax({
        url: '/register',
        type: 'POST',
        data: data,
        success: function (data, status) {
            if (status == 'success') {
                location.href = 'register';
            }
        },
        error: function (res, err) {
            location.href = 'register';
        }
    })
}

八、添加註冊頁請求路由

添加路由

這裏咱們須要新建一個文件register.js，專門用來處理來自register頁面的post請求， 在後面還會有多個不一樣處理文件，因此統一管理在routes目錄下，在實際開發中咱們可能須要針對不一樣文件請求給出相應文件的處理，因此咱們就作分開處理。

這裏register.js文件處理get和post請求的相關代碼以下：

//app：express對象
module.exports = function (app) {
    app.get('/register', function (req, res) {
        res.render('register');
    });
    app.post('/register', function (req, res) {
        var User = global.dbHelper.getModel('user'),
            uname = req.body.uname;
        User.findOne({name: uname}, function (error, doc) {
            if (doc) {
                req.session.error = '用戶名已存在！';
                res.send(500);
            } else {
                User.create({
                    name: uname,
                    password: req.body.upwd
                }, function (error, doc) {
                    if (error) {
                        res.send(500);
                    } else {
                        req.session.error = '用戶名建立成功！';
                        res.send(200);
                    }
                })
            }
        })
    })
};

九、模塊的加載和引用

register的post請求處理中，咱們使用了session(express-session模塊)還有處理post請求數據的body屬性(body-parser和multer模塊)，需先安裝他們，而後引用便可，以下參考：

//引用模塊
var bodyParser = require('body-parser');
var multer = require('multer');
var session = require('express-session');

//調用中間件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(multer());

後面還會再次添加多個路由記錄，因此便於管理和訪問，咱們能夠把他們統一放到一塊兒，好比routes目錄下新建index.js文件專門用來存放添加的文件，代碼以下：

module.exports = function (app) {
    require('./register')(app);
};

那麼咱們在app.js文件中直接引用index.js文件就能夠訪問這些文件了，在index.js下寫入：

require('./routes')(app);//app:express對象

十、中間件傳遞信息

這裏咱們就一步到位，在register的post請求處理中咱們使用了express-session模塊來保存相關信息，這裏咱們就使用中間件來傳遞這些提示信息，中間件內容以下所示：

app.use(function (req, res, next) {
    res.locals.user = req.session.user;//保存用戶信息
    var err = req.session.error;//保存結果響應信息
    res.locals.message = '';//保存html標籤
    if (err) {
        res.locals.message = '<div class="alert alert-danger" style="margin-bottom: 20px;color: red;">' + err + '</div>'
    } else {
        next();
    }
});

這裏注意中間件的安放位置，還有咱們設置了變量message併爲其簡單添加了樣式，這裏咱們在register視圖裏就用它來做爲操做結果的信息提示，直接添加<%- message %>到視圖第一個div內便可。

關於註冊咱們基本已經準備就緒，開始打開鏈接數據庫並設置用戶過時時間(注意執行順序，應放置在首箇中間件位置)，app.js條件內容以下：

mongoose.Promise=global.Promise;
mongoose.connect("mongodb://127.0.0.1/test");

app.use(session({
    secret: 'secret',
    cookie: {
        maxAge: 1000 * 60 * 30
    }
}));

到這裏，註冊功能已經完畢，在用戶註冊的信息錄入中，咱們沒有進行相關的爲空、兩次密碼的不匹配等等驗證等等(可自行添加)，趕忙註冊試試吧，本地的話能夠經過MongoVUE(可視化客戶端)來查看數據是否成功寫入數據庫。