您的当前位置:首页正文

甜点坊课程设计

来源:华佗健康网
1设计题目与要求

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.订单列表是利用

标记来制作,并以
标记搭配jquery Mobile

的ui-grid在class中指定样式来产生表格效果以达到美化表格第效果。具体代码如下图,图11所示。

图11 查订单界面图

12.查订单网页的功能实现主要依靠将localStorage 存放的内容取出并显

示,通过将localStorage存放的内容删除以达到删除订单的效果。删除订单示例图,如图12所示。

图12 删除订单示例图

13.查订单网页的功能实现主要依靠将localStorage 存放的内容取出并显

示,通过将localStorage存放的内容删除以达到删除订单的效果。删除订单代码图,如图13所示。

14.“找店家”的功能是让用户浏览商店的分店信息,完成的网页界面如图

14所示。

图13 删除订单示例代码图

图14 “找店家”界面图

5运行结果及结果分析

1. 主页在移动端上的运行结果示意图如下图15。

图15 移动端主页图

2. 甜点列表页在移动端上的运行结果示意图如下图16。

图16 移动端甜点列表页图

3. 选择甜点功能页在移动端上的运行结果示意图如下图17。

图17 移动端口味选择页面图

4. 显示订购结果页在移动端上的运行结果示意图如下图18。

图18 移动端订购结果页面图

5. 查订单页在移动端上的运行结果示意图如下图19。

图20 移动端订单列表页面图

6. “找店家”功能页在移动端上的运行结果示意图如下图20。

图20 移动端分店介绍页面图

7. 结果分析。

网页能够流畅运行,页面能互相转跳,相应功能能够使用没有缺失。主页不够精美与移动端不能完美兼容。

6 自我评价与总结

通过这次课程设计我收获良多。虽然JavaScirpt+jQuery程序开发这门课程已经节课了,老师平时讲的一些实验课也完成了。但这次课程设计对于我来说还是有一定难度的。因为我的基础知识并不牢靠,有很多布局不会做,无法把所学的东西展现出来,网页也做得不够精美。在解决这些问题的过程中我学到了很多。

此次课程设计是一块“试金石” ,是加深对自我能力认识的重要途径。大学的学习 基本上都是理论的接受, 而缺少能力的熟练与加强, 我们缺少的并不是知识的储 备, 而是能力的积蓄。 但由于大学特殊的学习模式和环境, 缺少实际情景的见证 和实践活动的参与, 同学之间缺乏必要的交流和比对, 使得我们很多时候很难对 自身的能力有明晰的认识,能力缺陷往往被遮蔽起来。而课程设计“前所未有” 地考验着我们的知识迁移和运用能力、 适应环境的能力、 应对突发事件的能力以 及如何处理人际关系等各方面的能力, 为我们提供了不可多得的见证的机遇和平台。通过这次课设, 我们可以新的思考维度有效发现自己能力上的缺陷。 综合运 用所学理论知识、方法和技能,开展实际工作,巩固专业技能,培养和强化社会 沟通能力;树立新的发展起点和目标,通过课程设计,认识社会的需要,发现自身的 差距, 培养面对现实的正确态度和独立分析解决问题的基本能力; 培养良好的职 业精神,适应毕业以后的实际工作需求。

7 参考文献

[1]李雨亭,吕婕等.JavaScript+jQuery程序开发实用教程.清华大学出版社,2016年1月

[2]杜慧,李世扬 著,网页设计(DW/FL/PS)从新手到高手 浙江大学出版社

[3]程钰婷,著,Dreamweaver+ASP动态网页开发课堂实录

因篇幅问题不能全部显示,请点此查看更多更全内容