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

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