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