电商购物网站 - 登录和浏览

Jackwoo 发布于2019-06-26 17:18 / 1318人阅读

摘要：添加商品页视图商品页视图用户登录成功之后则跳转至视图页面商品主页，就可以进行对商品的浏览和选择了。

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没登录不能浏览阿里云浏览器登录服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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