電商購(gòu)物網(wǎng)站 - 登錄和瀏覽

Jackwoo 發(fā)布于2019-06-26 17:18 / 1345人閱讀

摘要：添加商品頁視圖商品頁視圖用戶登錄成功之后則跳轉(zhuǎn)至視圖頁面商品主頁，就可以進(jìn)行對(duì)商品的瀏覽和選擇了。

1、添加登錄視圖

添加視圖

前面我們已經(jīng)實(shí)現(xiàn)了注冊(cè)功能，用戶可以成功注冊(cè)，接著我們就開始讓用戶登錄了，此節(jié)我們就實(shí)現(xiàn)用戶的登錄功能，并且登錄成功后跳轉(zhuǎn)商品頁面查看商品。

首先，我們還是在views目錄下添加登錄視圖頁面 —— login.html，效果圖如下：

2、訪問登陸視圖

訪問視圖

有了登錄頁面，那么注冊(cè)頁面(register)的登錄按鈕添加指向登陸頁面的鏈接，相應(yīng)的登陸頁的注冊(cè)按鈕也是如此。

這里我們還是添加一個(gè)相對(duì)應(yīng)的文件用來處理login頁面的請(qǐng)求，routes目錄下新建名為login.js的文件，先來增加一個(gè)處理get請(qǐng)求的方法，代碼參考如下：

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

和register文件一樣添加到index.js中，如下：

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

register視圖頁的register()函數(shù)的回調(diào)中，當(dāng)注冊(cè)成功時(shí)我們就可以跳轉(zhuǎn)到登陸頁面了，如下：

location.href = "login";

試試登陸、注冊(cè)按鈕能否成功跳轉(zhuǎn)！

3、添加登陸功能

實(shí)現(xiàn)登陸

我們?yōu)榈顷懓粹o增加單擊事件和對(duì)應(yīng)函數(shù)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";
            }
        }
    })
}

在相應(yīng)的login.js文件中，我們還得添加相對(duì)應(yīng)的post請(qǐng)求處理方法。

4、登陸處理

關(guān)于login視圖頁的post請(qǐng)求處理，我們需要判斷用戶所輸入用戶名是否存在，密碼是否正確，并使用變量保存相應(yīng)提示信息，當(dāng)用戶名和密碼全部正確時(shí)，則返回成功并保存用戶的個(gè)人信息，用作來判斷用戶的登陸狀態(tài)，具體可參考register視圖頁的post請(qǐng)求。

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 (用戶存在, 密碼錯(cuò)誤) {
            req.session.error = "密碼錯(cuò)誤!";
            res.sendStatus(404);
        } else {
            req.session.user = doc;
            res.sendStatus(200);
        }
    })
});

還記得我們登陸的本地變量message嘛，用來保存html標(biāo)簽并包含相應(yīng)提示信息，這里在登陸頁面我們也可以使用，用法：<%- message %>，指定到相應(yīng)位置即可。

5、添加商品頁視圖

商品頁視圖

用戶登錄成功之后則跳轉(zhuǎn)至home視圖頁面(商品主頁)，就可以進(jìn)行對(duì)商品的瀏覽和選擇了。

還是views目錄，添加home商品視圖頁，如下簡(jiǎn)單效果圖：

用戶成功登錄之后跳轉(zhuǎn)至home頁，這里我們還是做分開處理，routes目錄下新建home.js文件用來處理來自home也的get請(qǐng)求。

這里我們假設(shè)如果用戶未登錄將不能查看商品主頁，所以，在請(qǐng)求處理中我們還需要判斷用戶的登陸狀態(tài)，這個(gè)可以使用我們?cè)诘卿浱幚頃r(shí)所保存的用戶個(gè)人信息。

關(guān)于商品頁的視圖展示我們只需要有其名稱、價(jià)格、圖片，這里使用ejs模板循環(huán)展示，可參考如下方式：

注：Commodity：商品集合所有數(shù)據(jù)，內(nèi)置圖片路徑為“/example/img”


    <%for(var i in Commoditys){
    if(!Commoditys[i].name) continue;%>
    
        
            
        
        
            <%=Commoditys[i].name%>
            ￥<%=Commoditys[i].price%>
        
        
            加入購(gòu)物車
        
    
    <%}%>

6、商品頁請(qǐng)求處理

請(qǐng)求處理

在home的get請(qǐng)求處理中，我們需要首先判斷用戶的登陸狀態(tài)，只有用戶登錄了方可跳轉(zhuǎn)到商品頁，如果為登陸呢則跳轉(zhuǎn)到登錄頁，而且在進(jìn)入商品頁的時(shí)候并傳入Commodity集合的所有數(shù)據(jù)數(shù)據(jù)在頁面展示。

首先呢，在models.js文件中定義Commodity集合的Schema屬性，共包括商品名稱、商品價(jià)格、商品圖片，這里簡(jiǎn)單定義如下：

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 = "請(qǐng)先登錄";
            res.redirect("/login");
        }
    })
}

7、商品添加視圖頁

添加商品

添加商品，views目錄下添加addcommodity視圖頁面用來對(duì)商品的添加，這里簡(jiǎn)單樣式參考如下：

相對(duì)應(yīng)的addcommodity函數(shù)參考代碼如下：

//imgSrc表示圖片路徑)，這里內(nèi)置了5張圖片，格式為：xmsz-X.jpg(X為1-5數(shù)字)。
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("添加失??！");
    }
})

8、商品添加請(qǐng)求處理

商品添加處理

這里我們就直接在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);
        }
    })
})

到這里關(guān)于商品頁的展示和添加就完成了，在下一節(jié)里我們將實(shí)現(xiàn)商品頁商品加入購(gòu)物車并結(jié)算的功能，繼續(xù)加油吧！

云服務(wù)器 GPU云服務(wù)器跨境電商瀏覽器跨境電商瀏覽器 php沒登錄不能瀏覽阿里云瀏覽器登錄服務(wù)器

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/19040.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Jackwoo

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

關(guān)于C++基礎(chǔ)的一些“碎碎念”

閱讀 1865·2021-09-29 09:35
云服務(wù)器和云虛擬主機(jī)有什么區(qū)別-云主機(jī)、云服務(wù)器、虛擬主機(jī)有什么區(qū)別呢？

閱讀 2726·2021-09-22 15:25
PIGYun：“喜迎金秋" 香港、韓國(guó)BGP混合CN2大帶寬僅14元起

閱讀 1980·2021-08-23 09:43
前端進(jìn)階（12） - css 的弱化與 js 的強(qiáng)化

閱讀 2061·2019-08-30 15:54
前端每日實(shí)戰(zhàn)：53# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)文本淡入淡出的 loader 動(dòng)畫

閱讀 3360·2019-08-30 15:53
哪些你知道或不知道的css，在這里或許都齊全

閱讀 2396·2019-08-30 13:50
移動(dòng)端鍵盤和光標(biāo)的兼容那點(diǎn)事

閱讀 2408·2019-08-30 11:24
前端框架這么多，該如何抉擇？

閱讀 2281·2019-08-29 15:37

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

電商購(gòu)物網(wǎng)站 - 登錄和瀏覽

相關(guān)文章

**電商購(gòu)物網(wǎng)站 - 需求與設(shè)計(jì)**

**電商購(gòu)物網(wǎng)站 - 詳細(xì)設(shè)計(jì)**

說一說幾種登錄認(rèn)證方式，你用的哪一種

電商安全無小事，如何有效地抵御 CSRF 攻擊？

互聯(lián)網(wǎng)業(yè)務(wù)安全之通用安全風(fēng)險(xiǎn)模型

發(fā)表評(píng)論

0條評(píng)論

Jackwoo

男|高級(jí)講師

TA的文章

關(guān)于C++基礎(chǔ)的一些“碎碎念”

云服務(wù)器和云虛擬主機(jī)有什么區(qū)別-云主機(jī)、云服務(wù)器、虛擬主機(jī)有什么區(qū)別呢？

PIGYun：“喜迎金秋" 香港、韓國(guó)BGP混合CN2大帶寬僅14元起

前端進(jìn)階（12） - css 的弱化與 js 的強(qiáng)化

前端每日實(shí)戰(zhàn)：53# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)文本淡入淡出的 loader 動(dòng)畫

哪些你知道或不知道的css，在這里或許都齊全

移動(dòng)端鍵盤和光標(biāo)的兼容那點(diǎn)事

前端框架這么多，該如何抉擇？

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

電商購(gòu)物網(wǎng)站 - 登錄和瀏覽

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！