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

Jackwoo 發布于2019-06-26 17:18 / 1335人閱讀

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

1、添加登錄視圖

添加視圖

前面我們已經實現了注冊功能，用戶可以成功注冊，接著我們就開始讓用戶登錄了，此節我們就實現用戶的登錄功能，并且登錄成功后跳轉商品頁面查看商品。

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

2、訪問登陸視圖

訪問視圖

有了登錄頁面，那么注冊頁面(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";

試試登陸、注冊按鈕能否成功跳轉！

3、添加登陸功能

實現登陸

我們為登陸按鈕增加單擊事件和對應函數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請求處理方法。

4、登陸處理

關于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 %>，指定到相應位置即可。

5、添加商品頁視圖

商品頁視圖

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

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

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

這里我們假設如果用戶未登錄將不能查看商品主頁，所以，在請求處理中我們還需要判斷用戶的登陸狀態，這個可以使用我們在登錄處理時所保存的用戶個人信息。

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

注：Commodity：商品集合所有數據，內置圖片路徑為“/example/img”


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

6、商品頁請求處理

請求處理

在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");
        }
    })
}

7、商品添加視圖頁

添加商品

添加商品，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("添加失?。?);
    }
})

8、商品添加請求處理

商品添加處理

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/19040.html

電商購物網站 - 需求與設計

摘要：登錄之后，用戶可以對相關商品進行選購并添加到購物車。結構劃分項目主要分為以下幾大模塊注冊模塊，登錄模塊，商品模塊購物車模塊結算模塊。購物車模塊對相關商品進行增加減少刪除操作。結算模塊對購物車內已選擇商品進行結算。 1、功能介紹用戶可以完成注冊、登錄，登錄后對商品進行瀏覽。登錄之后，用戶可以對相關商品進行選購并添加到購物車。用戶可以對購物車里面的商品進行增加、減少、刪除操作。用...

Anshiii 2019-06-26 17:16 評論0 收藏0
電商購物網站 - 詳細設計

摘要：用戶注冊模塊的設計與實現注冊模塊功能設計介紹功能本模塊主要用于新用戶注冊，用戶通過表單提供用戶名和密碼信息，系統根據用戶提供的注冊信息對用戶進行具體操作。如果身份合法，則用戶可進入商品頁面。 1、用戶注冊模塊的設計與實現注冊模塊功能設計介紹功能：本模塊主要用于新用戶注冊，用戶通過表單提供用戶名和密碼信息，系統根據用戶提供的注冊信息對用戶進行具體操作。輸入操作：用戶名、密碼、確認密...

yck 2019-06-26 17:16 評論0 收藏0
說一說幾種登錄認證方式，你用的哪一種

摘要：登錄認證幾乎是任何一個系統的標配，系統客戶端等，好多都需要注冊登錄授權認證。假設我們開發了一個電商平臺，并集成了微信登錄，以這個場景為例，說一下的工作原理。微信網頁授權是授權碼模式的授權模式。登錄認證幾乎是任何一個系統的標配，web 系統、APP、PC 客戶端等，好多都需要注冊、登錄、授權認證。場景說明以一個電商系統，假設淘寶為例，如果我們想要下單，首先需要注冊一個賬號。擁有了賬...

idealcn 2019-08-15 13:58 評論0 收藏0
電商安全無小事，如何有效地抵御 CSRF 攻擊？

摘要：與攻擊相比，攻擊往往很少見，因此對其進行防范的資源也相當稀少。不過，這種受信任的攻擊模式更加難以防范，所以被認為比更具危險性。通過實時升級系統快速同步最新漏洞，避免零日攻擊。現在，我們絕大多數人都會在網上購物買東西。但是很多人都不清楚的是，很多電商網站會存在安全漏洞。比如烏云就通報過，國內很多家公司的網站都存在 CSRF 漏洞。如果某個網站存在這種安全漏洞的話，那么我們在購物的過程中...

趙連江 2019-06-21 16:26 評論0 收藏0
互聯網業務安全之通用安全風險模型

摘要：驗證碼安全參考信息重放登錄注冊找密等入口，可能通過短信驗證碼郵箱驗證碼之類的進行確認操作，如果末對操作進行次數及頻率上的限制，則會產生大量的重放攻擊。高并發缺陷交易類重放攻擊，高并發的情況下末對用戶操作行為加鎖，導致購買限制的繞過。 showImg(https://segmentfault.com/img/bVBVVR); 業務安全從流程設計維度可劃分為賬戶體系安全、交易體系安全、支付...

liaorio 2019-06-21 16:30 評論0 收藏0