电商购物网站-登录浏览

1.添加登录视图添加视图我们之前已经实现了注册功能，用户可以注册成功，接下来我们开始让用户登录，本节我们来实现用户登录功能。并在登录成功后，跳转到产品页面查看产品。首先，我们还是在views目录下添加登录视图页面——login.html，效果图如下：2、访问登录视图。如果访问视图有登录页面，则在注册页面的登录按钮上添加登录页面的链接。相应着陆页的注册按钮也是如此。这里我们还是添加对应的文件来处理登录页面请求，在routes目录下新建一个名为login.js的文件，先添加一个处理get请求的方法，代码参考如下：module.exports=function(app){app.get('/login',function(req,res){res.render('login');})};像注册文件一样添加到index.js中，如下：require('./login')(app);在注册视图页面的register()函数的回调中，当注册成功后，我们可以跳转到登录页面，如下：location.href='login';尝试登录和注册按钮跳转成功！3、添加登录函数实现登录我们为登录按钮添加点击事件和对应的函数login()，参考如下：functionlogin(){vardata=$("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、登录处理关于登录视图页面的post请求处理，我们需要判断用户输入的用户名是否存在，密码是否正确，并使用变量保存相应的提示信息。当用户名和密码都正确时，返回成功，保存用户的个人信息，用于判断用户的登录状态。详情请见报名查看页面的发帖要求。app.post('/login',function(req,res){varUser=global.dbHelper.getModel('user'),uname=req.body.uname;User.findOne({name:uname},function(error,doc){if(userdoesnotexist){req.session.error='Usernamedoesnotexist!';res.sendStatus(404);}elseif(userexists,passwordiswrong){req.session.error="密码错误！";res.sendStatus(404);}else{req.session.user=doc;res.sendStatus(200);}})});还记得我们登录时保存的局部变量messagehtml标签中包含了相应的提示信息。我们也可以在登录页面使用它。用法：<%-message%>，指定相应的位置即可。5.增加产品页面视图。用户登录成功后，产品页面视图会跳转到主页视图页面（产品主页），在这里可以浏览和选择产品。还是在views目录下，添加首页产品视图页面，如下简单效果图：用户登录成功后，跳转到首页，这里我们还是单独处理，新建home.jsroutes目录下的文件来处理来自home的get请求。这里我们假设如果用户没有登录，他将无法查看产品主页。因此，在请求处理中，我们还需要判断用户的登录状态。这可以使用在登录过程中保存的用户个人信息。关于商品页面的视图展示，我们只需要有它的名称、价格、图片即可。这里使用ejs模板进行循环展示。可以参考以下方法：注：商品：商品收集所有数据，内置图片路径为"/example/img"<%for(variinCommoditys){if(!Commoditys[i].name)continue;%>

<%}%>6.商品页面请求处理Requestprocessing在首页的get请求处理中，我们首先需要判断用户的处于登录状态，用户登录后只能跳转到商品页面，如果已登录，则跳转到登录页面，进入商品页面时，商品集合的所有数据都会显示在页面上。首先在models.js文件中定义商品集合的Schema属性，包括商品名称、商品价格、商品图片。这里简单的定义如下：commodity:{name:String,price:Number,imgSrc:String}在routes目录下添加home.js文件（在index.js文件中引用）。具体处理方法可以参考如下代码：dbHelper.getModel('commodity');Commodity.find({},function(error,docs){//将Commoditys变量传递给home模板res.render('home',{Commoditys:docs});})}else{req.session.error="Pleaseloginfirst";res.redirect('/login');}})}7.商品添加视图页面添加商品和添加商品，views下添加addcommodity视图页面添加商品的目录，这里简单样式参考如下：对应的addcommodity函数参考代码如下：//imgSrc表示图片路径），内置图片5张，格式：xmsz-X.jpg（X是1到5之间的数字）。vardata=$("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("Addfailed!");}})8.商品添加请求处理Commodityadditionprocessing这里直接在home.js文件中添加保存商品的处理方法，如下：app.get('/addcommodity',function(req,res){res.render('addcommodity');});app.post('./addcommodity',function(req,res){varCommodity=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);}})})至此商品页面的展示和添加就完成了。下一节我们将实现添加商品到购物车和商品页面支付的功能。继续前进！