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

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”

<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>

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

到这里关于商品页的展示和添加就完成了，在下一节里我们将实现商品页商品加入购物车并结算的功能，继续加油吧！