AngularJs版web网页Pos机练习总结

1,项目介绍:  

先对这个练习项目做一个大概的介绍:商店里进行购物结算时会使用收银机(POS)系统，这台收银机会在结算时根据客户的购物车(Cart)中的商品(Item)和商店和正在进行的优惠活动(Promotion)进行结算和打印购物清单。已知该商店正在对部分商品进行"买二赠一"的优惠活动。我们需要实现一个名为printInventory函数，该函数能够将指定格式的数据作为参数输入，然后在浏览器的控制台中输出结算清单的文本。web版具体项目需求请看卡片:

https://trello.com/b/GnmBAyPK/pos.

2,时间计划:       

内容	计划时间(小时)	实际时间(小时)
搭建项目框架	0.5	0.5
界面设计	0.5	0.5
逻辑设计	2	2.5
走查	1	1
bug时间

由于之前的party_bid练习有用到AngularJs,对它有一定的了解,并且刚刚做了一个jQuery版本的pos机,所以能节省很多时间.我也大致在计划时间内完成了这个练习.

3,用AngularJs编写webpos:

(1,搭建项目框架:

依然使用yeoman创建项目,打开终端在目标文件夹下输入:

yo angular

 会提示选择一些包,根据项目我选择了bootstrap.

 

(2,界面设计:

依然使用的bootstrap的样式.项目生成的时候就生成了bootsrap模块,所以这里就可以直接根据需要直接在标签中使用css选择器引用需要的样式.

我的pos机主要使用了Navbars导航条的样式:

 <div class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Let's Go</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li ng-click='product()'><a href="">商品列表</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li ng-click="shopping_cart()"><a ><span class="glyphicon glyphicon-shopping-cart" ></span>购物车({{num}})</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>

 导航条中给每个导航绑定了相应的点击事件,购物车的数量通过AngularJs的表达是"{{}}"与控制器中的数据进行绑定.

(3,逻辑设计:

 

页面跳转：先写app.js，通过路由实现各个页面之间的跳转。

控制器：编写每一个页面的控制器。

模型：编写页面的数据处理函数。

商品列表：

首先定义一个类,有商品的各种属性:

function Item(barcode,sort, name, unit, price) {
    this.barcode = barcode;
    this.sort = sort;
    this.name = name;
    this.unit = unit;
    this.price = price || 0.00;
}

定义一个方法实现调用上面的类生成一组商品信息:

function loadAllItems() {
    return [
        new Item('coke','饮料', '可口可乐', '瓶', 3.00),
        new Item('sprite','饮料', '雪碧', '瓶', 3.00),
        new Item('apple','水果', '苹果', '斤', 5.50),
        new Item('lychee','水果', '荔枝', '斤', 15.00),
        new Item('battery','生活用品', '电池', '个', 2.00),
        new Item('instant_noodles','食品','方便面', '袋', 4.50)
    ];
}

再定义了一个Product类，并写了一个实例方法list（）

function Product (){
};
Product.prototype.list = function(){
    return loadAllItems();
}

最后在控制器中new一个Product类，调用它的方法list返回商品的所有信息，并用$scope绑定在到界面上显示。

$scope.products = new Product().list();

 购物车：

 

var bought_list = function(){
      var list = JSON.parse(localStorage['list'] || '[]');
      var allItems = new Product().list();
      allItems = _(allItems).each(function(item){

         try{
         	item.num=  _(list).findWhere({'name':item.name}).num
         }catch(err){
        	item.num=0;
        } ;
    });
    allItems = _(allItems).filter(function(num){
                return num.num !=0;
    });

      return allItems;
};

 定义一个bought_list函数，根据localStorage中购买商品的数量,将已经点击了“添加到购物车”的商品找出来，return 这些商品。然后在控制器中调用这个函数，将得到的信息显示到购物车界面上。

 

购物车中的商品数量加一：

 

var add = function(name){
	var list = JSON.parse(localStorage['list'] || '[]');
	list = _(list).each(function(item){
		if(item.name == name){
			item.num +=1;
		}
	});
	 localStorage['list']  = JSON.stringify(list);
}

 判断商品是否打折：

<td><span ng-show='{{num >=3 &&check_cut(name)}} ' class="ng-hide">{{(num-filters(num/3))*(price)}}(原价：{{(lnum)*(price)}})</span><span  ng-show='{{num <3||!check_cut(lname)}}' class="ng-hide">{{(lnum)*(price)}}</span></td>

 使用了AngularJs 的ng-show和ng-hide方法。通过判断当前商品是不是促销商品（check_cut()）和并且数量大于二。如果满足二者，二显示打折后的价格和原价，反之只显示原价.

 

总结：

这个练习巩固了一下之前所学习的AngularJs，我也自我提高了对时间的管理，比上一个jQuery练习好很多，相对与第一个AngularJs 练习项目——party_bid更是有了比较大的进步。

不足之处，界面的样式还不是很会调，有时会因为一个元素的样式而浪费一些时间。接下来会多一点去了解css

 

 

项目GitHub地址:

https://github.com/zhangkehbg/web_pos_angularJs