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

一、添加登陆视图

添加视图

前面咱们已经实现了注册功能，用户能够成功注册，接着咱们就开始让用户登陆了，此节咱们就实现用户的登陆功能，而且登陆成功后跳转商品页面查看商品。

首先，咱们仍是在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);
        }
    })
})

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