基于HTML5的O2O团购平台的设计与实现-软件工程硕士论文

分类号分类号 学号学号 M201176020 学校代码学校代码 1 0 4 8 7 密级密级 硕士学位论文硕士学位论文 基于基于 HTML5 的的 O2O 团购平台团购平台 的设计与实现的设计与实现 学位申请人学位申请人 陈陈 磊磊 学 科 专 业学 科 专 业 软件工程软件工程 指 导 教 师指 导 教 师 方少红方少红 副教授副教授 答 辩 日 期答 辩 日 期 2013 1 6 万方数据 A Thesis Submitted in Partial Fulfillment of the Requirements for the Degree for the Master of Engineering Design and Implementation of O2O Group Buying Platform Based on HTML5 Candidate Chen Lei Major Software Engineering Supervisor Assoc Prof Fang Shaohong Huazhong University of Science and Technology Wuhan 430074 P R China January 2014 万方数据 独创性声明独创性声明 本人声明所呈交的学位论文是我个人在导师指导下进行的研究工作及取得 的研究成果 尽我所知 除文中已经标明引用的内容外 本论文不包含任何其他 个人或集体已经发表或撰写过的研究成果 对本文的研究做出贡献的个人和集 体 均已在文中以明确方式标明 本人完全意识到本声明的法律结果由本人承担 学位论文作者签名 日期 年 月 日 学位论文版权使用授权书学位论文版权使用授权书 本学位论文作者完全了解学校有关保留 使用学位论文的规定 即 学校有权 保留并向国家有关部门或机构送交论文的复印件和电子版 允许论文被查阅和借阅 本人授权华中科技大学可以将本学位论文的全部或部分内容编入有关数据库进行检 索 可以采用影印 缩印或扫描等复制手段保存和汇编本学位论文 保密 在 年解密后适用本授权书 不保密 请在以上方框内打 学位论文作者签名 指导教师签名 日期 年 月 日 日期 年 月 日 本论文属于 万方数据 I 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 摘摘 要要 随着科技发展和计算机技术的日益创新 人类已经完全步入了移动互联网时代 智能终端已经逐渐取代电脑成为人们日常生活中主要的上网设备 它带来的是完全 截然不同的用户体验和使用场景 同时也促进了移动互联网应用的发展 Android和 IOS等操作系统上的应用数量也呈现井喷式的增长 但是各个操作系统之间的差异性 造成了每个系统都维护了自己的生态环境 Android系统上的应用无法运行在IOS系 统上 同理IOS也是如此 这样给移动应用开发者造成了大量的重复劳动 需要针对 各个移动操作系统做重复开发 增加了开发成本 与此同时 由W3C制定和普及的协议 HTML5走进了大家的视野 它是超文本 标记语言 HTML 协议的升级版本 凭借着优秀的跨平台和终端 适配多种移动设备 基于浏览器运行无需安装和升级的特点成为了移动互联网应用开发比较好的解决方 案 首先对HTML5的各种特性以及需要使用的相关技术进行了简要介绍 接下来使 用HTML5及相关技术来设计并实现一个O2O团购平台的移动应用 该应用是基于手 机浏览器的一个跨平台的web app 客户端使用HTML5 CSS JavaScript来实现 利用 HTML5的新特性调用手机操作系统的底层API来达到跟native app一样的用户体验 使用JavaScript和CSS实现良好的视觉效果 例如调用设备GPS来获取用户地理位置信 息 多媒体支持及其他硬件功能 服务器端使用Java来实现 底层使用struts作为MVC 框架 spring做依赖注入并结合hessian来调用远程RPC服务获取数据 这样各平台上 的用户只需要使用手机浏览器访问我们应用的网址就可以使用该应用 达到了跨平 台免安装 一次部署到处运行的效果 关键词关键词 超文本标记语言 移动应用 跨平台 团购 万方数据 II 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 Abstract With the development of science and technology and the increasing innovation of computer technology humans have fully entered the era of mobile Internet Intelligent terminal has gradually replaced the computer as the main Internet device in daily life It is caused by a completely different user experience and usage scenarios at the same time also promote the development of mobile Internet applications the number of applications on Android and IOS operating system also presents the blowout growth But the differences between the various operating systems caused each system maintains its own environment application of Android system can t run on the IOS system similarly IOS is true This caused a lot of rework to the mobile application developer and duplication of development needs to be done for each mobile operating system HTML5 that was developed and popularized the protocol by the W3C walked into our field of vision it is an upgraded version of the Hypertext Markup Language HTML protocol With excellent cross platform and terminal fitted a variety of mobile devices based on the browser to run without the characteristics of the installation and upgrade it become a better mobile Internet application development solutions This paper first briefly describes the various features of HTML5 and related technologies need to use next uses HTML 5 and related technologies to design and implement a O2O group buying platform of mobile applications The application is based on a mobile browser cross platform web app The client use HTML CSS JavaScript to implement It uses the underlying API of mobile operating system by the new features of HTML5 to achieve the same with native app user experience and uses JavaScript and CSS to achieve a good visual effect The server uses Java to achieve the underlying uses struts as a MVC framework So the platform users only need to use a mobile phone browser to access our website and they can use this application Key words HTML5 Mobile application Cross platform Group buying 万方数据 III 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 目目 录录 摘摘 要要 I Abstract II 1 绪论绪论 1 1 课题背景 研究目的与意义 1 1 2 本文的研究内容和组织结构 2 2 关键技术分析关键技术分析 2 1 HTML5 技术 5 2 2 适合移动开发的 JavaScript 库 7 2 3 Ajax 技术 8 2 4 本章小结 9 3 O2O 团购平台需求分析团购平台需求分析 3 1 O2O 团购平台的概述 10 3 2 系统设计目标及流程分析 10 3 3 功能需求分析 11 3 4 本章小结 18 4 O2O 团购平台的系统设计团购平台的系统设计 4 1 O2O 团购平台的总体设计 19 4 2 O2O 团购平台功能详细设计 21 4 3 O2O 团购平台数据库设计 29 4 4 本章小结 34 5 O2O 团购平台的实现团购平台的实现 5 1 实现概述和系统开发环境 35 万方数据 IV 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 5 2 首页导航模块的实现 35 5 3 团购详情模块的实现 39 5 4 支付模块的实现 42 5 5 用户信息模块的实现 48 5 6 本章小结 49 6 总结与展望总结与展望 6 1 全文总结 50 6 2 展望 51 致致 谢谢 52 参考文献参考文献 53 万方数据 1 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 1 绪论绪论 1 1 课题背景 研究目的与意义课题背景 研究目的与意义 伴随着计算机技术不断进步 通信技术的发展和3G网络的普及 适合智能终端 设备的Android系统和IOS系统的出现促进了移动互联网的蓬勃发展 2011年被定位 移动互联网之年 信息社会由此进入移动互联网时代 据相关调查报告显示全球的 移动互联网人数已经达到17亿 人们的主要上网手段从电脑变成了各种移动设备 使用场景从家里或者办公室迁移到任何碎片时间上 用户可以随时随地的利用碎片 化时间通过智能设备上网获取需要的信息 但是传统的互联网信息并不能太好的适 应智能终端设备 由此促进了各移动平台上的应用开发 我们称之为native app 虽 然native app用户体验非常好 而且运行较快 但是却无法跨平台 造成了开发者的 重复劳动等问题 为了解决这些问题 HTML5登上了移动互联网的舞台 它是目前 移动互联网的尖端技术 由W3C于2008年发布的第一份草案发展而来 目前业界还 没有统一的标准 但是由于HTML5移动开发的优势 各大浏览器的产品都已支持 HTML5的新特性 它的出现给用户带来了全新的体验 免安装 跨平台 透明迭代 升级 较低的开发成本等优势使其迅速获得了用户和开发者的欢迎 1 如今廉价的智能手机的不断推出 智能终端的性能与PC之间的差距越来越小 导致移动互联网变得越来越社会化 逐渐融入到社会的血液中 成为了人们日常生 活中不可缺少的支点 是社会和商业变革的最大变量 我们已经看到 线下零售 本地生活服务正在被移动互联网重新演绎 online to offline 简称O2O的模式正在大 热 如何利用移动互联网的优势 利用海量的线上流量将用户从线上吸引到线下去 消费 成为众多互联网厂商的课题 未来 上至人们的衣食住行下到沟通 交流 工作 娱乐等日常生活 都面临移动互联网的颠覆和重塑 包括金融和教育等传统 行业也受到冲击 移动互联网正慢慢的改变用户个体 不断的与传统行业融合 在 这个背景下 用户的使用场景本地化 使用时间碎片化促进了移动应用本地化的趋 势越演越烈 而O2O非常好的与该趋势结合 为用户提供随时随地的本地生活信息 万方数据 2 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 服务 本课题来源自大众点评团针对移动互联网用户随时随地通过手机浏览器上网 获取O2O团购信息的需求而研发的web app 即web application 是根据标准的web技 术来实现的应用 作者作为研发团队的一员全程参与了该系统的设计与实现 相比 较native app来说 它具有以下优势 1 良好的跨平台特性 用户只要安装了手机浏览器 通过浏览器访问该应用 网址即可浏览各种生活服务信息并完成购买 方便快捷 2 跨平台特性为开发者节省开发成本和开发时间 不用各移动平台都维护一 套应用 3 对用户透明的免安装和版本升级 应用是运行在浏览器上 采用B S架构 所以免去了用户的安装 版本升级也对用户透明 服务器端自行升级即可 2 HTML5版本的O2O团购平台填补了公司产品线的空白 满足了移动用户通过手 机浏览器访问点评团的需求 并且迅速占领市场份额 同时也在web app开发上积累 了大量的实践经验 方便为以后的产品进行战略规划 具有非常重要的战略意义 此外这也是对HTML5应用开发的探索 让广大用户认识到了HTML5的优势 促进了 HTML5应用的发展 从商业角度来看 因为开发成本较低的原因 会推动更多的开 发者转向HTML5应用开发 从而推出更多的HTML5应用 从技术角度来看 越来越 多的HTML5开发者和HTML5应用会更进一步的推动HTML5标准的统一和完善 3 1 2 本文的研究内容和组织结构本文的研究内容和组织结构 1 2 1 本文的研究内容本文的研究内容 随着移动互联网迅猛发展 吸引了大量应用开发者 如果把移动互联网比作骨 骼的话 那移动平台上的应用就好比血肉一样 是真正价值的载体 当前智能操作 系统百家争鸣的环境下 微软的Winphone 苹果的IOS 谷歌的Android分别占据了 较大的市场份额 然而由于各移动平台之间互不兼容 造成了重复开发 此时各大 手机浏览器厂商纷纷支持HTML5新特性 使得HTML5技术成为解决这一难题的关 键 本课题主要来源于大众点评网商务产品线的移动互联网项目 解决了多平台上 移动应用互不兼容和开发人员重复劳动的问题 同时也满足广大用户使用手机浏览 万方数据 3 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 器来访问O2O团购应用 本文的研究内容主要包括以下几个方面 1 对HTML5 CSS以及支持移动开发的JavaScript框架进行深入研究和阐述 对相关的新特性进行分析 并对比了各大手机浏览器厂商对新特性的支持和兼容性 分析 从而得出一个在各浏览器上都比较切实可行的方案 4 2 针对O2O团购平台应用的客户端进行设计 技术上选择HTML5 CSS 移动 javaScript来实现 如通过canvas动态的生成各种图形图像 达到跟native app一样的 视觉效果 使用HTML5缓存来存储访问的静态文件 减少应用请求服务器的次数和 节约用户流量 通过HTML5底层API来调用设备硬件 从而可以获取用户地理位置 等相关信息 达到和native app一样的用户体验 3 针对web app的服务器端的进行设计 使用Java开发并使用struts2 spring 等开源框架 服务器技术采用nginx反向代理2台tomcat服务器达到双机热备 项目编 译完成后直接部署在服务器上 用户使用手机浏览器访问相应网址即可使用服务 从而达到跨平台 5 4 通过对实际项目的研究和开发 对跨平台移动应用开发深入的探讨和研究 并对其中的相关技术进行总结 1 2 2 本文的组织结构本文的组织结构 本文详细阐述了对基于HTML5技术的移动应用系统的研究 并设计和实现了基 于HTML5的O2O团购平台 共分为6章 各章节的主要内容概括如下 第一章是绪论 分别阐述了HTML5和跨平台移动应用的研究北京 O2O团购的 国内外的现状以及未来的发展趋势 最后则总结了本文的研究内容并概述了组织结 构 第二章则主要阐述跨平台移动开发中使用的HTML5 CSS和JavaScript的技术特 点 介绍了web app开发中使用的开发环境和语言 第三章主要对O2O团购应用进行详细的需求分析 根据该应用的特性和用户的 使用习惯和日常需求挖掘出背后真正的产品需求 包括体验 视觉 功能 性能 以及安全等各方面 万方数据 4 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 第四章在对需求进行全方面的分析和整理之后 结合需求对应用进行详细和完 善的设计 包括客户端的视觉和交互的设计 功能模块的划分 核心流程的分析和 设计 针对服务器端系统进行整体设计和分层次划分 设计各层次之间的调用和交 互 定义各层次之间的接口 第五章对跨平台的O2O应用进行开发 对各功能模块的实现进行详细说明 第六章则对全文的研究内容进行总结 分析系统存在的不足 并对不足提出进 一步的展望 万方数据 5 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 2 关键技术分析关键技术分析 本章简要阐明在跨平台的移动开发中需要使用到的核心技术 包括客户端的 HTML5 CSS JavaScript以及Ajax 服务器端的JavaEE开发技术等 2 1 HTML5 技术技术 HTML5是HTML标准的第五个版本 目前还处于发展阶段 它推出的目的是为 了取代HTML 4 01和XHTML 1 0标准 从而能在互联网发展迅猛之际 使得网络开发 标准符合当时的开发需求 HTML5新增了一些元素和属性 这些标记便于搜索引擎理解页面内容 同时也 简化页面的编写 如标签定义页头内容的结构 页头有关的内容都可以放在 该标签中 8 就是navigation的所写 从名字就可以知道这是跟导航有关的标签 该标签用来定义链接到当前页面某部分或者其他页面的一块区域的 用户可以定义 页面内的导航 标签是页脚标签 用来定义页面的底部结构 标签 就是用来定义页面中的一节或某区域的 HTML5增加和实现了内置的多媒体支持 提供了简单的标签来 将多媒体信息嵌入到HTML页面中 在HTML文档中嵌入多媒体是非常容易的 谢谢观看video 如此就在页面上出现一个带播放控制条的视屏 同理是用来在HTML页 面嵌入音频文件的 页面支持audio元素 从上面的2个例子就可以使用HTML5技术可以非常方便的在页面中内嵌各种多 万方数据 6 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 媒体资源 例子中src属性的值可以是本地的url 也可以是互联网资源 与之前的版本相比较 HTML5的新表单控件有2个较大的改进 内容类型的增强 比如时间选择空间 range滑动条 颜色选择控件 搜索框控件等 提示及验证方面 的增强 提示性信息 正则验证表达式 是否允许为空等 这些新特性不仅简化了 许多开发工作 对于表单的产品设计及体验也带来了更多的灵活性和扩展性 9 下面 就简单的介绍下这些新元素 1 是用来创建一个数字输入框 右侧会带有一个微调 控件用于增加或减少数值 2 创建一个滑动空间从而允许选择一个范围内的数值 这在以前是比较复杂的 但是现在使用HTML5只需要定义一个range类型的输入控件 就可以 3 提供了一个日期 时间的控件 我们通常在各种订票网 站上会看到各种日期选择框 这些控件通过都是通过较复杂的JavaScript编写 如今 HTML5只需要简单的一行代码定义一个日期选择控件 4 通常我们创建供用户选择的下拉列表是用 和元素的 但如果我们还需要这个下拉列表能供用户输入呢 只有通过复杂 的 JavaScript 来实现 但是现在 HTML5 提供 input 的 list 属性绑定一个 datalist 元素 轻松的实现我们需要功能 如下所示 目前基于地理位置信息的 LBS 应用异常火爆 地理位置是 HTML5 的重要特征 提供获取用户地理位置的 API 该 API 可以调用智能设备的底层硬件 借助这个特 万方数据 7 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 性能够开发基于位置信息的应用 它可以通过用户 ip 地址 智能设备的 GPS WiFi 信号或者 MAC 地址 GSM 或 WCDMA 基站来获取用户的经纬度 10 如今的 Web 应用越来越复杂 对性能和体验的要求越来越高 为了更好的解决 这些问题 HTML5 提供了客户端本地存储的特性 之前我们通常使用的是 Cookie 因为它简单通用 但是作为真正的客户端存储 Cookie 还是存在很多弊端 例如 Cookie 被窃取和伪造导致的安全问题 针对以上情况 HTML5 提出更加安全和便捷 的解决办法 假如你需要存储复杂的数据则可以使用 Web Database 可以像客户端 程序一样使用 SQL 假如你需要存储的只是简单的用 key value 对即可解决的数据则 可以使用 Web Storage 它是由 sessionStorage 和 localStorage 这两部分组成的 sessionStorage 可以存储会话 session 中的数据 localStorage 则用于本地存储 11 2 2 适合移动开发的适合移动开发的 JavaScript 库库 如今的 Javascript 类库普遍都很大 例如 ext js 和 jQuery 当需要开发一个基于 移动设备的应用 这些类库显得非常臃肿 随着移动互联网的蓬勃发展 开源社区 贡献了适合移动平台的 JavaScript 库 据研究表明现在越来越多的用户都习惯使用移 动设备来访问互联网资源 作为一个移动应用开发者来说就需要考虑相关的因素 例如网络资源和屏幕跨平台用户体验 Zepto js 就能非常好的解决这些问题 Zepto js 是一个开源的 JavaScript 库 对移动平台具有良好的支持 它的大小只 有 5k 到 10K 兼容 jQuery 并实现了其大部分 API 下载和执行较快 从官网上下载 该库 在页面底部加上后即可使用其 API Zepto Js 主要是给移动平台使用的 兼容主流的移动平台浏览器和常见桌面浏览器 在移动 设备上开发跨平台的 Web App 时使用 要了解一个框架 最直接最有效的方法就是 一边读使用手册一边读源码 这里简单分析一下 Zepto 的 core 下面所示的是简化的 core 的结构 var Zepto function zepto init function selector context dom dom 万方数据 8 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 dom proto zepto Z prototype dom selector selector return dom function selector context return zepto init selector context fn zepto z prototype fn zepto zepto return window Zepto Zepto in window window Zepto 上面就是 Zepto core 简化后的代码 我们用 Zepto 来获取元素的具体步骤如下 首先调用 zepto init 方法来获取 dom 结点 获取这个结点后将其转化为结点数组 再 将结点数组的 proto 指向 zepto Z prototype 最后返回数组 源码中的 和 zepto 是 2 个命名空间 下的方法都是纯工具方法 zepto 下的都是核心方法 会被 下的方 法调用 12 这些核心方法可以通过插件的形式被重写 从而更好的扩展 zepto zepto 的选择器部分比较简单 就是依次检查 id className tagName 选择器 如果都不 匹配 那么就直接使用 querySelectorAll 13 2 3 Ajax 技术技术 Ajax Asynchronous JavaScript and XML 即异步 JavaScript 和 XML 是一种创建 交互式网页的 Web 开发技术 在介绍 Ajax 之前先介绍下同步和异步的区别 同步就 是用户的点击行为触发事件会发送请求给服务器端 此时客户端端就必须等待服务 万方数据 9 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 器端的响应返回后才能继续其他操作 异步就是用户触发是件发送请求给服务器 此时客户端不用等待服务器端的响应可以去做其他的事情 简单来说 Ajax 是一种 Web 程序开发技术 在不刷新整个页面的前提下 能让客户端与服务器端通信 局 部刷新页面 14 Ajax 的核心就是 Javascript 和 XML XMLHttpRequest 是用于浏览器使用 HTTP POST 或 GET 请求和服务器之间传输数据消息的 JavaScript API 它的交互由请求与 响应组成 该 API 是大多数 Ajax 交互的核心 也是现代 Web 开发的一项基本技术 浏览器 和客户端使用 Ajax 通信的大概步骤如下 首先 客户端 JavaScript 创建一个 XMLHttpRequest 对象 然后从 Web 表单中获取需要的数据 建立要连接的 URL 然后通过 xmlHttpRequest send 将请求发送给服务器端 服务器端接受 ajax 请求后 会完成相应的处理 并生成响应数据并填充到 XMLHttpRequest 对象中 再发送给客 户端 最后客户端接到响应后从 XMLHttpRequest 对象的属性 reponseText responseXML 中 读取的数据 完成局部刷新当前页面的任务 15 2 4 本章小结本章小结 本章主要阐述了开发跨平台的移动 O2O 团购应用主要需要用到的技术 包括客 户端使用的 HTML5 技术 HTML5 是如何发展和流行的 专门针对移动应用开发的 JavaScript 框架 Zepto JS 以及与服务器端通信的 Ajax 技术 最后简单介绍服务器端 使用的 JavaEE 开发技术和比较流行的 JavaEE 开发集合框架 Spring 它提供了一整 套企业级开发组件 还有业界使用较多的 MVC 框架 Struts2 万方数据 10 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 3 O2O 团购平台需求分析团购平台需求分析 本章主要对要实现的 O2O 团购平台进行详细的需求分析 首先是对 O2O 团购平 台这个概念的产生进行阐述 主要是从 3 点来说明 分别是该平台的主要功能是什 么 该平台的受众人群是谁 该平台能给用户创造什么利益 其次对该平台的可行 性进行分析 是否需要建立该平台 能否带来效益创造价值 最后则是分别对 O2O 团购平台的主要功能进行需求分析 3 1 O2O 团购平台的概述团购平台的概述 互联网技术的日新月异给人们的日常生活带来了巨大的变化 互联网正在 以势不可挡的趋势逐渐颠覆传统行业 从电商 C2C 到 B2C 人们接受和习惯了 网上购物 移动 IM 软件的兴起也使得越来越多的人放弃使用短信和电话 媒 体行业也遭受巨大的冲击 大家都习惯网上看报纸杂志并随手分享自己的所见 所闻 然而现今最火爆的潮流则是 O2O 将线上和线下通过互联网这座桥梁很好的衔 接在一起 充分发挥两者的优势 线上吸引用户完成预订消费 再到线下去体验 它的出现很好的弥补了传统电商只有线上体验的不足 对 O2O 这一模式最好的诠释 则是团购 它将实体店铺的餐饮美食 电影 KTV 等娱乐 生活休闲等服务以互联网 信息的形式展示在互联网上 通过该类生活服务平台 用户可以浏览查找自己所需 要的服务 完成预付费后再获取凭证到线下的实体店进行消费 本文设计实现的 O2O 团购平台即是如此 3 2 系统设计目标及流程分析系统设计目标及流程分析 本项目的需求是来自大众点平网为了满足手机用户能够通过手机浏览器上网浏 览团购并完成购买的需求 同时也为了实现跨平台的 Web App 节约开发成本所创 立的项目 万方数据 11 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 系统分为客户端和服务端 客户端的设计目标是 1 跨各种移动平台 如 IOS Android Symbian WinPhone 2 兼容各种主流手机浏览器 如 Chrome Safari QQ 浏览器 UC 浏览 器 3 良好的移动平台和视觉体验 适应用户的手机屏幕 符合手机用户时间碎 片花 使用本地化的特点 22 服务器端设计目标是 1 高性能 高稳定性的接口 2 各功能模块组件化 针对各功能模块提供对应的接口 3 支付安全性 O2O 团购平台的主要流程是 首先用户通过手机浏览器访问 O2O 团购网站浏览 团购信息 然后再选择合适的团购浏览具体的详情 点击购买会先检测是否登录用 户 未登录则先进入用户登录注册页面 登录则进入订单选择页面进行数量的选择 最后确认订单跳到网银或者支付宝进行支付 3 3 功能需求分析功能需求分析 O2O 团购平台按功能进行划分为如下几个模块 1 首页导航模块 包括首页列表 分类导航 搜索 2 团购详情页模块 包括团购详情 更多详情 看了又看 套餐选择 3 支付模块 包括提交订单 确认订单 代金券列表 确认支付 4 用户信息模块 包括用户导航 用户信息 3 3 1 首页导航模块需求分析首页导航模块需求分析 首页模块主要是手机用户访问 O2O 团购平台的第一个页面 即用户着陆页 Landing Page 所以必须明确的告诉用户 该网站是干什么的 是提供什么服务的 能够解决什么事情 必须简单直接明了 该模块包括首页列表 用户信息 分类导 航 搜索 如图 3 2 所示 万方数据 12 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 图 3 2 首页列表图 用户访问网站就能看到首页列表 1 页 25 条团购信息非常清楚的告诉用户 该 网站提供生活服务信息的 由于手机屏幕限制 首页第一屏只能显示 3 到 4 条团购 信息 后面的团购信息会使用 JavaScript 的延迟加载图片 节约用户流量 每一行团 购信息应该显示团购图片 团购标题 团购单价 购买人数 团购所在商区 如果 用户同意使用浏览器使用 HTML5 获取用户地理位置信息 还会显示用户所在位置 如图 3 3 所示 图 3 3 首页列表需求 分类导航模块在团购列表上面 是对团购列表进行分类筛选和导航用的 方便用 户在数以万计的团购中选择使用自己用的 节省用户时间 分类筛选支持单项和多 项筛选 可以根据是否今日新单 是否需预约 商户星级 是否代金券这些选项自 首页列表 分类导航 首页模块 搜索 万方数据 13 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 由组合进行筛选 如图 3 4 所示 图 3 4 分类导航需求 导航则是分 3 个纬度对团购信息进行筛选 因为一个团购信息可以从 3 个 纬度进行划分 团购信息所属地区是在哪个区的哪条路上 团购信息所属的分 类 每个团购都会有一个类别 如餐饮美食 休闲娱乐 电影等 团购信息排 序则是对团购列表进行各种关键字排序 可以按购买人数 价格升序 价格降 序等 搜索栏在首页的右上角 用户输入关键字就可以进行搜索 搜索出匹配关键字的 团购信息显示给用户 若无匹配关键字的团购信息 则会根据关键字进行相关性匹 配 选择相关的团购推荐给用户 3 3 2 团购详情模块团购详情模块 团购详情模块是跟团购具体信息有关的模块 主要就是团购单的各种详细信息 由于团购信息包括很多图片 这些图片又不是特别重要 有些用户不想去看 为了 节约用户流量 提高用户体验 我们又设计了更多详情 里面包含了更为完整的团 购信息和许多团购图片 如图 3 5 所示 万方数据 14 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 图 3 5 团购详情模块 当用户在首页查找到合适的团购后 点击就进入该团购详情页面 团购详情页 面是对某团购信息的详细描述 包括该团购的清晰图片 团购标题 团购价格 是 否支持退款 剩余时间以及购买人数 这是在详情页第一屏的关键信息 其次是点 击购买按钮 用户点击该按钮 会根据是否多套餐进入套餐选择页面或进入支付流 程 最后就是对团购的具体描述 分 2 部分 一部分是团购详情 是对团购的具体 内容进行描述 是否套餐还是代金券 团购包含什么内容等 另一部分则是购买须 知 需要注明使用有效期 团购使用条件 特殊注明的通知等 该页面最下角则是 更多详情按钮 点击该按钮进入更多详情页面 如图 3 6 所示 图 3 6 团购详情需求 团购详情模 块 团购详情 更多详情 套餐选择 万方数据 15 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 更多详情页面是对团购信息全面的描述 由于这些信息包含很多图片 根据用 户行为分析得出大部分用户都不会查阅这些信息 为了提高用户体验 节省用户流 量 我们将团购的完整信息单独放到这个页面中 该页面包含了团购的具体内容的 文字描述 并且都配有高分辨图片 方便用户查阅和了解团购具体信息 套餐选择页面是在用户点击购买之后 若该团购有多种套餐 则会跳转到套餐 选择页面 进行套餐选择 用户选择之后就回进入支付流程中的提交订单页面 若无多种套餐 则会直接 进入套餐选择页面 3 3 3 支付模块支付模块 用户浏览团购并选择满意的团购之后会跳转到支付流程模块完成下订单支付购 买的过程 该模块是 O2O 团购平台的核心模块 用户只有在线上平台完成下单购买之后 才能拿到购买凭证 团购券 从而在线下实体店去消费体验 完成线上到线下的闭 环 该模块只要包括以下部分 提交订单 确认订单 确认付款 完成支付 如图 3 7 所示 支付 图 3 7 支付模块 用户选择合适的团购之后点击购买会跳转到提交订单页面 该页面主要是让用 户选择团购商品的数量和其他具体的商品特征 团购名称 套餐 单价 数量 总 价 这里数量可以选择 并实时计算出总价 其次确认用户的关键信息 电话号码 送货地址等 若用户没有登录则会要求输入用户的手机号码并填写验证码 以方面 支付模块 提交订单 确认订单 完成支付 确认付款 万方数据 16 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 后续完成支付后发送团购券到手机 如图 3 8 所示 图 3 8 提交订单需求 当用户点击提交订单按钮 会生成订单信息并跳转到确认订单页面 该页面首 先显示用户提交的订单信息 团购名 套餐名 单价 数量 总价 其次是账户信 息 用户余额显示 优惠券使用 还需支付金额 然后就是用户选择某个支付方式 来支付订单 目前支持信用卡支付 借记卡支付 支付宝支付 最后就是确认订单 按钮 用户确认了订单信息和个人账户信息 选择对应的支付方式后点击确认订单 会跳转到确认付款流程中 如图 3 9 所示 图 3 9 确认订单需求 用户选择合适的支付渠道之后会跳转到相应的支付渠道完成确认付款的操作 该 O2O 团购平台没有自己的支付牌照无法完成支付的真正闭环 因此只有调用第三方 万方数据 17 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 支付的开发 API 来完成支付过程 当用户点击确认订单 付款之后会调用第三方支 付 API 并跳转到该页面完成支付 目前系统支持的渠道只有网银支付和支付宝支付 用户在第三方支付页面输入个人的支付信息确认支付即可 此时第三方支付会回调 该团购平台的支付接口 告知系统该用户已经完成支付 系统便会跳转到完成支付 页面告知用户购买成功 显示购买团购的凭证 团购券 并将该券发送到用户手机 用户拿该券便可去线下实体店消费 3 3 4 用户信息模块用户信息模块 用户信息模块是用户首页导航和自助服务以及管理用户信息的模块 包括用户 导航和用户信息管理 用户访问团购平台首页时 可以点击用户导航 从而可以快 速浏览相关团购信息和自助服务 查看收藏的团购单 查看账户的抵用券 查看未 支付的订单 管理用户的团购券 用户导航是用户访问团购平台首页 点击左上角会出来一个导航栏 里面集成 了用户自助服务的快速通道 全部团购点击就是浏览用户所在城市下所有团购 我 的团购券是用户自助管理团购券的快速入口 待付款的订单收藏了用户已确认但未 支付的订单 团购收藏包含用户收藏的团购单 抵用券是用户查看剩余抵扣券 用 户点击切换城市按钮会进入城市选择页面进行选择 如图 3 10 所示 图 3 10 用户导航需求 用户点击导航页面的我的团购券入口会进入用户信息管理页面 该模块是给用户 管理团购券和订单 包括如下功能 未使用的团购券 用户点击该按钮 页面会显 万方数据 18 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 示未使用的团购券列表 用户可以点击某团购券查询具体的信息 已使用的团购券 用户点击该按钮 会显示用户之前已经使用过的团购券列表 同样用户也可以查看 具体的团购券信息 待付款是对用户未付款的订单进行管理 用户在浏览团购时已 经确认订单 但是还未确认付款的订单都会显示在该页面 用户可以浏览并选择订 单继续完成支付 已付款订单是对用户完成付款的订单进行管理 用户点击已付款 按钮 页面会显示用户所有的已付款订单 用户可以查看订单的具体内容 最后还 有一个抽奖按钮 是用来管理用户的抽奖活动的 用户通过该功能可以查看参加的 抽奖活动 并查询抽奖信息 如图 3 11 所示 图 3 11 用户信息需求 3 4 本章小结本章小结 本章首先阐述了 O2O 团购平台的概念并描述国内 O2O 的现状和 O2O 能够给用 户和商家带来什么利益 再对 O2O 团购平台的可行性进行深入的分析 得出可行的 结论 其次是对 O2O 团购平台的整体设计目标和平台的整体流程进行阐述 最后就 是根据整体流程图对 O2O 团购平台按功能划分模块 对每个模块进行具体的需求分 析 万方数据 19 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 4 O2O 团购平台团购平台的系统设计的系统设计 4 1 O2O 团购平台的总体设计团购平台的总体设计 为了满足系统的可扩展性 稳定性 可维护性 O2O 团购平台的系统分为主要 分为 4 层 属于客户端的 Web 层 属于服务器端的业务逻辑层 基础服务层 数据 访问才层 这么做的好处就是 首先 系统达到解耦合 代码清晰 系统分为多各 层次 每个层次是内聚的形成一个整体 对外提供功能 层与层之间是松散的 上 层与下层之间都有必然联系 任何一层模块出了问题不会影响其他层 上层一般调 用下层 下层像上层提供服务 每层职责清晰 独立 其次可扩展性好 分层之后 将具体业务进行梳理 当系统需要扩展时 只需要针对相应的模块进行扩展 无需 关注其他模块 同样也不会影响到其他模块 23 最后 这样分层次也给系统运维带 来方便 当某个地方出了问题 技术人员只需要仔细排查相应层次 更加方便定位 问题和查找问题 系统的整体结构如图 4 1 所示 图 4 1 系统整体设计 Web 层 数据访问层 基础服务层 业务逻辑层 万方数据 20 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 Web 层是 O2O 团购平台的表现层 它主要负责视觉显示 用户访问平台所见内 容都是由 Web 层所负责展示 使用 HTML5 CSS 移动开发 JavaScript 框架 Zepto Js 加上 Struts2 的 Freemarker 模版引擎等技术 Web 层是属于客户端 用户是通过手机 浏览器访问的 所以该层在设计的时候就考虑到手机屏幕分辨率问题 使用 HTML5 自适应屏幕特性 有些手机浏览器对 HTML5 和 Zepto Js 不能良好支持 也做过多浏 览器测试和兼容性测试 24 在用户体验上 则考虑手机用户的使用习惯 尽量将页 面内容做的精简和直观 用户体验则更直接和方便 这样更符合他们的使用习惯 同时由于手机用户可能经常使用 3G 2G 网络来访问团购平台 为了节省用户流量尽 量使用 lazyLoad 加载图片和少显示图片 业务逻辑层是服务器端的最顶层 主要是接受用户请求和数据 然后进行相应 的处理再返回数据给 Web 层进行展示 服务器端使用 JavaEE 开发规范 使用 MVC 框架 Struts2 提供的控制器来接受用户请求 并根据 URL 映射找到合适的 Action 对 象进行业务逻辑处理的 业务逻辑层大部分都是由一个个处理具体业务的 Action 组 成的 Action 在这里充当的模型的角色 基础服务层是服务器端的第二层 主要是调用底层的数据访问层获取基础数据 再对数据进行简单处理 提供给上层的业务逻辑使用 该层调用下层服务 并为上 层提供服务 结合对业务逻辑层的设计 虽然这 2 层都是对数据进行处理的 但是 业务逻辑层对数据是进行业务逻辑处理 包含了大量业务逻辑 而基础服务层只是 对从数据访问层获取的数据进行简单的加工处理 不包含具体的负责的业务逻辑 简单点说就是基础服务层对数据处理的粒度更细分一些 更简单一些 这样设计的 好处就是方便业务逻辑层的复杂业务逻辑可以重用基础服务层的各种 API 可重用性 更好 这一层使用了 JavaEE 企业级开发框架 Spring 的 IOC 来管理对象的依赖关系 并自动注入依赖对象 使用 AOP 来进行通用的逻辑校验 25 数据访问层就是对关系数据库中的数据进行增删改查操作 它只负责对数据库 进行各种操作 不进行任何的业务处理 但 Java 开发都是操作对象 关系数据库中 都是一条条记录 这里就存在一个问题 如何像操作对象一样操作关系数据库中的 数据 为了解决这个方案 我们使用了业内比较流行的开源的对象到关系数据库映 万方数据 21 华华 中中 科科 技技 大大 学学 硕硕 士士 学学 位位 论论 文文 射框架 Ibatis 使用该框架直接在 XML 配置文件中配置好表名和类名的映射 表的 字段与类的属性一一映射 26 在为各种访问数据库