摘要：項(xiàng)目啟動(dòng)簡單啟動(dòng)首先，新建一個(gè)項(xiàng)目工程目錄，然后在目錄下創(chuàng)建啟動(dòng)文件。這里會(huì)用到框架來實(shí)現(xiàn)相關(guān)功能，所以，需要先安裝它。然后我們就開始修改視圖頁面，添加單擊事件，例如注冊(cè)對(duì)應(yīng)函數(shù)，大致如下通過方法進(jìn)行序列化表單值，創(chuàng)建文本字符串。

簡單啟動(dòng)

首先，新建一個(gè)項(xiàng)目工程目錄，然后在目錄下創(chuàng)建啟動(dòng)文件app.js。

這里會(huì)用到Express框架來實(shí)現(xiàn)相關(guān)功能，所以，需要先安裝它。

在啟動(dòng)文件添加如下內(nèi)容，來測(cè)試Express框架是否引用成功。

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

瀏覽器查看結(jié)果顯示"Hello World!"，如收到響應(yīng)信息則表明我們項(xiàng)目的第一步已經(jīng)成功搞定。

項(xiàng)目已經(jīng)啟動(dòng)成功，下面我們開始創(chuàng)建相關(guān)目錄，用于存儲(chǔ)不同的文件。

public目錄：存放靜態(tài)文件。

routes目錄：存放路由文件。

views目錄： 存放頁面文件。

common目錄：存放公共文件。

public目錄(可不選)，新建javascripts、stylesheets、images三個(gè)目錄用以存儲(chǔ)js、css、img相關(guān)文件。

這里我們內(nèi)置了一些js、css文件來實(shí)現(xiàn)簡單頁面樣式和操作，在頁面視圖中直接使用即可，引用方法如下：

添加文件

有了目錄，我們開始添加文件，先來添加一個(gè)登錄頁面register.html，便于管理和開發(fā)，統(tǒng)一把視圖頁面放到views目錄下。

views目錄，添加register.html注冊(cè)視圖頁，如下簡單效果圖：

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

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

使用engine函數(shù)注冊(cè)模板引擎并指定處理后綴名為html的文件。

設(shè)定視圖存放的目錄：

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

如果是在本地項(xiàng)目中，我們還要指定本地靜態(tài)資源訪問的路徑,如下設(shè)置：

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

訪問注冊(cè)頁

有了視圖頁面，下面我們就開始訪問它，app.js文件部分內(nèi)容，引入相關(guān)模塊資源，然后簡單訪問如下：

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

啟動(dòng)訪問80端口，如成功看到注冊(cè)頁面則表示項(xiàng)目已經(jīng)運(yùn)行成功，如未看到，查看相關(guān)錯(cuò)誤信息，是否缺少相關(guān)模塊，安裝和引用即可。

定義Schema

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

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

有了集合的Schema文件，如何訪問呢，接著我們會(huì)介紹如何使用Model模型操作這些屬性。

還是common目錄，我們?cè)谛陆ㄒ粋€(gè)公共方法 —— dbHelper.js文件，來操作這些Schema，因?yàn)楹竺孢€會(huì)涉及此問題，所以我們寫成一個(gè)公共的方法，dbHelper文件內(nèi)容如下：

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模型就可以對(duì)數(shù)據(jù)庫有實(shí)質(zhì)性的操作了。

關(guān)于Model，簡單介紹：由Schema構(gòu)造生成的模型，具有數(shù)據(jù)庫操作的行為。

添加函數(shù)

關(guān)于dbHelper.js文件里方法的訪問很簡單，如下所示：

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

這里我們使用global來定義全局變量dbHelper，那么dbHelper就可以在任何模塊內(nèi)調(diào)用了。

然后我們就開始修改register視圖頁面，添加單擊事件，例如：

對(duì)應(yīng)register()函數(shù)，大致如下：

function register() {
    //通過serialize()方法進(jìn)行序列化表單值，創(chuàng)建文本字符串。
    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";
        }
    })
}

添加路由

這里我們需要新建一個(gè)文件register.js，專門用來處理來自register頁面的post請(qǐng)求， 在后面還會(huì)有多個(gè)不同處理文件，所以統(tǒng)一管理在routes目錄下，在實(shí)際開發(fā)中我們可能需要針對(duì)不同文件請(qǐng)求給出相應(yīng)文件的處理，所以我們就做分開處理。

這里register.js文件處理get和post請(qǐng)求的相關(guān)代碼如下：

//app：express對(duì)象
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 = "用戶名創(chuàng)建成功！";
                        res.send(200);
                    }
                })
            }
        })
    })
};

register的post請(qǐng)求處理中，我們使用了session(express-session模塊)還有處理post請(qǐng)求數(shù)據(jù)的body屬性(body-parser和multer模塊)，需先安裝他們，然后引用即可，如下參考：

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

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

后面還會(huì)再次添加多個(gè)路由記錄，所以便于管理和訪問，我們可以把他們統(tǒng)一放到一起，比如routes目錄下新建index.js文件專門用來存放添加的文件，代碼如下：

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

那么我們?cè)?b>app.js文件中直接引用index.js文件就可以訪問這些文件了，在index.js下寫入：

require("./routes")(app);//app:express對(duì)象

這里我們就一步到位，在register的post請(qǐng)求處理中我們使用了express-session模塊來保存相關(guān)信息，這里我們就使用中間件來傳遞這些提示信息，中間件內(nèi)容如下所示：

app.use(function (req, res, next) {
    res.locals.user = req.session.user;//保存用戶信息
    var err = req.session.error;//保存結(jié)果響應(yīng)信息
    res.locals.message = "";//保存html標(biāo)簽
    if (err) {
        res.locals.message = "
" + err + "
"
    } else {
        next();
    }
});

這里注意中間件的安放位置，還有我們?cè)O(shè)置了變量message并為其簡單添加了樣式，這里我們?cè)?b>register視圖里就用它來作為操作結(jié)果的信息提示，直接添加<%- message %>到視圖第一個(gè)div內(nèi)即可。

關(guān)于注冊(cè)我們基本已經(jīng)準(zhǔn)備就緒，開始打開連接數(shù)據(jù)庫并設(shè)置用戶過期時(shí)間(注意執(zhí)行順序，應(yīng)放置在首個(gè)中間件位置)，app.js條件內(nèi)容如下：

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

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

到這里，注冊(cè)功能已經(jīng)完畢，在用戶注冊(cè)的信息錄入中，我們沒有進(jìn)行相關(guān)的為空、兩次密碼的不匹配等等驗(yàn)證等等(可自行添加)，趕緊注冊(cè)試試吧，本地的話可以通過MongoVUE(可視化客戶端)來查看數(shù)據(jù)是否成功寫入數(shù)據(jù)庫。