1、1 设计题目与要求 2 设计思想 随着网络的普及，网络支付手段的逐步完善，越来越多的人习惯于网上购物，选择鼠标点击下订单，送货上门的快捷便利的购物方式。网络为改变传统的商业运作模式提供了一种技术上的可行性的方案：利用 Internet 的技术和协议，建立各种企业内部网 Intranet，企业外部网 Extranet，通过廉价的通讯手段，将买家与卖家、厂商和合作伙伴紧密结合在了一起，消除时间与空间带来的障碍，从而大大的节约了交易成本，扩大了交易范围。而在实际的生活中，这种方案已经被广泛的运用到了实际的商业活动中了，人们将这种交易模式称为：电子商务。而传统甜点坊购买甜点也正在被网上购买甜点这一方便
2、快捷的方式所冲击。网上甜点的订购在国际互联网上可以实现的商务功能已经越来越多样化，从最开始的信息发布功能，到现在的在线甜点展示功能、在线洽谈业务功能、在线交易功能、在线客户服务功能、在线管理功能等等，几乎传统甜点坊所提供的功能都可以在互联网上进行电子化的高效运作，而借助网络的跨地域特点，更是将传统书店的地域限制加以突破，从而大大增加了客户的数量。3 系统结构 首页（index.html）订购 查订单选择甜点（Dessertlist.htm）找店家查询订单（CheckOrders.htm）选择口味及数量（Dessertlist.htm）删除订单（CheckOrders.htm）分店列表（Find
3、AShop.htm）订购完成（Dessertlist.htm）4 系统详细设计与实现，内容包括各个模块的设计，模块的算法流程图，相关知识点的使用，可以截取少量代码说明，并加上注释，图居中显示，图下方要有图编号和图名称。1. 首先写一个大的框架，先是用 div 标签定义一个 header 作为最上面的标题，接着用 div 标签做一个内容栏插入从网上找到的图片作为背景。最后引用与标题同样的 div 标签做一个底部的订购电话栏。图 1 主页框架图2. 主页框架的代码图 2 主框架代码图3. 甜点列表是第一个 page,主要是利用 listviet 控件来完成列表功能。最上方有一行搜索栏，下面是商品列
4、表。图 3 甜点列表界面图4. 甜点列表上方增加了搜索栏，可以让用火输入关键字查询想要的甜点，例如，如图 4 所示输入“面包” ，则会找出列表中所有含有“面包”两个字的商品。5. 实现搜索功能不需要编写任何程序，只要将 ListView 的 data-filter属性设为 true 就可以了，其代码图如图 5 所示。图 4 搜索框示例图图 5 搜索框代码图6. 选择甜点功能是第二个 page,主要让用户设置包装方式、口味和数量。如图 6 所示。图 6 选择甜点界面图7. 选择甜点页面主要包含选择菜单（select menu） 、单选按钮组件（radio buttom） 、范围滑块（ranger
5、 slider） 、按钮组件（button）其代码如图 所示。图 7 选择甜点功能代码图8. 显示订购结果是第三个 page,显示订购结果的界面如图 8 所示。9. 显示订购结果的做法是在加载第 3 页时，将 localStorage 存放的内容取出并显示在 id 为 message 的 div 组件中。其代码图，如图 所示。图 8 订购结果图图 9 订购结果代码图10. 查订单链接的网页是 CheckOrders.htm,它的主要功能是将localstorage 的数据取出并以列表方式显示在网页上。订单列表界面如图 10 所示。图 10 查订单界面图11. 订单列表是利用标记来制作，并以标记
6、搭配 jquery Mobile 的 ui-grid 在 class 中指定样式来产生表格效果以达到美化表格第效果。具体代码如下图，图 11 所示。图 11 查订单界面图12. 查订单网页的功能实现主要依靠将 localStorage 存放的内容取出并显示，通过将 localStorage 存放的内容删除以达到删除订单的效果。删除订单示例图，如图 12 所示。图 12 删除订单示例图13. 查订单网页的功能实现主要依靠将 localStorage 存放的内容取出并显示，通过将 localStorage 存放的内容删除以达到删除订单的效果。删除订单代码图，如图 13 所示。14. “找店家”的功
7、能是让用户浏览商店的分店信息，完成的网页界面如图 14 所示。图 13 删除订单示例代码图图 14 “找店家”界面图5 运行结果及结果分析1. 主页在移动端上的运行结果示意图如下图 15。图 15 移动端主页图2. 甜点列表页在移动端上的运行结果示意图如下图 16。图 16 移动端甜点列表页图3. 选择甜点功能页在移动端上的运行结果示意图如下图 17。图 17 移动端口味选择页面图4. 显示订购结果页在移动端上的运行结果示意图如下图 18。图 18 移动端订购结果页面图5. 查订单页在移动端上的运行结果示意图如下图 19。图 20 移动端订单列表页面图6. “找店家”功能页在移动端上的运行结果
8、示意图如下图 20。图 20 移动端分店介绍页面图7. 结果分析。网页能够流畅运行，页面能互相转跳，相应功能能够使用没有缺失。主页不够精美与移动端不能完美兼容。6 自我评价与总结通过这次课程设计我收获良多。虽然 JavaScirpt+jQuery 程序开发这门课程已经节课了，老师平时讲的一些实验课也完成了。但这次课程设计对于我来说还是有一定难度的。因为我的基础知识并不牢靠，有很多布局不会做，无法把所学的东西展现出来，网页也做得不够精美。在解决这些问题的过程中我学到了很多。此次课程设计是一块“试金石” ,是加深对自我能力认识的重要途径。大学的学习 基本上都是理论的接受, 而缺少能力的熟练与加强,
9、 我们缺少的并不是知识的储 备 , 而是能力的积蓄。 但由于大学特殊的学习模式和环境, 缺少实际情景的见证 和实践活动的参与, 同学之间缺乏必要的交流和比对, 使得我们很多时候很难对 自身的能力有明晰的认识,能力缺陷往往被遮蔽起来。而课程设计“前所未有” 地考验着我们的知识迁移和运用能力、 适应环境的能力、 应对突发事件的能力以 及如何处理人际关系等各方面的能力, 为我们提供了不可多得的见证的机遇和平台。通过这次课设, 我们可以新的思考维度有效发现自己能力上的缺陷。 综合运 用所学理论知识、方法和技能,开展实际工作,巩固专业技能,培养和强化社会 沟通能力;树立新的发展起点和目标,通过课程设计,认识社会的需要,发现自身的 差距, 培养面对现实的正确态度和独立分析解决问题的基本能力; 培养良好的职 业精神,适应毕业以后的实际工作需求。7 参考文献1李雨亭，吕婕等.JavaScript+jQuery 程序开发实用教程.清华大学出版社，2016 年 1 月2杜慧，李世扬 著，网页设计（DW/FL/PS）从新手到高手 浙江大学出版社3程钰婷，著，Dreamweaver+ASP 动态网页开发课堂实录
