電商購物網站 - 登陸和瀏覽

一、添加登陸視圖

添加視圖

前面咱們已經實現了註冊功能，用戶能夠成功註冊，接着咱們就開始讓用戶登陸了，此節咱們就實現用戶的登陸功能，而且登陸成功後跳轉商品頁面查看商品。

首先，咱們仍是在views目錄下添加登陸視圖頁面 —— login.html，效果圖以下：

二、訪問登錄視圖

訪問視圖

有了登陸頁面，那麼註冊頁面(register)的登陸按鈕添加指向登錄頁面的連接，相應的登錄頁的註冊按鈕也是如此。

這裏咱們仍是添加一個相對應的文件用來處理login頁面的請求，routes目錄下新建名爲login.js的文件，先來增長一個處理get請求的方法，代碼參考以下：

module.exports = function (app) {
    app.get('/login', function (req, res) {
        res.render('login');
    })
};

和register文件同樣添加到index.js中，以下：

require('./login')(app);

register視圖頁的register()函數的回調中，當註冊成功時咱們就能夠跳轉到登錄頁面了，以下：

location.href = 'login';

試試登錄、註冊按鈕可否成功跳轉！

三、添加登錄功能

實現登錄

咱們爲登錄按鈕增長單擊事件和對應函數login()，參考以下：

function login() {
    var data = $("form").serialize();
    $ajax({
        url: '/login',
        type: 'POST',
        data: data,
        success: function (data, status) {
            if (status == 'success') {
                location.href = 'home';
            }
        },
        error: function (data, status) {
            if (status == 'error') {
                location.href = 'login';
            }
        }
    })
}

在相應的login.js文件中，咱們還得添加相對應的post請求處理方法。

四、登錄處理

關於login視圖頁的post請求處理，咱們須要判斷用戶所輸入用戶名是否存在，密碼是否正確，並使用變量保存相應提示信息，當用戶名和密碼所有正確時，則返回成功並保存用戶的我的信息，用做來判斷用戶的登錄狀態，具體可參考register視圖頁的post請求。

app.post('/login', function (req, res) {
    var User = global.dbHelper.getModel('user'),
        uname = req.body.uname;
    User.findOne({name: uname}, function (error, doc) {
        if (用戶不存在) {
            req.session.error = '用戶名不存在！';
            res.sendStatus(404);
        } else if (用戶存在, 密碼錯誤) {
            req.session.error = "密碼錯誤!";
            res.sendStatus(404);
        } else {
            req.session.user = doc;
            res.sendStatus(200);
        }
    })
});

還記得咱們登錄的本地變量message嘛，用來保存html標籤幷包含相應提示信息，這裏在登錄頁面咱們也可使用，用法：<%- message %>，指定到相應位置便可。

五、添加商品頁視圖

商品頁視圖

用戶登陸成功以後則跳轉至home視圖頁面(商品主頁)，就能夠進行對商品的瀏覽和選擇了。

仍是views目錄，添加home商品視圖頁，以下簡單效果圖：

用戶成功登陸以後跳轉至home頁，這裏咱們仍是作分開處理，routes目錄下新建home.js文件用來處理來自home也的get請求。

這裏咱們假設若是用戶未登陸將不能查看商品主頁，因此，在請求處理中咱們還須要判斷用戶的登錄狀態，這個可使用咱們在登陸處理時所保存的用戶我的信息。

關於商品頁的視圖展現咱們只須要有其名稱、價格、圖片，這裏使用ejs模板循環展現，可參考以下方式：

注：Commodity：商品集合全部數據，內置圖片路徑爲「/example/img」

<ul class="spys">
    <%for(var i in Commoditys){
    if(!Commoditys[i].name) continue;%>
    <li class="spys li">
        <div>
            <img src="img/<%=Commoditys[i].imgSrc%>" width="80" height="100">
        </div>
        <div>
            <a><%=Commoditys[i].name%></a>
            <strong style="color: red;">￥<%=Commoditys[i].price%></strong>
        </div>
        <div>
            <a class="btn btn-success" style="width: 120px;" href="">加入購物車</a>
        </div>
    </li>
    <%}%>
</ul>

六、商品頁請求處理

請求處理

在home的get請求處理中，咱們須要首先判斷用戶的登錄狀態，只有用戶登陸了方可跳轉到商品頁，若是爲登錄呢則跳轉到登陸頁，並且在進入商品頁的時候並傳入Commodity集合的全部數據數據在頁面展現。

首先呢，在models.js文件中定義Commodity集合的Schema屬性，共包括商品名稱、商品價格、商品圖片，這裏簡單定義以下：

commodity: {
    name: String,
    price: Number,
    imgSrc: String
}

routes目錄下添加home.js文件(index.js文件中引用)。

具體處理方式可參考以下代碼：

module.exports = function (app) {
    app.get('/home', function (req, res) {
        if (req.session.user) {
            var Commodity = global.dbHelper.getModel('commodity');
            Commodity.find({}, function (error, docs) {
                //將Commoditys變量傳入home模板
                res.render('home', {Commoditys: docs});
            })
        } else {
            req.session.error = "請先登陸";
            res.redirect('/login');
        }
    })
}

七、商品添加視圖頁

添加商品

添加商品，views目錄下添加addcommodity視圖頁面用來對商品的添加，這裏簡單樣式參考以下：

相對應的addcommodity函數參考代碼以下：

//imgSrc表示圖片路徑)，這裏內置了5張圖片，格式爲：xmsz-X.jpg(X爲1-5數字)。
var data = $("form").serialize() + "&imgSrc=" + "xmsz-" + Math.floor(Math.random() * 5 + 1) + ".jpg";
$ajax({
    url: './addcommodity',
    type: 'POST',
    data: data,
    success: function (data, status) {
        if (status == 'success') {
            alert("添加成功！");
        }
    },
    error: function (data, err) {
        alert("添加失敗！");
    }
})

八、商品添加請求處理

商品添加處理

這裏咱們就直接在home.js文件中添加保存商品的處理方法，以下：

app.get('/addcommodity', function (req, res) {
    res.render('addcommodity');
});
app.post('./addcommodity', function (req, res) {
    var Commodity = global.dbHelper.getModel('commodity');
    Commodity.create({
        name: req.body.name,
        price: req.body.price,
        imgSrc: req.body.imgSrc
    }, function (error, doc) {
        if (doc) {
            res.sendStatus(200);
        } else {
            res.sendStatus(404);
        }
    })
})

到這裏關於商品頁的展現和添加就完成了，在下一節裏咱們將實現商品頁商品加入購物車並結算的功能，繼續加油吧！