甜点坊课程设计
2 设计思想
随着网络的普及,网络支付手段的逐步完善,越来越多的人习惯于网上购物,选择鼠标点击下订单,送货上门的快捷便利的购物方式。网络为改变传统的商业运作模式提供了一种技术上的可行性的方案:利用Internet的技术和协议,建立各种企业内部网Intranet,企业外部网Extranet,通过廉价的通讯手段,将买家与卖家、厂商和合作伙伴紧密结合在了一起,消除时间与空间带来的障碍,从而大大的节约了交易成本,扩大了交易范围。而在实际的生活中,这种方案已经被广泛的运用到了实际的商业活动中了,人们将这种交易模式称为:电子商务。
而传统甜点坊购买甜点也正在被网上购买甜点这一方便快捷的方式所冲击。网上甜点的订购在国际互联网上可以实现的商务功能已经越来越多样化,从最开始的信息发布功能,到现在的在线甜点展示功能、在线洽谈业务功能、在线交易功能、在线客户服务功能、在线管理功能等等,几乎传统甜点坊所提供的功能都可以在互联网上进行电子化的高效运作,而借助网络的跨地域特点,更是将传统书店的地域限制加以突破,从而大大增加了客户的数量。
3系统结构
首页(index.html) 订购 选 择甜点( Dessertlist.htm) 选 择口味及数量( Dessertlist.htm) 订 ( 购完成 Dessertlist.htm)
查订单 查询订单(CheckOrders.htm) 删除订单(CheckOrders.htm) 找店家 分店列表(FindAShop.htm) 4 系统详细设计与实现,内容包括各个模块的设计,模块的算法流程图,相关知识点的使用,可以截取少量代码说明,并加上注释,图居中显示,图下方要有图编号和图名称。
1. 首先写一个大的框架,先是用div标签定义一个header作为最上面的标
题,接着用div标签做一个内容栏插入从网上找到的图片作为背景。最后引用与标题同样的div标签做一个底部的订购电话栏。
图1 主页框架图
2. 主页框架的代码
图2 主框架代码图
3. 甜点列表是第一个page,主要是利用listviet控件来完成列表功能。最
上方有一行搜索栏,下面是商品列表。
图3 甜点列表界面图
4. 甜点列表上方增加了搜索栏,可以让用火输入关键字查询想要的甜点,
例如,如图4 所示输入“面包”,则会找出列表中所有含有“面包”两个字的商品。
5. 实现搜索功能不需要编写任何程序,只要将ListView的data-filter
属性设为true就可以了,其代码图如图5所示。
图4 搜索框示例图
图5 搜索框代码图
6. 选择甜点功能是第二个page,主要让用户设置包装方式、口味和数量。
如图6所示。
图6 选择甜点界面图
7. 选择甜点页面主要包含选择菜单(select menu)、单选按钮组件(radio
buttom)、范围滑块(ranger slider)、按钮组件(button)其代码如图 所示。
图7 选择甜点功能代码图
8. 显示订购结果是第三个page,显示订购结果的界面如图8所示。
9. 显示订购结果的做法是在加载第3页时,将localStorage 存放的内容
取出并显示在id为message的div组件中。其代码图,如图 所示。
图8 订购结果图
图9 订购结果代码图
10.查订单链接的网页是CheckOrders.htm,它的主要功能是将
localstorage的数据取出并以列表方式显示在网页上。订单列表界面如图10所示。
图10 查订单界面图
11.订单列表是利用