Skip to content

Latest commit

 

History

History
214 lines (187 loc) · 6.99 KB

4.9 添加商品.md

File metadata and controls

214 lines (187 loc) · 6.99 KB
Raw

4.9.1 商品模型设计

我们只存储商品的id、商品名称、商品价格、商品图片这几个字段，对应修改 common/models.js，添加如下代码：

common/models.js

module.exports = {
    user:{
        name: {type: String,required: true},
        password: {type: String, required: true}
    },
    commodity: {
        name: String,
        price: Number,
        imgSrc: String
    },
    cart: {
        uId: {type: String},
        cId: {type: String},
        cName: { type: String},
        cPrice: { type: String},
        cImaSrc: { type: String},
        cQuantity: { type: Number},
        cStatus: { type: Boolean,default: false} 
    }
}

4.9.2 浏览商品

无论用户登录还是未登录都能浏览所有的商品信息，现在我们来实现商品浏览功能。首先创建商品浏览页，新建views/home.html，添加如下代码

views/home.html

<!DOCTYPE html>
<html>
  <head>
    <title>主页</title>
	<meta charset="utf-8">
    <link href="/stylesheets/bootstrap.min.css" rel="stylesheet" media="screen">
      <script src="/javascripts/jquery-2.1.1.min.js" type="text/javascript"></script>
      <script src="/javascripts/bootstrap.min.js" type="text/javascript"></script>
		<style type="text/css">
			.panel-title{
				font-size: 24px;
				font-weight: bold;
			}
            .spys{
                list-style-type: none;
            }
            .spys li{
                float: left;
                margin: 10px 10px;
                width: 180px;
                height: 230px;
            }
            .spys li div strong{
                color: red;
            }

		</style>
  </head>
<body>
<div style="margin:50px auto;width: 900px;">
    <div class="panel panel-default" >
        <div class="panel-heading" style="height: 40px;">
                    <div style="text-align: left">
                        <span style="font-size:20px; font-weight:bold;">商品展示页</span>
                        <div style="float: right;">
                            <a class="btn  btn-xs btn-success" href="addcommodity" style="margin-right: 35px;">添加商品</a>
                            <a class="btn  btn-xs btn-success" href="cart" style="margin-right: 35px;">购物车</a>
                            <a class="btn btn-xs btn-info" href=<%=login.href%> ><%=login.message%></a>
                                 
                        </div>
                    </div>
        </div>
        <div class="panel-body">
            <ul class="spys" >
                <%for(var i in Commoditys){ if(!Commoditys[i].name)continue;%>
                    <li class="spys li">
                        <div >
                            <img width="80" height="100"  src="/images/<%=Commoditys[i].imgSrc%>">
                        </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="/addToCart/<%=Commoditys[i]._id%>">加入购物车</a>
                        </div>
                    </li>
                <%}%>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

修改 routes/home.js，添加获取商品信息代码：

routes/home.js

    //home页面为登录时可以直接浏览
    app.get('/home',function(req,res){
            var Commodity = global.dbHelper.getModel("commodity");
            var login = {
                href:'/login',
                message: '登 录'
            };
            if (req.session.user) {
                login.href='/logout';
                login.message='退 出';
            }
            Commodity.find({},function(error,docs){
                res.render('home',{Commoditys:docs,login:login});
            });
    });

现在访问 localhost:3000/home 查看一下现有的所有商品吧。

4.9.3 添加商品

用户登录后可以点击添加商品按钮进入添加商品页面。现在我们来实现添加商品的功能。

首先新建添加商品页，新建view/asscommodity.html 如下：

view/asscommodity.html

<!DOCTYPE html>
<html>
<head>
    <title>添加商品</title>
    <meta charset="utf-8">
    <link href="/stylesheets/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="/javascripts/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="/javascripts/bootstrap.min.js" type="text/javascript"></script>
    <style type="text/css">
    </style>
    <script type="text/javascript">
        function addcommodity(){
                var name = $('#cname').val(), price = $('#cprice').val();
                var data = { "name": name, price:price,"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('添加失败！')
                    }
                });
        }
    </script>
</head>
<body>
<div style="margin:100px auto;width: 500px;" class="add_c">
    <h1>添加商品</h1>
    <a class="btn  btn-xs btn-success" href="home" style="margin-left: 400px;">返回商品页</a>
    <form action="#"  role="form" method="post" >
        <input style="margin-top: 30px;" id="cname" type="text" class="form-control"  name="cname" placeholder="商品名称" />
        <input style="margin-top: 30px;" id="cprice"  class="form-control" name="cprice"  placeholder="商品价格" />
        <input style="margin-top: 30px;" type="button" class="btn btn-success btn-block" onclick="addcommodity()" value="添 加" />
    </form>
</div>
</body>
</html>

修改 routes/home.js，添加如下代码：

routes/home.js

//添加商品页
    app.get('/addcommodity',checkLogin,function(req,res){
        //render可以带变量，渲染页面
        res.render("addcommodity");
    });
    //添加商品
    app.post('/addcommodity',checkLogin, 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.send(200);
            }else{
                res.send(404);
            }
        })
    });

现在可以尝试登陆后，添加商品返回主页面查看一下所有的商品。

上一节：4.8 登出与登录

下一节：4.10 购物车