由Html控制页面结构与布局，Css控制样式，Javascript来控制Android

论文和Essay改写降重和AI查重工具！立刻免费获取！获取免费激活联系微信:idavidxiong

个人简历在学期间发表的学术论文与研究成果

目录

第三章关键技术

第一章绪论

第四章系统总体设计

第二章系统需求分析

第五章系统详细设计

第六章系统原型实现

致谢

参考文献

Abstract

第七章总结与愿望

摘要

中图分类号：
学校代码：

10055

UDC：
密级：

公开硕士专业学位论文
基于HTML5的电子购物系统的开发与设计

Development and design of the electronic shopping system by HTML5
论文作者李刚　　　指导教师李旭东

申请学位工程硕士　培养单位软件学院

学科专业软件工程　　　研究方向项目管理

答辩委员会主席张波　　　评阅人马捷王超谢茂强
南开大学研究生院

二○一四年五月南开大学学位论文原创性声明

本人郑重声明：所呈交的学位论文，是本人在导师指导下进行研究工作所取得的研究成果。除文中已经注明引用的内容外，本学位论文的研究成果不包含任何他人创作的、已公开发表或者没有公开发表的作品的内容。对本论文所涉及的研究工作做出贡献的其他个人和集体，均已在文中以明确方式标明。本学位论文原创性声明的法律责任由本人承担。
学位论文作者签名：年月日
非公开学位论文标注说明

(本页表中填写内容须打印)

根据南开大学有关规定，非公开学位论文须经指导教师同意、作者本人申请和相关部门批准方能标注。未经批准的均为公开学位论文，公开学位论文本说明为空白。

论文题目
申请密级

□限制(≤2年) 　　 □秘密(≤10年) 　　□机密(≤20年)

保密期限

20 年月日至20 年月日

审批表编号
批准日期

20 年月日

南开大学学位评定委员会办公室盖章(有效)
注：限制★2年(可少于2年);秘密★10年(可少于10年);机密★20年(可少于20年)南开大学学位论文使用授权书

根据《南开大学关于研究生学位论文收藏和利用管理办法》，我校的博士、硕士学位获得者均须向南开大学提交本人的学位论文纸质本及相应电子版。

本人完全了解南开大学有关研究生学位论文收藏和利用的管理规定。南开大学拥有在《著作权法》规定范围内的学位论文使用权，即：(1)学位获得者必须按规定提交学位论文(包括纸质印刷本及电子版)，学校可以采用影印、缩印或其他复制手段保存研究生学位论文，并编入《南开大学博硕士学位论文全文数据库》；(2)为教学和科研目的，学校可以将公开的学位论文作为资料在图书馆等场所提供校内师生阅读，在校园网上提供论文目录检索、文摘以及论文全文浏览、下载等免费信息服务；(3)根据教育部有关规定，南开大学向教育部指定单位提交公开的学位论文；(4)学位论文作者授权学校向中国科技信息研究所及其万方数据电子出版社和中国学术期刊(光盘)电子出版社提交规定范围的学位论文及其电子版并收入相应学位论文数据库，通过其相关网站对外进行信息服务。同时本人保留在其他媒体发表论文的权利。

非公开学位论文，保密期限内不向外提交和提供服务，解密后提交和服务同公开论文。

论文电子版提交至校图书馆网站。

本人承诺：本人的学位论文是在南开大学学习期间创作完成的作品，并已通过论文答辩；提交的学位论文电子版与纸质本论文的内容一致，如因不同造成不良后果由本人自负。

本人同意遵守上述规定。本授权书签署一式两份，由研究生院和图书馆留存。

作者暨授权人签字：

20 年月日

南开大学研究生学位论文作者信息

论文题目

基于HTML5的电子购物系统的开发与设计

姓名

李刚

学号

2220101267

答辩日期

2014年5月25日

论文类别

博士□学历硕士□硕士专业学位□高校教师□同等学力硕士□

院/系/所

软件学院

专业

项目管理

联系电话

18502209109

Email

tlmy2406@163.com

通信地址(邮编)：天津市河东区中山门友爱东道16-2-305

备注：

是否批准为非公开论文
注：本授权书适用我校授予的所有博士、硕士的学位论文。由作者填写(一式两份)签字后交校图书馆，非公开学位论文须附《南开大学研究生申请非公开学位论文审批表》。
摘要

移动互联网最近几年正以不可阻挡的趋势在发展，随着苹果和安卓等手机日新月异的发展，人们会更多的通过手机去访问互联网，所以互联网公司研发其经营业务的移动版本已经是大势所趋的问题了。社会开始进入信息分享与共享的时代，可以很明显得感觉到，移动端已经成为了现在所有互联网公司共同的战场，无线互联网这块蛋糕，越早投入精力和资金，就越容易获得产出和收益。

本文结合“延续现有业务至移动端”的业务需求，通过进行大量的数据分析与调研，进行需求分析并确定系统的实现方案。依托本系统，用户可以进行查看商品、购买下单、查询进度、反馈评价等诸多特色性功能。针对确定的功能，细化形成功能模块图与各功能模块之间的业务流程，为了极大程度的便于用户的使用，引用移动设计的思想与设计方式进行相关的开发与设计工作，并在开发中进行大量的用户用例测试，汇总与分析反馈结果，进行平台的优化。产品基于Html5技术开发。其中，由Html控制页面结构与布局，Css控制样式，Javascript来控制Android版本，Object-C来控制iOS版本，与用户交互。

开发实现的功能中，系统通过读取不同的用户权限展现不同的页面效果，实现美观与效果共存；商品展示页给予商品极其丰富的展示空间；购买流程支持用户从结算，到付费完成的过程。以上内容将使得平台的维护与管理更加有序。在开发中本系统进行了多手机端系统及屏幕尺寸兼容性调试，本系统在iPhone、Android、Windows Phone 、MIUI等主流手机系统上均可流畅运行。

关键词：移动互联网；Html5；CSS；电子商务；Android；Object-C
Abstract

In recent years, the mobile Internet is an irresistible trend in development, with the development of apple and Android and other mobile phone change rapidly. People will be more through the mobile phone to access the Internet, so theInternet Co R & D the business of mobile version is already represent the general trend of the problem. The society entered the information sharing and sharing of the times, can obviously feel, mobile terminal has become now all Internet Companybattlefield.

According to "the continuation of the existing services to mobile terminal"business needs, through a large amount of data analysis and investigation, the demand analysis and determine the system scheme. In order to determine the function, refinement is formed between the function module chart and the business processes of each functional module, used togreatly facilitate users, reference thinking and design of mobile designdevelopment and related design work, and tested the user case in a large number of development, collect and analyze feedback results, optimizationplatform.The product is developed based on Html5 technology. Among them, controlled by the Html page structure and layout, Css control mode, Javascript to Android version control, Object-C to iOS version control, and user interaction.

Development and implementation of the function, system by reading the different user permissions to show different page effect, achieve beautiful and effect ofcoexistence; commodity display pages give commodity rich exhibition space; the purchase process to support the user from the settlement, to pay complete. In the development of the system for the multiple mobile phone terminal system and screen size compatibility testing, the system can be found in the iPhone,Android, Windows Phone, MIUI and other mainstream mobile phone system to run smoothly.

Key Words：Mobile Internet；Html5； Electronic commerce；Android； Object-c

目录

摘要 I

Abstract II

目录 III

第一章绪论 1

第一节论文背景 1

第二节国内外研究现状 2

第三节本文主要研究内容 3

第四节本文组织结构 4

第二章系统需求分析 5

第一节功能需求 5

2.1.1系统总体目标 5

2.1.2 项目设计原则 6

2.1.3 业务需求内容 6

第二节非功能需求 7

2.2.1 系统安全性要求 7

2.2.2 架构要求 8

2.2.3 系统兼容性要求 8

第三节系统用例 8

2.3.1 登录注册用例 8

2.3.2 商品购买用例 9

2.3.3 个人中心用例 10

2.3.4 商品浏览用例 11

2.3.5 订单结算功能用例 12

2.3.6 评价功能用例 12

第三章关键技术 13

第一节本课题所运用的技术概述 13

第二节 Html5介绍 13

第三节层叠样式表（CSS）简介 15

第四节 JQuery技术 17

第五节开发环境和工具 18

第四章系统总体设计 19

第一节逻辑功能架构 19

第二节系统技术架构 20

4.1.1 产品设计思路 21

4.1.2 开发设计思路 23

第三节物理拓扑架构 23

第四节数据库设计 24

4.4.1 实体关系图 24

4.4.2 数据字典 26

4.4.3 连接池技术 35

4.3.4 E-R图 36

第五章系统详细设计 39

第一节用户注册系统详细设计 39

第二节用户登录系统详细设计 44

第三节商品搜索功能 47

第四节购物车系统详细设计 51

第五节订单结算系统详细设计 53

第六节售后评价系统详细设计 55

第六章系统原型实现 55

第一节系统开发及运行环境 55

第二节系统运营主页面 55

6.2.1 电子购物系统首页 56

6.2.2 侧导航页面 56

6.2.3 商品列表页面 57

第三节用户注册子系统实现 59

第四节用户登录子系统实现 61

第五节商品搜索子系统实现 63

第六节购物车子系统实现 64

第七节订单结算子系统实现 66

第八节售后评价子系统实现 69

第九节核心技术实现 70

第七章总结与展望 72

第一节本文总结 72

第二节进一步展望 72

参考文献 74

致谢 76
第一章　绪论

第一节　论文背景

有人说谁掌握了移动互联网的先机，谁就掌握了未来，随着近年来移动互联网的加速发展，越来越多的用户选择使用移动终端访问互联网，据DCCI互联网数据中心预计，2012年手机网民将达5.83亿，继续保持30.71%的稳步增长，并逐渐逼近PC网民规模。随着3G、4G等网络覆盖率的提高，移动互联网应用的进一步丰富，用户体验得到了进一步的提升，越来越多的移动增值服务被用户所使用。其中，移动电子商务占据了很大一块比例。

互联网进入了共享信息与分享信息的时代，同之前不一样的是，人们之间掌握的信息量存在很大的差别，需要不停得交流和互换信息，现在这一部分内容，可以通过网络完美解决，新浪微博的转发和评论即是此功能。这样一来，人们彼此间也变得愈加透明，自然而然得再次进入“孤立”的状态去寻找兴奋点的循环，毕竟，人与人之间的沟通和交流是需要寻找主题和寻找兴奋点的。基于以上的深入思考，我们发现了互联网面临的新的问题，信息越是通畅、共享程度越高，人与人之间越容易陷入“孤立”的状态，或者说，信息的高度透明导致信息接收者的同质化现象越来越明显。我相信，这绝非移动互联网发展的价值归宿，因为“孤立”必然导致“瓦解”，而我们要实现的恰恰是“融合”。

可以很明显得感觉到，移动端已经成为了现在所有互联网公司共同的战场，任何一个公司如果想在这场没有硝烟的战争中生存下去，就必须投入足够的精力与财力，越来越多的手机APP开发公司注册建立，同时传统互联网公司也纷纷成立相应的无线部门。无线互联网这块蛋糕，越早投入精力和资金，就越容易获得产出和收益。

国内知名咨询集团iResearch艾瑞咨询于报告中指出（如图1.1中所示），2011年中国移动电子商务市场交易规模为114.6亿元，同比增长416.2%；预计2012年中国移动电子商务市场规模将达到557.8亿元，到2013年将超过1000亿，达到1142.8亿元可见，移动电子商务的蓝海已是电子商务未来几年重点的发展方向了。
图1.1 2006-2015年中国移动电子商务交易规模

第二节国内外研究现状

每个人都很清楚的知道，发展得非常迅猛的互联网技术，越来越广泛得应用于各个领域。随之带来的，电脑桌面程序已经越来越缺少用户和阵地，曾经在普通电脑端使用的最多的浏览器，那些单纯承载图片和文字的页面已经无法满足人们的需求，而现行的HTML标准又怎么可能满足人们越来越强烈的视频、动画等等多媒体播放的需求[1]。因此插件产生了，满足了人们大多数的需求极大程度上，同时这些装了插件的人们，计算机运行越来越慢，越来越容易中毒等问题随之产生。在这样的大前提下，HTML5草案推出了，我们看到了未来浏览器本身也能完成这些使命[2]。

1999年12月份是HTML最近一次升级的日子，版本是4.01。从那天以后发生了很多变革。开始的那些浏览器的战争已经逐渐结束，但浏览器战争带来的结果是WEB标准运动愈加的混乱，在基于HTML4标准的WEB下，我们不得不依靠外来的插件来满足人们播放商品、音频以及最新3D绘图技术的需求，最著名的的当然是Adobe公司的flash 和Microsoft公司的Sliverlight，为了他们，我们不得不在把他们装在我们越来越臃肿的浏览器上，运行速度缓慢到无以复加的地步，研究HTML5标准有利于从源头上解决这问题。2008年1月22日是HTML5第一份正式草案发布的日子。大多数的浏览器已经可以支持HTML5的语言模式了，虽然其仍处于一个完善中的阶段。

HTML（HyperText Mark-up Language），超文本标记语言或超文本链接标示语言）随着W3C（World Wide Web Consortium，W3C理事会或万维网联盟）一直在变化标准，HTML已经走过了4代的标准，自从HTML5的标准草案公布以来，HTML5赢得了广大开发者和大公司们的欢迎，就因为它简单，有简单的标签元素，你要知道在这之前要非常复杂的JavaScript代码才能搞定这些。目前移动开发只有两种方法，分别是全部使用HTML5语法和仅使用原生语法。HTML5手机应用的最大优势就是可以在网页上直接调试和修改。因此也有许多手机杂志客户端是基于HTML5标准，开发人员可以轻松调试修改。

因为HTML5标准目前没有全球范围推广，只是出于研究草案阶段，在国内外也没有太多的应用，所以浏览器的支持并不全面。目前只能支持Youtube，海盗湾，同时Google在其网站上实现了部分功能标签。而苹果公司在其推出的iPhone手机和iPad平板电脑上则完全支持HTML5标准[3]。

第三节　本文主要研究内容

本文通过上述的调研和分析，结合本公司特点，确定了手机移动终端（APP）的实现方案。本课题设计的平台采用基于Html5技术开发。用户通过下载APP来使用，实现服务器与服务器端数据库的交互。本系统的采用mysql+mongoDB作为后台数据库，CSS来进行样式控制，分为Android和iOS两个版本。

结合开发系统的需求特点，确定了电子购物平台系统功能模块和运转，完成了系统总体功能设计和各子系统的详细功能设计。

电子购物系统主要实现的子模块有如下几部分，其主旨为确保用户的商品浏览、购买、收藏、评价等在平台上实现：

商品列表和详情展示，提供用户瀑布流的浏览形式和各类筛选条件，及商品的部分信息，让用户根据各种条件来浏览自己想要看到的商品，并展示商品的详细信息，包括库存量，颜色，售价，真人穿戴样式等。

登录注册系统，实现账户的创立，基础信息的填写，及账号的登录过程。

购物车系统，用户可以轻松建立一个功能强大的网络订单，实现用户下单、在线定购、在线支付等电子商务功能。

订单管理系统，用来管理用户已经完成或正在进行中的订单。

评价系统，帮助顾客购买完成之后，请顾客对服务人员的服务质量和商品质量进行评价。

第四节　本文组织结构

本文中，第一章中整体介绍电子购物系统产生的环境原因，包括：“论文背景”、“国内外研究现状”、“研究内容”，分析了为什么要做这样一个系统的同时，也描述了我们要做一个什么样的系统；

第二章中，介绍了电子购物系统的系统需求分析，通过对平台搭建的目的和运营方需求，构架了具体的功能，为系统的设计及实现打下一个良好的基础；

第三章中，罗列了开发本系统所用的关键性的技术。

第四章中，从整体上介绍了系统的功能设计，也就是设计系统总的处理方案，又称系统概要设计。

第五章中，详细介绍系统的设计与实现。根据系统设计的原则，依照系统的需求分析，将系统的功能从整体到局部进行模块化，并按照子系统功能模块开发实现了各个子模块的具体功能。

第六章中，结合相关技术及具体实现方案对系统整体进行了描述。

在本文的最后一章，说明了本课题研究中的所得与不足，并对本课题的前景进行了展望。

第二章　系统需求分析

第一节　功能需求

2.1.1　系统总体目标

本电子商务购物系统需要达到的目标是：累积用户、让用户看到感兴趣的商品、最新的商品信息、商品评价、本公司的历史和现状、人员招聘等，从而扩大公司知名度，开拓更广阔的市场。

基本策略：产品策略，价格策略，促销策略。

规划和设计原则：1）实施商务流程再造原则：支付营销，零库存，24×7服务；2）实施原则：用尽可能少的成本为客户创造尽可能多的服务和优惠。

采用B2C网上零售系统，即商家对个人客户的电子商务。B2C模块是面向网上零售商的模式，结合传统交易习惯，改善客户购物流程，增进网上零售商与客户间的交流与沟通。通过一系列个性化服务成功实现网上零售商对客户的一对一互动式管理，具体功能如图2.1所示[6]。
图2.1 系统目标流示例图

2.1.2　项目设计原则

由于我们的电子购物系统将会把目标用户设定在整个的亚太地区，因此，系统的设计准则中，应该加入可复用、可延展、便于维护、使用灵活的特性。而且，在整个的研发的阶段里，需要注意那些大规模反复的功能开发，多去使用第三方成熟的控件。同时，还要注意以下的原则：

便于维护的系统是避免系统升级维护等问题造成的对整个普通使用者的影响，应该是易于维护、安装和升级的。

高度的时效原则，是指需要系统尽量得高效能和紧凑，因为系统随时随地都会有必须去完成的并行发送的业务诉求，这样会适当加速每次诉求的反应时长，不会出现让用户去等着系统进行数据加工的情况。

可延展性是指，系统要拥有高效的可延展性和灵敏性，要尽量顾及之后的运营变化情况和网站的发展情况，可以依据需求的变化而迅速改变和增加功能需求，而满足业务的发展。不会让程序开发成为制约业务发展的条件，从而能顺利发展公司的业务。

具有一致的标准，包括：数据库标准、技术标准、设计规范、代码规范、及其他有关的规范内容。

平稳性原则是指，用户对网站的访问过程中，能够平稳有效得进行，不会因为访问量过大等情况，出现宕机。

易用性原则，只不违背互联网用户的使用习惯，可以简单上手，不需要用户有很高的学习成本。

还需要有很高的安全性，指网站的所有数据都要非常严谨的保密，任何内容的丢失和泄露都会是无法弥补的经济损失，所以程序在开发商要尽一切可能考虑安全和防泄漏的规则，保证信息不会丢失、泄露。

需要和互联网先进的技术接轨，保证程序和前端设计上与时俱进，也使得用户在使用上更加流畅。

2.1.3　业务需求内容

注册功能：外部用户需要使用邮箱或者手机号注册，填写昵称和密码。需要保持手机号、邮箱、昵称三者的唯一性，并且同一个IP在一个时间段内注册账号数量要有所限制。

登录功能：已经注册过的用户，可以通过输入邮箱（或手机号）登录网站，并且持续保有之前的购买和收藏夹记录。同时，一个IP和一个session的用户，在一定时间段内登录错误的次数要有所限制。

商品展示功能：需要能按照每个商品单独的页面的形式，展现不同的商品，同时用户可以购买到任意有效期间的商品，且该商品下架的时候会提示下架，而非删除掉。

商品筛选及排序功能：用户可以通过颜色、分类、价格区间、品牌等筛选出想要的商品，且可以按照价格、人气、上架时间等进行商品排序。

商品搜索功能：可以通过关键词的输入搜索到相关的商品，包括搜索联想和错词匹配功能。

购物车功能：可以完成商品下单到购买的过程，并且实现银联和支付宝两种支付方式。

评价功能：实现购买完商品的用户，对其购买的商品进行评价，未购买商品的用户不能参与评价的过程。

第二节　非功能需求

2.2.1　系统安全性要求

对于该方面的需求，安全考虑上应包括：超时session保护、口令传输单项不可逆加密、验证身份、不同用户的不同权限管理，结构代码必须安全，而且架构上要能承受住黑客的攻击行为。

超时session保护。对session设定一个超时的时间，如果长时间不进行任何操作，即视为超时，必须要重新登录才可以。

口令传输单项不可逆加密。为了防止黑客的恶意攻击和木马嗅探的方式，口令的传输需要用以上的方式进行加密。

验证身份。无论是管理员在后台登录，还是前台普通用户登录网站，都应该有验证码来验证身份。

不同用户的不同权限管理。后台的各个模块应该能够根据不同的用户设置不同的权限，基于角色来设定访问的功能点，同时这些权限又是可以变化和调节的。另外，要求绑定用户的IP来进一步增加安全性，某个账号只能在这个IP下访问本站后台。代码安全控制。

同时，要做到以下的需求，防止黑客从代码角度进行攻击：防止session注入型的攻击；防止SQL注入、脚本注入、HTML注入型的攻击；防止频繁试错和强行破坏方式的攻击；防止其他站点跨站的欺骗请求和脚本攻击；防止session被劫持和被修改[8]。

2.2.2　架构要求

所有的CSS要求采用外部引用的方式，不要直接在页面中编写CSS代码。按不同的模块需要的CSS编写多个CSS文件，按需引用。

采用AOP方式来进行日志、审计、错误处理等的控制，增加系统的柔性。

2.2.3　系统兼容性要求

系统要求良好的浏览器兼容性，要求在iOS6、iOS7、安卓4.1及以上版本、MIUI等不同的手机操作系统中可以正常的显示和处理。在各种浏览器中保持页面展示的一致性，不会发生页面变形或JS处理错误[4]。

第三节　系统用例

2.3.1　登录注册用例

用户注册部分，当用户填写完相应资料之后，即可在网站注册一个属于自己的账号，之后也可以通过本次填写的信息再次登录，同时，扩展关系允许用户自主邀请好友注册应用。

用户登录部分，分为手机号登录和邮箱登录两部分，根据用户注册时填写信息的不同，登录可使用的方式也不同，属于泛化关系。

用户信息修改部分，包含登录密码修改和基础信息修改两部分，修改密码之后，原密码将无法再使用，基础信息修改之后，部分会显示该信息的区域会随之跟着更新。登录注册功能的用例图，如图2.2所示。
图2.2登录注册功能用例图

2.3.2　商品购买用例

商品购买分为购物车和订单结算两个子功能，因为内容关联性较强，在功能需求部分合并为一个用例单元展示。

在购物车的功能中，分为购物车维护、生成订单和登录三个部分的用例。

其中，购物车维护具有3个功能，分别是添加商品、移除商品和更新商品数量。添加商品即将用户中意的商品加入其购物车中，删除商品是将不想购买的商品从购物车中删除，更新商品数量是更新用户的购物车，将其中失效的商品临时去掉。

登录功能是直接调用1.3.1节中写到的登录系统，此处不再复述。

订单结算包含填写收货方式、选择支付方式、使用代金券、使用余额、订单提交支付5个部分。填写收货方式时，用户填写其收货人等详细信息，后续会发给快递公司寄送商品；选择支付方式，可选银联支付和支付宝支付；使用代金券，即用户可以使用其通过活动等方式收到的各种代金券，可抵免一部分现金；使用余额即用户可以使用其之前购买后在网站所剩的余额；订单提交支付即最后步骤，订单提交到网站中。商品购买流程的用例图，如图2.3所示。
图2.3商品购买功能用例图

2.3.3　个人中心用例

个人中心分为5个功能部分，分别是查看更新个人信息、修改密码、购物车维护、订单浏览维护、退出登录。

查看更新个人信息即更新该用户的个人信息，更新后部分显示该信息的地方也会随着更新；修改密码即修改用户登录密码，不再复述；购物车维护即维护购物车信息，不再复述；订单浏览维护，是浏览已经完成和过程中的订单，分为3部分，订单列表浏览、订单详情擦看、订单状态修改，其中“订单状态修改“部分是完成之前未完成的订单的功能；退出登录即把自己的用户状态从登录用户变为游客状态。用户个人中心用例图，如图2.4所示。
图2.4个人中心功能用例图

2.3.4　商品浏览用例

商品浏览的情况分为两部分，商品列表页查看和商品详情页查看。

商品列表页查看的时候，可以通过关键字搜索找到商品，也可以通过各种条件的筛选找到商品，找到商品以后可以通过一些条件进行结果的排序。

商品详情页查看的过程中，可以添加商品到购物车和到收藏夹。用户商品浏览功能的用例图，如图2.5所示。
图2.5商品浏览用例图

2.3.5　评价功能用例

评价系统包括文字评价和打分两个部分，只有购买过商品的用户才能进行评价，并且文字评价和打分两项均非必填，用户可以填写任意一项，或者均不填写。评价功能的用例图，如图2.6所示。
图2.6评价功能用例图
第三章　关键技术

第一节　本课题所运用的技术概述

在本系统的设计中，主要涉及到了如下的技术：

基于Html5技术开发。其中，由Html控制页面结构与布局，Css控制样式，Javascript来控制Android版本，Object-C来控制iOS版本，与用户交互[5]。

基础类库

Android版本主要开发语言为Javascript，iOS版本开发语言为Object-C。依靠jQuery作为主要基础类库，并加载由Google开发的Fast Button技术，实现对用户操作的快速响应，并兼容PC平台浏览器。

框架

移动版的框架是在充分吸取jQuery Mobile及Backbone.js两大典型框架的技术优点之后，重构完成，已经形成独立框架。新框架以MVC架构为基础，支持对象事件驱动，并将DOM与Controller进行绑定，将应用模块化，实现页面切换。

数据交互与存储

移动版的与后台的数据交互通过标准HTTP协议进行，主要数据格式为XML，辅以浏览器原生支持的JSON格式，并充分利用Html5的本地存储API，实现在最短时间向用户展示网站内容。

用户行为统计

为提升用户体验，提升销售业绩，通过基因后台及Google Analytics提供的接口，记录用户行为[9]。

第二节　Html5介绍

为了替代1999年版本的XHTML 1.0和其同年制定的HTML 4.01，HTML5出现了；现在大多数的浏览器已经可以支持HTML5的语言模式了，虽然其仍处于一个完善中的阶段。HTML有2个非常明显的特征：第一，加强了WEB页面的功能。第二，添加了本地数据库的网页端应用的性能。整体上说到HTML5的时候，往往是指HTML、JavaScript和CSS等整合在一起的完整技术。他们致力于减小浏览器需要的控件网络应用服务，包括Microsoft Silverlight，Adobe Flash，Oracle JavaFX等，而且希望能够增加强化网络使用的标准化的集合。

由于缺乏HTML 4.01之后的网络标准，1999年12月之后就没有任何的更新了，为了改变这一现状，增强Web模式化的发展，很多的公司一起行动起来，成立了一个叫 WHATWG的团体（Hypertext Application Technology Working Group），含义是（Web超语言文本开发程序项目组），其希望改善Web应用程序和菜单，在2006年，WHATWG 与W3C（万维网联盟，World Wide Web Consortium）进行融合，希望能开发出一个全新的HTML标准。

在2004年，WHATWG向互联网界公布了一个新的HTML草案-HTML5草案，其前身是Web Applications 1.0，在三年后的2007年，与W3C合并，简历了新的服务于HTML的项目团队。

2008年1月22日，他们向人们公布了第一份正式的HTML5的草案。现在大多数的浏览器已经可以支持HTML5的语言模式了，虽然其仍处于一个完善中的阶段。

W3C（万维网联盟）在2012年12月17日，发言宣布了HTML5的规范正式版本，向世界宣称：HTML5是开放的Web网络平台的奠基石。

在一年后的5月6日，HTML 5.1的正式版本对外宣布。首次要修改万维网的核心代码：超文本标记语言。这个经历了5次重大版本的新版本里，为致力增强元素的互动性，提出了很多心的功能。

从同年（2012年）的12月27日开始，即本版本的发布时，进行的修改大致近百项，涵盖相关的接口、Canvas、XHTML的标签、HTML的标签等，另外HTML5的svg也进行了调整，还有HTML5的图片img处理性能，全部由了质的飞跃。

能够支撑HTML5的浏览器有如下的几个：IE9及其更高版本，Firefox，Chrome，Safari，Opera；国内浏览器包括：傲游浏览器，360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等。

移动端如果要开发基于HTML5的APP，只有两种路子可选，用全部JavaScript的引擎，和用全部HTML5的语法。

基于全部使用HTML5的手机APP会运行非常慢，而且错误很多，不过在整体效果的改善后会变得好一些。不过却没有多少人愿意做这样费力不讨好的改善。

JavaScript的方法虽然很复杂，但其预设了一个UI的包去用，使手机上的网页游戏成为了现实。

HTML5的手机APP的好处在于可以直接在页面上Hotfix。起初的APP开发者可能需要用非常大的代码量才能完成HTML的样式效果，要不停得去调试、修改代码和测试运行。所以呢，也有很多的手机杂志APP会用HTML5的标准，开发者的调试变得很简单。图3.1展示了HTML5国际标准规定的图标样式。
图3.1HTML5国际标准图标

第三节　层叠样式表（CSS）简介

CSS（Cascading Style Sheet），也被称为层叠样式表。它的作用是定义如何显示HTML元素，同时控制WEB页面的外观。样式存储在样式表中，通常放在部分（内部样式表）或存储在外部CSS文件（外部样式表）里。实际应用中，设计者可以通过修改样式表的定义方式使页面展现出完全不同的外观，当网站拥有大量，如几十，上百的页面时，通过修改页面链接的样式表文件即可修改页面的外观，而不用修改每一个页面，从而大量的减少工作量。相较于传统的表格布局方式而言，层叠样式表具有便于网页修改、便于网页的统一、减少网页体积等特点。图3.2即CSS国际标准中定义的图标。
图3.2 CSS国际标准图标

CSS于1996年12月定版发布第一个版本，一经发布，其构思和方法即吸引各方的注意。1997年初，W3C（万维网联盟）成立了专门的CSS工作组，并于1998年5月出版第二版，即为CSS2。在这当中，新增了诸如通用、相邻同胞、子选择器等多种高级选择器，也添加了诸如浮动和定位等高级概念，令CSS2功能变得更加得全面，应用起来也更加得方便。CSS3的版本（草案版本）出现在2009年，与之前相比较，模块化的开发方式被加入到CSS3的开发框架中。其中，分解成用很多小的模块用以代替原有的大模块，又研发了很多新模块，诸如：多栏布局、超级链接的方式、背景、边框、列表模式、文字特效等。页面布局中，设计者通过对层叠样式表（CSS）的灵活使用，克服了一个在之前开发中一直很难解决的普遍问题：

起初的设计中HTML的标签是用作被定义文档的内容。原先，我们标记“段落”、“表格”、“标题”等会使用诸如

、

等类型的标签，浏览器则负责完成对文档布局的功能，并不涉及到任何格式化形式的标签。目前的主要的浏览器形式（CHROME和IE）不断往HTML的规范中添加了很多新的诸如字体标签和颜色的属性和新的HTML标签，将一件事情变得越来越困难，那就是创建一个清晰的文档，用于文档的表现层。

万维网联盟，创造出了新的样式且高于现在的HTML 4.0版本，为了去解决以上提到的这个问题，那么差不多所有的浏览器，都会支持这种层叠样式表（CSS）。在不断的应用与凝练中，设计者们通过使用CSS技术有效地提高了工作效率，通过运用外部样式表，使开发者可以同时改变网站中所有页面的布局与外观。通过对CSS文件进行修改，网站中的所有元素均会自动进行更新，从而实现全局更新的目的。

第四节　JQuery技术

在网页开发过程中，除了对页面进行布局以外，经常需要在页面上实现诸多的特殊效果，使自己的网站具有出众的视觉冲击和表现张力。为了实现特殊效果，开发者经常会采用Flash来表现，诚然Flash在网页表现力上具有非常优秀的效果，但是大量的Flash嵌入将会严重拖缓页面的读取速度，对于用户的使用而言，不能称之为一种好的办法。

为了解决这种问题，更多的开发者使用Javascript来代替Flash来实现特效，但是传统意义的Javascript的表现力明显不能令用户与资方满意，JQuery库的出现和应用改变了这一状况，使页面在加载速度和表现力上获得了一个出色的平衡点。由顶尖Javascript开发人员组成的核心团队开发出的jQuery是一个强大的JavaScript库。开发者可以运用其中的方法来增强自己的网站。jQuery在一个紧凑的文件中提供了丰富多样的特性、简单易学的语法和稳健的跨平台兼容性。此外，百余种为扩展jQuery功能而开发的插件，更使得它几乎成为适用于各类客户端脚本编程的必备工具。

jQuery库为Web脚本编程提供了通用的抽象层，它容易扩展而且不断有新插件面世来对其功能进行增强，使得它几乎适用于任何脚本编程的情形。JQuery就他的中心属性来说，可以实现以下的这些需求：

找到某个页面里边的元素点。JQuery为了精准地找到急需查询和控制的文档里的元素点，贡献了非常迅捷和靠谱的机制-选择符。做到以上这点，在不考虑Javascript类库的情况下，不用他去遍寻文档对象模型树，一定要敲非常多的程序代码，去找寻HTML文档类目里的一些特定的部分。

改变网页的外形。使用JQuery，只要写很少的程序代码，就可以完成修改文本、重新排序列表、转动和插入图像，因为面临浏览器不能完美支持同样的CSS标准的时候，虽然CSS在这方面给出了非常大的支持的手段，但仍就显得力不从心。但JQuery通过给出跨浏览器的解决方法的方式，完美得解决了这一点。而且，就算页面已经完成并呈现给了用户，JQuery还是可以修改页面中的某个部分的样式的属性。

配合访问者的对于页面的操作。jQuery提供了截取形形色色的页面事件的适当方式，而不需要使用事件处理程序搞乱HTML代码。此外，它的事件处理API也消除了经常困扰Web开发人员的浏览器不一致性。

添加了很多动态效果到页面里。jQuery中内置了大量的淡入、擦除、缩放、弹出、过度的效果，为开发者所用，进而增加其页面增加表现力。
图3.3JQuery国际标准图标

第五节　开发环境和工具

HTML5 开发APP需要一个开发框架和编译环境，我们选择的是开源的平台PhoneGap。PhoneGap是一个开源的开发框架，使用HTML5，CSS3和JavaScript来构建跨平台的的移动应用程序。。它使开发者能够利用iPhone，Android，Palm，Symbian，WP7，Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能。图3.4显示了PhoneGap的国际标准图标。
图3.4PhoneGap国际标准图标

第四章　系统总体设计

第一节　逻辑功能架构

如图4.1中所示，系统分为四大模块，分别为：用户通行证模块，商品浏览模块，购买流程模块，售后评价模块。
图4.1逻辑功能架构图

用户通行证模块，该模块是记录用户基础资料和账户资料的模块，其中注册、登录和修改密码功能都在此模块中。另外，用户个人中心也被归为此模块中。

商品浏览模块，是商品陈列的模块，主要用户用户浏览商品，其包括商品搜索功能，用户可以通过关键字搜索商品；商品筛选功能，可以通过各种条件进行商品的筛选；排序功能，对商品的结果集进行各种条件的排序。

购买流程模块，该模块讲述的是用户从收藏到购买的流程，包括购物车功能、订单管理功能、订单结算功能、代金券功能，此模块也是电子商务系统中最主要的模块。其中，购物车功能可以收藏用户比较中意的商品，订单管理系统能记录用户完成与进行中的订单总体，订单结算过程即完成购买的过程，代金券功能是抵免一部分现金的功能。

售后评价模块，是属于售后服务的模块，购买完商品的用户可以进行商品的评价。

第二节　系统技术架构

系统技术架构的设计中，我们使用的是多层的技术结构，这样做有以下的几点优点（具体程序架构图如图4.2所示）：

增强了安全性。网站的数据库服务器无法直接被网站的客户端链接到，我们把应用服务器中的数据库服务器与客户服务器分开布置了，这样应用服务器就能区分数据访问的方式还有更改的方式，以及知晓哪些数据被访问了和被改变了。其次，分层次设定了数据和应用的存储权限。这么做的话，即便入侵的黑客搞定了客户端那一级的安全设定，系统也能够防止其损害到其他的部分，因为我们在数据库服务器和应用端服务器设定了其他类型的安全设定[12]。

方便数据库管理员维护。我们往应用端服务器封装了一部分的应用逻辑API。所以，只要改变一下应用端服务器的程序，就能完成对应用逻辑的修改，而不用更新客户端的应用程序，节省了非常大的维护成本。

非常大得提高了工作效率。一改原先应用于客户端和应用服务器端的非常简单的通信协议，过程已经不是简单的链接，有应用服务器端来承受对数据库服务器沟通所必须的驱动和设置程序，这样减少了数据库服务器的成本，也降低了客户端的负载，数据库服务器不用再高频率得沟通与客户端的应用程序，而能一心一意服务于数据库服务器。

第三方的开放性。每个用户可以自定义自己的浏览器程序还有客户端系统，因为我们把应用服务器的所有组件都封装成了标准的API。

可延展性。多层结构的逻辑上是彼此独立的，因我们我们进行了明确的数据分割，与原先的物理存储位置不能完全一一对应，各个模块能自行搭配语气相适应的特性处理和符合处理的硬件[11]。
图4.2程序架构图

4.1.1　产品设计思路

移动端的设计思路与原先PC端还是有很多本质上的区别的，主要包括以下方面：

终端设备

传统互联网：主要的接入终端是计算机。计算机是高度标准化的设备，无论是Mac阵营，还是PC阵营（其他的架构不讨论了）。具体体现在：

绝大部分个人计算机使用的硬件是标准化的，并且功能强大多样；

绝大部分屏幕的分辨率在1024px及以上，尺寸较大；

软件终端比较统一，都是浏览器（暂时不考虑客户端产品），并且由于Web标准的存在，不同的浏览器（或者说不同的内核）对于前端的解析相差不大；

技术标准相对统一，比如用HTML写结构；用CSS写表现；用JS写前端行为；用PHP、JSP等写后端；用MYSQL等管理数据库等。做出来的东西基本上认为是跨平台的。

移动互联网：主要的接入终端是手机和各种pad。拿手机来说，标准化程度远远不及计算机。具体体现在：

硬件设计不够标准。有的手机用按键，有的手机用触屏。有的用方向键，有的用轨迹球。有的带有全键盘，有的用屏幕键盘等等；

分辨率千奇百怪，特别是android阵营。尺寸相对较小；

平台不统一。虽然主流智能手机也基本上是ios和android两种。但是，加上后起的Windows Phone，加上日落西山的塞班，加上非智能机上面的Kjava等，平台很多，开发APP相互不兼容。而移动Web应用（使用手机浏览器访问的）不论从技术上还是体验上都不够成熟。即便是同一种平台，有时在前端的表现也有较大差异，特别是android阵营。

使用场景和使用环境

传统互联网：

大部分情况下，使用传统互联网的场景相对正式一些，使用的环境也更加稳定。比如，我们可能会把笔记本电脑放在桌子上，一动不动上2小时网；

使用环境决定了，传统互联网的接入会比较稳定；

接入速度相对快。

移动互联网：

大部分情况下，使用移动互联网的场景会更加随意一些，随时随地，使用环境也更加复杂。比如，地铁上（可能晃动）、厕所里（可能时间短）、排队的时候（可能匆忙）、被窝中（可能光线昏暗）；

使用场景和环境决定了，移动互联网的应用会更加碎片化；

接入速度相对慢，接入不稳定。

其他方面

传统互联网：资费与流量：大部分是在一定时间内不限制流量的计费方式。

移动互联网：

资费与流量：国内大部分是包月限制流量的方式，并且费用相对较贵。

与计算机不同的特色设备。如：GPS模块、重力感应器等。

4.1.2　开发设计思路

框架框架是整个项目的核心，作为整体项目架构存在，并提供一系列基础方法。另外，框架对原生javascript代码进行了大量扩展，简化了方法调用。

模型是作为项目架构底层，提供一系列数据API，用于处理同服务器的数据交互。其中包含的模块有购物车、用户、品牌、分类、交易以及数据统计。其中购物车模块仅将数据存于本地。

控制器是项目的控制核心，主要功能包括控制用户界面切换，调用模型进行数据获取并进行数据处理，页面事件的绑定及响应。控制器包括一个主控制器和多个分控制器。主控制器负责路由处理，分控制器则对应各个页面。分控制器包括的页面主要有首页、品牌页、分类页、单品页、商品列表页、订单列表页、订单页、购物车页、结算中心、帮助页面等。

工具方法主要提供对框架方法的补充，包括模板方法的调用与获取，javascript事件的扩展，手势的扩展，cookie的读取与写入以及xml数据的处理。其中手势扩展包括orientationchange、tap、taphold、swipe、swipeleft、swiperight、scrollstart、scrollstop等手势。

第三节　物理拓扑架构

计算机网络拓扑结构是指网络中各个站点相互连接的形式，在局域网中明确一点讲就是文件服务器、工作站和电缆等的连接形式。现在最主要的拓扑结构有总线型拓扑、星型拓扑、环型拓扑、树形拓扑（由总线型演变而来）以及它们的混合型。咱们这里采用的是网状拓扑结构，网状拓扑又称作无规则结构，结点之间的联结是任意的，没有规律。就是将多个子网或多个局域网连接起来构成网际拓扑结构。在一个子网中，集线器、中继器将多个设备连接起来，而桥接器、路由器及网关则将子网连接起来。顾名思义，总线型其实就是将文件服务器和工作站都连在称为总线的一条公共电缆上，且总线两端必须有终结器；星型拓扑则是以一台设备作为中央连接点，各工作站都与它直接相连形成星型；而环型拓扑就是将所有站点彼此串行连接，像链子一样构成一个环形回路；把这三种最基本的拓扑结构混合起来运用自然就是混合型了。图4.3中，展示了本系统的物理结构拓扑图。
图4.3购物系统物理拓扑图

第四节　数据库设计

4.4.1　实体关系图

实体关系主要包含以下的几个方面内容（如图4.4中所示）：

单品信息→商品信息，一个商品由N个单品组成，实际的仓储情况中存储了几十上百的单品信息，他们每个都有自己不同的特征性数据，单品信息表关联至商品信息表通过user_id（商品ID）字段来进行数据库关联。

商品信息和单品信息→交易信息，交易的时候会需要调去商品信息和交易的单品信息，每一个具体的交易都会有不同的单品信息和商品信息，单品信息关联通过item_id（单品编号）来进行关联，商品信息通过user_id（商品ID）字段来进行数据库关联。

交易信息→收货地址，交易之后的发货环节会需要调取用户的收货地址，收货地址与交易信息的关联通过（trade_id)进行关联。

专场信息→品牌信息和商品信息，每一个活动专长的都会涉及不同的品牌和商品，调取该部分的内容，分别通过user_id和brand_id 两个字段实现[16]。
图4.4购物系统实体关系图

4.4.2　数据字典

表结构

本系统的数据库采用了关系型数据库，由若干数据表组成。在满足第三范式条件下，为了提高查询效率，保持了适当的数据冗余。具体数据表信息如下表所示。主要的表结构如表4.1所示。

表4.1系统主要数据表

序号

数据库表名

说明

1

auction_products

产品

2

auction_items

品类

3

auction_trades

交易

4

auction_units

单位

5

auction_contacts

地址

6

auction_categories

分类

7

auction_markets

专场

8

auction_vouchers

代金券

9

auction_brands

品牌

10

auction_customers

用户

表关系

一个专场拥有多个产品；

一个产品拥有多个单件，多个图片，多个视频，多个属性的多个值，属于一个分类，一个品牌；

一个订单对应一个联系地址，多个单位，每个单位对应一个单件；

一个邮件有多个图片和发送记录；

一个抽奖有多个盒子，一个盒子对不同用户有多个机会；

一个物品有多个出价人和出价记录；

一个链接有多次点击，属于广告，广告属于推广；

每个优惠券对于每个用户有一次使用；

每个用户和每个产品之间有一个收藏和一个浏览。

详细数据表结构

auction_products（产品表）

产品表主要用来记录每一件单个商品的具体信息，其记录角度是针对于商品单件，而非某一个商品的分类。这样虽然数据字段会多一些，但是保证了每个单体价格的独立性，同时也方便管理员在物流分配时能够针对到单个的个体，适用于个体数量较少且单价较高的商品类型。其中user_id作为常用串联字段，与交易表、单体表进行串联，方便表格间的查询，提供有效的多表格间的数据查询支撑功能。产品表是管理员最常用的数据库表格之一，具体数据库表格字段如表4.2所示。

表4.2auction_products表

字段名

类型

长度

说明

user_id

int

18

商品ID

label

text

4000

标注

prefix

varchar2

500

前缀

name

varchar2

500

名称

description

text

4000

描述

major_pic

blob
主图片（1000x1000）

pic

blob
列表页图片（145x145）

cart_pic

blob
订单图片（80x80）

fitting_pic

blob
试衣间图片（不限）

spec_pic

blob
尺寸说明图片（不限）

measure_table

varchar2

500

尺寸表格

measure_description

varchar2

500

尺寸描述

color_pic

blob
颜色图片（35x35）

color_name

varchar2

500

颜色名称

match_pic

blob
搭配图片（200x370）

match_product_ids

number

38

搭配产品ID列表，用英文逗号分隔

identifier

int

18

编号

keywords

text

4000

关键字，用英文逗号分隔

styles

text

4000

款式，用英文逗号分隔

brand_link

text

4000

品牌链接
auction_items（品类表）

品类表主要用户记录产品品类的数据，主要用于串联单个的商品与品牌表间的关系。品类表中identifier字段主要作为key字段来进行与品牌表间的join表串联查询。品类表的主要作用是陈列出商品的具体信息，包括尺寸、颜色、编号等，方便物流公司及仓储部门在线下环节中的数据分类及内容管理之用，具体数据库表格字段如表4.3所示。

表4.3auction_items表

字段名

类型

长度

说明

user_id

int

18

商品ID

product_id

int

18

产品ID

trade_id

int

18

交易ID

expired_at

varchar2

500

过期时间

measure

int

18

尺寸

identifier

int

18

编号

remark

varchar2

12

备注

active?

text

4000

有效？

published?

tinyint

1

发布？
auction_trades（交易表）

交易表是记录每一件商品交易的表格，通过记录每一笔的交易，串联商品表格和用户表格间的关系，并记录交易的时间等具体信息，另外，如果一笔交易中有多个商品的话，会被算作多条记录，而非一条。同时，交易表也可以有效连接用户表格，管理员可以通过交易表与用户表的串联，查到某一名用户的全部购买记录，方便做CRM营销，具体数据库表格字段如表4.4所示。

表4.4auction_trades表

字段名

类型

长度

说明

original_id

int

18

原始交易ID

user_id

int

18

用户ID

item_id

int

18

单件ID

contact_id

int

18

地址ID

link_id

int

18

链接ID

click_id

int

18

点击ID

status

tinyint

1

状态

price

number

10

价格（成交价格）

comment

text

4000

留言

identifier

int

18

编号

point

int

18

积分表4.4（续）

字段名

类型

长度

说明

percent

float

10

折扣

note_id

int

18

标记ID

circle_id

int

18

投稿ID

bonus

number

1

奖励积分

punishment

number

38

惩罚积分

payment_service

number

38

付款服务

payment_identifier

int

18

付款标识

delivery_service

text

4000

快递服务

delivery_identifier

int

18

快递编号

delivery_time

date

10

快递时间

invoice_type

tinyint

1

发票类型

invoice_title

text

4000

发票抬头

active?

text

4000

发票内容
auction_units（单位表）

单位表，用来记录每一件交易单品的信息，通过trade_id字段串联交易表，该表格用于产品核算，是仓库中每一个存储位商品信息的存储表格，其作用是当交易产生后，需要从单位表中扣除掉已经交易掉的商品，可以很清晰得看到仓储的情况，方便后续做特卖及仓库管理，单位表的意思就是我们还剩下暂时没有卖出去的商品表格,具体数据库表格字段如表4.5所示。

表4.5auction_units表

字段名

类型

长度

说明

trade_id

int

18

交易ID

item_id

int

18

单件ID

circle_id

int

18

圈物ID

discount

varchar2

50

悦购价

price

varchar2

50

最终价格

percent

float

10

折扣

point

varchar2

50

积分

bonus

varchar2

50

奖励积分

contributed?

tinyint

1

投稿？表4.5（续）

字段名

类型

长度

说明

returned?

tinyint

1

退货？

status

tinyint

1

状态

request_at

date

10

请求时间

audit_editor_id

tinyint

1

审核编辑

audit_at

date

10

审核时间

receive_editor_id

tinyint

1

收货编辑

receive_at

date

10

收货时间

transfer_editor_id

tinyint

1

退款编辑

transfer_at

date

10

退款时间

freeze_editor_id

tinyint

1

冻结编辑

freeze_at

date

10

冻结时间

return_phone

int

18

退款电话

return_province

number

500

退款省份

return_city

number

500

退款城市

return_bank

number

500

退款银行

return_branch

varchar2

500

退款支行

return_name

varchar2

500

退款人

return_account

varchar2

500

退款帐号

return_reason

text

4000

退货原因

remark

number

1

退货备注

prepared?

tinyint

1

已备货？

prepare_remark

text

4000

备货备注

auction_contacts（地址表）

地址表存放的是用户的收货地址，该地址的内容由用户在购买商品时同步填写，同“淘宝网”的收货地址内容一致，我们支持国外地址的填写，user_id字段是该表格的常用串联字段，可以串联交易表和单品表，具体数据库表格字段如表4.6所示。

表4.6auction_contacts表

字段名

类型

长度

说明

user_id

int

18

用户ID

name

varchar2

50

名字表4.6（续）

字段名

类型

长度

说明

country

varchar2

500

国家

province

varchar2

500

省份

city

varchar2

500

城市

town

varchar2

12

区县

address

varchar2

12

地址

postcode

number

6

邮编

phone

number

38

电话

mobile

number

11

手机

active?

tinyint

1

是否有效
auction_categories（分类表）

分类表亦是常用的数据表格之一，其的作用是用来记录某个商品品类。同产品表不同的是，分类表的角度是一个整个品牌下的商品的分类，而非某个具体的商品。产品表下的每一件商品都是从属于分类表下的一个品类。品类表个往往用于产品推介的时候，向用户展示某一个商品分类的情况，及在商品品牌页面展示其下属商品的信息。同样，user_id是其常用的串联字段，多与产品表和单位表进行串联，具体数据库表格字段如表4.7所示。

表4.7auction_categories表

字段名

类型

长度

说明

user_id

int

18

编辑ID

parent_id

int

18

父类ID

name

varchar2

500

名称

description

text

4000

描述

measures

text

4000

尺码列表，用英文逗号分隔

ranges

text

4000

价格区间，用英文逗号分隔

male?

tinyint

1

男士？

female?

tinyint

1

女士？

attribute_ids

text

4000

属性

order

number

10

顺序

measure_properties

varchar2

500

尺寸参数

measure_pic

blob
尺寸图片表4.7（续）

字段名

类型

长度

说明

bust_offset

varchar2

500

胸围偏移

bust_error

varchar2

500

胸围误差

waistline_offset

varchar2

500

腰围偏移

waistline_error

varchar2

500

腰围误差

hip_offset

varchar2

500

臀围偏移

hip_error

varchar2

500

臀围误差

shoulder_offset

varchar2

500

肩宽偏移

shoulder_error

varchar2

500

肩宽误差

arm_offset

varchar2

500

臂长偏移

arm_error

varchar2

500

臂长误差

leg_offset

varchar2

500

腿长偏移

leg_error

varchar2

500

腿长误差

active?

tinyint

1

有效？

published?

tinyint

1

发布？

auction_markets（专场表）

专场表记录每一次网站上活动专场的情况，活动专场的类型大致包括：特卖会、品牌推介、品牌搭配等3个类型，会用不同的宣传文案进行宣传，专场表主要与产品表和分类表进行串联，其更多涉及的是内容的对外宣传与产品推介，简单来说，举办一场活动，就会存一条数据到该表格中去。具体数据库表格字段如表4.8所示。

表4.8auction_markets表

字段名

类型

长度

说明

user_id

int

18

编辑ID

name

varchar2

4000

名称

description

text

4000

描述

pic

blob

65K

图片

started_at

date

10

开始时间

ended_at

date

10

介绍时间

recommend

tinyint

1

推荐，可以为{ 'top' => '推荐'， 'normal' => '普通' }之一

large_pic

blob
大图（880x280）表4.8（续）

字段名

类型

长度

说明

list_pic

blob
列表图（270x220）

bg_pic

blob
背景图

bg_color

number

10

背景颜色

link

varchar2

500

链接

swf

blob
swf文件

fla

blob
fla文件

published?

tinyint

1

是否发布

active?

tinyint

1

是否有效

auction_vouchers（代金券表）

顾名思义，代金券表是记录用户代金券的表格，根据不同的活动会发给用户不同的代金券，该表格是以每一张代金券的维度进行存储，包括该代金券发给了哪名用户，通过什么活动发布，什么时候发的，使用时间是哪天等具体信息，代金券表是专场表最好的伙伴，因为活动专场经常伴随着代金券的发放，identifier是该表格的串联字段，经常与单位表和专场表来进行串联，方便管理员进行数据的查询，具体数据库表格字段如表4.9所示。

表4.9auction_vouchers表

字段名

类型

长度

说明

event_id

int

18

活动ID

editor_id

int

18

编辑ID

user_id

int

18

用户ID

trade_id

int

18

交易ID

identifier

int

18

编号

obtained_at

date
获得时间

used_at

date
使用时间

remark

text

4000

备注

active?

tinyint

1

有效？

auction_brands（品牌表）

品牌表是从某一个商品的品牌角度记录内容的表格，该表格记录着所有在网站内的品牌的信息，并不涉及其品牌下具体的商品，主要的用途是在页面上展示品牌的具体信息，往往品牌的信息是和具体的商品的展示同步进行的，所以该表格也是常用的表格之一，name是该数据表格的常用关联字段，多与专场表、代金券表和单品表串联，具体数据库表格字段如表4.10所示。

表4.10auction_brands表

字段名

类型

长度

说明

editor_id

int

18

编辑ID

name

varchar2

4000

英文名

chinese

varchar2

500

中文名

abbreviation

varchar2

500

缩写

initial

varchar2

500

首字母

genre

int

18

类型

pic

blob
图片（130x90）

swf

blob
swf文件

website

varchar2

500

网址

link

varchar2

500

圣经链接

shop_link

varchar2

500

旗舰店链接

title

varchar2

500

标题

description

varchar2

500

描述

pronunciation

varchar2

500

发音

country_id

int

18

国家ID

founded_on

date
创立日期

year

date
年份

keywords

text

4000

关键字，用英文逗号分隔

special_product_ids

varchar2

500

特殊产品ID列表，用英文逗号分隔

order

varchar2

500

排序

recommend

varchar2

500

推荐

introduced?

tinyint

1

介绍？

published?

tinyint

1

发布？

active?

tinyint

1

有效？

auction_customers（用户表）

用户表是记录用户信息的表格，在该表格中记录了用户的手机，电话，姓名，头衔和城市的信息，在用户登录以后或下单购买以后，会显示该表格中的内容到网站上。同时，代金券表和交易表是与之关联最多的表格，关联的字段是user_id，具体数据库表格字段如表4.11所示。

表4.11auction_customers表

字段名

类型

长度

说明

editor_id

int

18

编辑ID

user_id

int

18

用户ID

mobile

int

11

手机

phone

int

18

电话

name

varchar2

500

姓名

title

tinyint

1

头衔，可以为%w[先生女士]之一

city_id

int

18

城市ID

remark

text

4000

备注

active?

tinyint

1

有效？

4.4.3　连接池技术

连接池技术是指，在数据库的开始初始状态时，创立一些数据库的连接到这个连接池中去，数据库的数量被最小数据库的连接数决定。不管能否被应用，连接池都会保持一定量的连接的数量不变，连接池中最多的连接数决定整个连接池的能够占有的最多的连接数，这样的需求会被纳入排队的数列中，每当应用程序向其发送连接池请求超过最多的连接数时。

一个子线的进程会从连接池里申请一个连接，当其涉及到JDBC的操作于数据库的时候，用完以后会被放回到连接池里，这样以后其他应用就能继续使用其作为连接了。

这种技术，会优化系统大规模访问情况和大规模并发情况下的服务器安文星，这是其具有的最大的有点。

资源分布的新的方式。当从应用层访问数据库连接的时候，配置会对于同一个数据库来说，来完成这种数据库连接池的方案。为了避免某个应用独自霸占数据库的资源，单一应用的最大连接数会被控制。

更快的系统响应速度。数据库连接池在初始化过程中，往往已经创建了若干数据库连接置于池中备用。此时连接的初始化工作均已完成。对于业务请求处理而言，直接利用现有可用连接，避免了数据库连接初始化和释放过程的时间开销，从而缩减了系统整体的响应时间。

加快系统反应速率。数据库连接池经常是已经创立了很多的备用数据库连接，在其整个开始的时候。这个情况下，初始化的规则已经完成，对于那些业务上的处理请求来讲，为了不花费在连接施放过程中和初始化时的时间成本，会直接用现成的连接，这样也会减少系统整个的反应时间。

资源的再利用。因为再利用了数据库的连接，不会出现哪些施放连接和创建频繁时造成的大规模的系统消耗。

4.3.4　E-R图

由于数据库中存在多个数据表，而且关系也非常复杂，所以本节把他们分为三个部分来进行展示和描述，包括：产品表之间的关系，交易表之间的关系，活动表之间的关系。希望借此方法能将数据库的实体联系关系解释清楚，另外由于前边已经详细介绍了每个数据表格的内容字段，而且内容字段较多，会造成E-R图过于复杂，本图中将不再复述各个表格所拥有的数据库字段内容。

产品表间的关系，说明：（如图4.5所示）

每个商品的单位个体属于一个产品种类（单位表属于产品表），如：某一条牛仔裤，属于牛仔裤这个产品分类。

每个产品种类属于一个商品品类（产品表属于品类表），如：牛仔裤这个产品分类属于裤子这个品类。

每个产品与品牌属于多对多的关系，如：耐克旗下有很多种牛仔裤，但牛仔裤这个产品分类属于耐克的同时，也属于阿迪达斯和李宁等多个品牌。

品类与品牌属于多对多的关系，如：耐克旗下有很多种裤子，但裤子这个品类在很多其他的品牌旗下也有卖。
图4.5产品表之间的E-R图

交易表间的关系，说明：（如图4.6所示）

每个交易中有N个单位（单位表归属于交易表），如：用户一次购买了10件商品。

交易中只能使用一次代金券，交易与代金券是一对一的关系。

每次交易只能是一个用户，交易与用户是一对一的关系。

每个用户可以填写很多个地址，用户与地址是1对多的关系。
图4.6交易表之间的E-R图

活动表间的关系，说明：（如图4.7所示）

专场与产品是多对多的关系，专场会展示多种产品，产品也会出现在多个不同的专场里。

专场与品牌是多对多的关系，专场会展示多种品牌，品牌也会出现在多个不同的专场里。

代金券属于专场，每个专场会发布多张代金券。
图4.7活动表之间的E-R图
第五章　系统详细设计

整个电子购物系统分为用户注册系统、用户登录系统、商品搜索&筛选系统、购物车系统等子系统。

第一节　用户注册系统详细设计

本模块运行流程为：注册功能进行时，需要由用户输入账号、密码、验证码，系统会调用Account数据库（该数据库属于与PC平台系统共用数据库，并不在本系统开发之后）中的信息，对用户昵称进行校验，同时对用户填写的验证码进行校验，当两项同时正确时，即可注册成功。注册成功后，系统会对玩家账号进行校验，当用户账号第一次登录时，需要用户进行激活操作。激活表单需要用户填写昵称与性别两项，两项同为必填项。用户填写完毕提交后，系统会将用户填写的昵称进行查重验证，同时对比屏蔽字表，当该昵称不重复且不为屏蔽时，即为激活成功[7]。模块流程图如图5.1所示。
图5.1注册功能流程图

页面组件模块：

注册流程的页面中一共有8个模块，分别为手机号、手机验证码、密码、昵称输入框和发送验证码、注册按钮，及是否同意注册的勾选框和按钮计数器，如表5.1中所示。

表5.1注册模块清单

部件名

“手机号”输入框

“发送验证码”按钮

“手机验证码”输入框

“昵称”输入框

“密码”输入框

“同意《用户使用协议》”选择框

“注册”按钮

“发送验证码”按钮计数器

输入输出：

系统中对每个输入框定义了针对不同用户不同行为的交互方式，即输入输出的规则，包括：默认的提示，输入信息时的提示，获得焦点时的提示，失去焦点时的提示，总共4个状态。

其中手机号输入框，规定手机的格式为11位的数字字符，且前两位数字必须是13/14/15/18中的一种，同时该账号之前并未注册网站，才可以注册成功。当不符合其中某一项条件时，会根据用户填写的内容，有不同的提示信息和交互状态展现。具体的交互方式和规则，如表5.2中所示。

表5.2手机号输入框字段表

状态

用户输入内容

系统输出内容

默认状态获得焦点
11位数字，13/14/15/18开头。

失去焦点

11位数字字符，前2位数字13/14/15/18，且账号未被注册包含非数字字符

这不是手机号，检查一下吧。
数字字符长度小于11

11位数字，13/14/15/18开头。
数字字符长度大于11

（限制继续输入）
前2位数字不为13/14/15/18

11位数字，13/14/15/18开头。此处空空如也，填点信息吧。
账号已被注册

这个手机号有人用了，尝试直接登录。

手机验证码的输入框中，相对于手机号输入框来说，内容要简单一些，主要验证是否为6位数字，与系统发送的内容是否相符，是否超过30分钟的最长时限三个条件，根据用户填写的内容不同，有不同的提示信息和交互状态，具体的交互方式和规则，如表5.3中所示。

表5.3手机验证码输入框字段表

状态

用户输入内容

系统输出内容

默认状态获得焦点
请输入手机验证码。

失去焦点

6位数字

（无提示）

非6位数字

验证码不正确，重填一个吧。
（无内容）

此处空空如也，填点信息吧。

点击提交至后台的按钮

超过30分钟

超时了，再来一条吧。
与系统发送的不符

验证码不正确，重填一个吧。
昵称输入框，系统定义的规则包括：3-12位字符，中英文均可（中文占用两个字符），字符不能包括英文和数字之外的符号，该昵称未被注册，该昵称不属于系统定义的屏蔽字，根据用户填写的内容不同，有不同的提示信息和交互状态，具体的交互方式和规则，如表5.4中所示。

表5.4 昵称输入框字段表

状态

用户输入内容

系统输出内容

默认状态获得焦点
3-12位，汉字，字母，数字。

失去焦点

3-12位字符，包括汉字，英文，数字，且”昵称”未被注册（大小写不敏感）

（对勾）
字符长度小于3位

3-12位，汉字，字母，数字。
字符长度大于12位

3-12位，汉字，字母，数字。表5.4（续）

状态

用户输入内容

系统输出内容
字符包含汉字，英文，数字以外的内容

3-12位，汉字，字母，数字。此处空空如也，填点信息吧。
（已被注册的昵称）

这个昵称有人用了，换个独一无二的吧。
密码输入框中，规定用户设置的密码，必须符合6-16位字符，字符要求属于33-126位之间的ASCII码，并且安全角度考虑不能为全部数字，总共3个限制条件，根据用户填写的内容不同，有不同的提示信息和交互状态，具体的交互方式和规则，如表5.5中所示。
表5.5 密码输入框字段表
用户输入内容

系统输出内容

默认状态获得焦点
6-16位，区分大小写，不能全数字。

失去焦点

6-16位字符，33-126之间的ASCII码，不能为全数字。

（对勾）
小于6位

6-16位，区分大小写，不能全数字。
大于16位

6-16位，区分大小写，不能全数字。
全部数字组成

6-16位，区分大小写，不能全数字。
不允许的字符

输入的信息格式有误，重填一个吧。此处空空如也，填点信息吧。

UML时序图

注册有以下的5个过程：

用户打开购物系统主页面；用户打开注册页面；用户输入注册信息，并保存；系统保存并验证用户注册信息；系统提示用户注册结果。注册过程的UML时序图如图5.2所示。
图5.2注册功能时序图

第二节　用户登录系统详细设计

功能流程：

网站的自动登录一直都是有利于提高用户体验的功能，如果设计不好，也非常容易泄漏用户的账户信息。

比较常见的功能实现方案是将用户的登录信息保存在浏览器的Cookie中。看到一些设计有缺陷的网站会将用户的用户名和密码信息保存在Cookie中，这种做法是相当危险的。虽然这样的设计比较简单，功能比较容易实现，但是却大大提高了泄露用户账户信息的几率，即使保存的用户密码等信息都是经过加密的，但也是不可取的，毕竟现在弱一点的密码加密后也是可以解密的。

当然自动登录的功能设计必须要在浏览器的Cookie中保留账户的登录凭证（token），这个登录凭证是被当作用户登录的登录钥匙。用户在登录时，凭借浏览器发送的token与服务器端保存的token做比较，若2个token一致，则通过验证，若不一致，则验证失败。模块流程图如图5.3所示。图5.3登录功能流程图

页面组件模块：

登录流程的页面中一共有6个模块，分别为邮箱/ 手机号、密码、验证码输入框，30天免登录的选择框，登录按钮及其计数器，如表5.6中所示。

表5.6 登录模块部件清单

描述

“邮箱/手机号”输入框

“密码”输入框

“30天免登陆”选择框

“验证码”组件

“登录”按钮计数器

“登录”按钮

输入输出：

系统中对每个输入框定义了针对不同用户不同行为的交互方式，即输入输出的规则，包括：默认的提示，输入信息时的提示，获得焦点时的提示，失去焦点时的提示，总共4个状态。

邮箱/手机的输入框中，允许输入两种类型的数据，即邮箱和手机，系统自动判断填写信息的类型，满足填写内容为11位数字字符且前两位数字为13/14/15/18，或满足邮箱正则表达式的填写内容，是可以通过前端的判断的。根据用户填写的内容不同，有不同的提示信息和交互状态，具体的交互方式和规则，如表5.7中所示。

表5.7 邮箱/手机号输入框字段表

状态

用户输入内容

系统输出内容

默认状态获得焦点
请输入常用邮箱或手机号

失去焦点

null

此处空空如也，填点信息吧。
条件1和条件2任一都不满足（或）：
条件1：11位数字字符，且前2位数字为13/14/15/18
条件2：邮箱正则表达式格式

输入的信息格式有误，重填一个吧。
符合条件1或条件2

（无提示）

密码的输入框中，填写必须符合6-16位字符，字符要求属于33-126位之间的ASCII码，并且安全角度考虑不能为全部数字，总共3个限制条件，判断根据用户填写的内容不同，有不同的提示信息和交互状态，具体的交互方式和规则，如表5.8中所示。

表5.8密码输入框字段表

状态

用户输入内容

系统输出内容

默认状态获得焦点
6-16位，区分大小写，不能全数字。

失去焦点

小于6位

6-16位，区分大小写，不能全数字。
大于16位

6-16位，区分大小写，不能全数字。
全部是数字组成

6-16位，区分大小写，不能全数字。表5.8（续）

状态

用户输入内容

系统输出内容
不允许的字符

输入的信息格式有误，重填一个吧。此处空空如也，填点信息吧。
符合规则：6-16位字符，33-126之间的ASCII码，不能为全数字。

（无提示）

UML时序图

登录功能有以下4个过程：

用户打开主页面；用户输入登录信息，并登录；系统进行数据验证；系统提示登录结果，显示用户自维护借口，登录过程的UML时序图如图5.4所示。
图5.4登录功能时序表

第三节　商品搜索功能

功能流程：

搜索也叫做搜索引擎。他是重新整合搜集排列互联网上的已有资源和信息，之后提供给你去查询所用的系统，其分为客户查询、信息收集和归纳整理三个大的部分。

商品搜索功能包括：关键字搜索、品牌搜索、高级搜索三个不同的方式的搜索功能。关键字搜索是指网站实现设定好用户搜索频率非常高的关键词，并把这些词自动展示成快捷的搜索链接，用户可以直接利用这些词来搜索其想要的商品；品牌搜索是指用户直接输入其产品品牌的全部或部分文字，找到其相关的包含该文字的商品品牌，直接进入到该品牌的商品列表页或显示该品牌下所有的商品；高级搜索是指非常详尽的表单搜索功能，包括对商品类型、交易方式、所在地、新旧程度、发布时间等多个字段进行联合性的搜索；最后，搜索结构的表单也会显示每种搜索条件下的结果数量。搜索功能的流程图如图5.5中所示。
图5.5搜索功能流程图

搜索关键字

系统定义了搜索功能的搜索关键字，包括默认关键字部分，空搜索和字数限制。其中，默认关键字即系统事先存储的商家品牌、商品名称和城市等词汇，搜索只支持最多30个字符（即15个汉字）的最长字段搜索，具体功能定义见表5.9。

表5.9搜索功能定义表

项目

描述

备注

定义

关键字指当前搜索输入框里的内容，可以由用户自主输入，或者从TAG系统点击进入

仅指搜索框内的文字
关键字将出现在SEPR的URL中，进行传参操作
默认关键字

统一为系统指定的文字

全站默认关键字

重点城市分站默认关键字

可以为商家名称、品牌、或商品，默认关键字可作为营销产品销售，暂时只对重点运营城市分站的默认关键字进行区分。

空搜索

关键字当中可以包含空格，允许进行没有任何关键字的搜索。
字数限制

对输入不进行限制，但只截取关键字的前30个字符（汉字15个）进行检索
搜索联想

搜索联想也是搜索功能中非常重要的一部分，影响着整个搜索过程的用户体验和数据合理性。其功能包括：动作捕捉，自动补全，汉语拼音联想三个部分，具体的搜索联想功能定义如表5.10中所示。

表5.10搜索联想定义表

项目

描述

备注

定义

当用户在搜索框内输入时，提醒用户可能的叙词结果
联想来源

词典内的叙词

暂不支持搜索具体的商品名称、型号、商家名称，而全部以词典为主

动作捕捉

用户获得焦点输入第一个字符开始联想，键入内容发生改变则联想随之改变

表5.10（续）

汉语拼音联想

用户输入内容被系统转化为汉语拼音，基于发音进行联想，例如用户输入“过期”则通过Guoqi联想到“国企”和“过期”

按文字顺序模式匹配，不考虑包含状态。即当用户输入“婚纱”时候，联想“婚纱摄影”而不会联想到“进口婚纱”也不会联想到“超值婚纱摄影”

自动补全

按汉语拼音顺序，自动联想可能的补全叙词

例如输入“Ji”则从叙词表提取可能的Jia以及按字母顺序的其他词典内叙词

联想数量

联想数量为0~10条记录
单项联想结果数

每一项联想将产生的搜索结果数
无联想

生僻输入无联想功能

输入已超出词典范围

字间空格时，无联想

因网速太慢引起的联想加载错误

操作

点击联想可以进入联想关键字结果

直接回车，以当前输入的关键字为搜索条件
敏感过滤

参考全站敏感词过滤规则，结果同空搜索

UML时序图

搜索功能有以下4个流程：

用户打开主页面；用户选择商品类型，输入查询条件；系统进行查询；系统显示查询结果。搜索功能的UML时序图如图5.6所示。
图5.6搜索功能时序图

第四节　购物车系统详细设计

功能流程：

系统为所有的客户都设定了一个假定的银行账号，并且支持他们事先存储一些钱用来进行交易。对于这些买家来讲，能使用之前提到的搜索功能来进行商品和商家的搜索，也能在列表页通过筛选条件查找自己想要的商品，另外买家可以在网站内部通过聊天的方式联系到卖家，让交易在线下进行。我们为卖家和买家都设定了信用评判体系，这样能够帮助其他用户做消费的参考，从各个角度保证交易的安全性。购物车的流程图如图5.7所示。
图5.7购物车功能流程图

购物车主页面显示分为3部分：可用代金券提示、金额和结算按钮；购物车所有商品显示。当前用户有可供使用的代金券时，在购物车上端显示可用代金券提示。若是用户没有可用的代金券，则不显示此部分提示内容，购物车中所有的商品按照时间从新到旧的顺序（<更新时间updated_at>.）；即时间越靠后，显示的越靠前；编辑购物车商品的功能；若是当前购物车不为空，导航栏右上角显示“编辑”按钮，点击了编辑按钮，进入商品删除模式。

UML时序图：

购物车流程具有以下4步过程：

用户打开商品浏览页面；用户添加商品到购物车；系统弹出购物车页面；系统显示已选购的商品。购物车系统的UML时序图如图5.9所示。图5.8购物车时序图

第五节　订单结算系统详细设计

功能流程：

用户选择好一件或几件的商品以后，点网站上的“购买”按钮，会把商品直接加入到购物车中，并打开购物车的页面。这个时候，用户可以选择继续购物，最后一块来结算。

在购物车里边，每个商品都默认是一件，用户也可以修改所购买的商品数量，只要记得点击“保存”按钮就好。

如果用户想删除某件购物车中的商品，商品会被置在靠下的位置上；万一他又想把商品找回来，只要点击“恢复”按钮，就能又把那件丢弃的商品放回购物车中了。

用户需要填写其所在地区、邮编、联系电话、收货人姓名和详细地址来完成收货信息的填写。

订单确定环节：当以上提到的步骤全部完成以后，点击“提交订单”按钮，就会生成一个未处理的订单，用户可以最后检查。

支付方式的选择中，我们提供：支付宝支付、银联支付、货到付款、邮局汇款等多个方式。发货与收货环节，我们交与第三方快递公司申通来负责，我们调取申通的API接口，在网站上显示给用户。

结算功能的流程图如图5.9所示。
图5.9订单结算功能流程图

UML时序图：

订单结算具有以下7步过程：

用户打开购物车界面；用户修改商品数量；用户删除选购商品；用户确认结算；用户登录；用户完成登录；系统进行商品结算；系统显示结算结果。订单结算功能的UML时序图如图5.10所示。
图5.10订单结算流程时序图

第六节　售后评价系统详细设计

商品评价是指生产厂家、商家或者消费者根据具体商品的性能、规格、材质、使用寿命、外观等商品的内在价值设定一个可量化或定性的评价体系，由消费者对商品使用价值进行评价的过程。

目前国际上的著名商城如亚马逊、梅西等都已经广泛的使用商品评价系统。国内的淘宝商城也提供了消费者对所购商品的评论系统，但是该系统更偏向于消费者的评论或者购物感受，因此并不能真实反映每一个商品对消费者的客观价值，对消费者的参考意义受到了比较大的局限。很多消费者也希望能够在评论里尽可能多的将商品的价值用文字表述出来，但是一方面受时间所限，另外也受知识面、个人偏好、理解能力等限制，不可能将自己在使用后将完整的商品价值都描述出来。因此只有专业的商品评价系统才能帮助消费者实现对商品价值进行客观评价的美好愿望。

功能流程：

1）当用户购买完某件商品之后，他可以为所购买的商品进行评价。

2）评价开始先选择评价方式，可选内容有：网站体验，商品相关。

3）用户填写评价内容，最多500个字。

4）填写完成之后，点击提交，等待管理员审核。

5）管理员审核完成之后，该内容会显示在网站上相关产品的页面中。

售后评价功能的流程图，如图5.11所示。
图5.11售后评价流程图
第六章　系统原型实现

第一节　系统开发及运行环境

本系统采用下一代WEB开发标准HTML5进行开发，配合最新的CSS3技术，辅以 JAVASCRIPT开发语言，使用开源社区中成熟的开发框架jQUERY作基础类库，直接运行于用户的浏览器而无需安装任何插件或APP。通过HTTP协议使用JSON与XML两种数据格式与服务器进行数据交互，服务器仅负责数据存储与传递，大大降低服务器的负载，页面渲染全部由浏览器完成，使用户请求能够在第一时间被响应。

其中，由Html控制页面结构与布局，Css控制样式，Javascript控制与用户交互，依靠jQuery作为主要基础类库，并加载由Google开发的Fast Button技术，实现对用户操作的快速响应，并兼容PC平台浏览器。

移动版的框架是在充分吸取jQuery Mobile及Backbone.js两大典型框架的技术优点之后，重构完成，已经形成独立框架。新框架以MVC架构为基础，支持对象事件驱动，并将DOM与Controller进行绑定，将应用模块化，实现页面切换[30]。

移动版的与后台的数据交互通过标准HTTP协议进行，主要数据格式为XML，辅以浏览器原生支持的JSON格式，并充分利用Html5的本地存储API，实现在最短时间向用户展示网站内容。

开发环境：JD6，Eclipse3.4.1，google Android SDK，Mac操作系统，xcode。

硬件环境：双英特尔® 至强™ 处理器E5-2403，4GB内存，300GB硬盘。

第二节　系统运营主页面

因本系统同常规系统有所区别，是商业化的重视交互体验的系统，所以没有一个能直接反映系统全部运营内容的页面，因此本节将介绍三个页面，分别为：电子购物系统应用首页、侧导航页面、商品列表页。

6.2.1　电子购物系统首页

如图6.1所示，本电子商务购物系统的首页分为几大部分：

1）左上角打开侧导航栏的icon按钮，点击将打开左侧导航栏。

2）右上角购物车icon按钮，点击将打开购物车页面。

3）首页大的Banner区，此处显示4张轮换的大图，大图可以自动轮换，也可以手动进行滑动切换。当前是第一张图或者是最后一张图的时候，不可以继续进行切换（不支持循环切换）自动切换的时间间隔：间隔定为3秒；点击大图，则进入大图所对应的链接页面；图片页码的显示：在图片右下角显示大图的总数和当前的页码；页面小圆点默认的颜色为灰色，当前的颜色为黑色。

5）搜索icon按钮，点击进入商品搜索的流程。

4）其他区域，均为进到不同条件的商品列表页的入口，包括：最新、品牌、女士、男士、家居，这些入口会根据不同情况经常进行更换[11]。
图6.1电子购物系统首页

6.2.2　侧导航页面

如图6.2所示，侧导航主要展示的是各功能的入口：

1）导航页面最上端显示搜索框，默认显示文字“搜索”，点击进入商品搜索流程。

2）导航项包括4个部分：首页，分类，我的优众，更多。

“首页”，点击进入首页；

“分类”，最新，女士，男士，家居，品牌；点击最新，进入“最新”商品列表；点击女士/男士/家居，则进入分类页面；

“我的优众”(登录前后显示的内容不同)，登录后：姓名，基因值，注销按钮；未登录时，这一行显示：登录/注册；

“更多”显示一些不用登录的功能，包括：关于我们、使用帮助、系统评分等[20]。
图6.2 侧导航样式

6.2.3　商品列表页面

如图6.3所示，商品列表页是本系统主要的展示界面该页面包含以下的内容：

1）商品搜索入口，点击进入商品搜索的流程；

2）排序功能按钮，点击可选择对商品进行排序，包括字段默认排序、价格上升、价格下降、人气、限量、折扣、上架时间7个字段，用户仅可选择唯一字段对商品进行排序。

3）筛选功能按钮，点击可对商品进行不同条件的筛选，根据不同的产品和层级，筛选的字段会有所不同，包括分类、品牌、价格、尺码、颜色、材质、流行元素、版型、衣长等多个分类，用户可对每个字段进行单选并选择多字段来进行筛选。

4）某个具体的单品图片，点击进入具体的商品页面[18]。
图6.3商品列表页样式

触发导航栏打开的条件：1）点击触发：点击页面上端左侧的“菜单”按钮，打开或者关闭侧边栏；）滑动页面触发(特殊页面除外)：在除了单品页的其他页面，在页面向右侧滑动可打开侧导航栏，此处的效果为；导航栏位于底层(宽度为260px)，页面位于导航栏的上层，默认情况页面覆盖在导航栏那层的上方；向右滑动页面，便可以看到之前被遮盖住的导航栏部分；触发打开侧边栏的有效滑动范围为100px：向右滑动100px当前页面后，当前页面自动向右移动到屏幕最右侧.侧边栏完全显示;当向右滑动小于100px，则松开手指之后，页面自动恢复到默认的位置，不打开侧导航栏；侧边栏打开的情况下，主页面在屏幕右侧显示，只露出原页面左边60px的部分；在侧边栏打开的情况下，在右侧页面上向左滑动，页面向左移动覆盖侧导航栏，即关闭侧导航栏。

不支持滑动触发侧边栏的页面：在单品页面，完全屏蔽左右滑动打开侧边栏的操作；首页：在轮换图区域左右滑动，不会打开侧边栏.除了轮换部分的其他区域，滑动可打开侧边栏.在首页打开侧边栏的情况下，在右侧首页的轮换区左右滑动，也不触发侧边栏的关闭操作.(左右滑动也不会切换大图，完全屏蔽滑动相应操作)；分类页面：上端显示的是推荐商品，在此区域左右滑动，不会打开侧边栏.除了推荐区的其他区域，滑动可打开侧边栏.打开侧边栏的情况下，在推荐区域左右滑动，也不触发侧边栏的关闭操作(左右滑动也不会切换推荐商品)。

第三节　用户注册子系统实现

功能描述：

如图6.4所示，注册页面一般情况有5项，包括：邮箱；姓名；密码；输入密码；推广码（选填项）；默认在每项右侧显示提示文字，待点击输入区域获得焦点时，提示文字自动消失，显示输入光标，且自动打开输入键盘；邮箱：该邮箱将为您的优众账号；姓名：最多为20位字符；密码：6-20位字母，数字或符号；确认密码：请重复您的密码；推广码：选填；当用户注册了3此注册，试图进行第四次注册的时候，加入验证码填写项；居右显示验证码图片，提示文字为：请输入右侧4位数字；此处填写为4位数字后，显示对勾[21]。
图6.4注册页面样式

4项必填项的输入格式：邮箱：1)包含@和。(出错提示：您的邮箱地址不正确)2)邮箱为以前没有注册过的(出错提示：该邮箱已注册优众网) ；姓名：最多可以输入20个字符，包括汉字，英文，符号，数字，空格，但是不能以空格开头(如果姓名为空，则提示：姓名不能以空格开头。若是用户以空格开头，自动帮用户去掉空格) ；密码：输入密码长度限制在6~20位之间，可以使用字母、数字、符号等字符。(若是长度小于6为，则提示：密码长度小于6位) ；重复密码：输入字符必须与上一输入框输入的密码相同(若是两次输入不一致，提示：两次密码不一致)

代码实现过程：

1、全部项必须填写完成才能点击确定，以下代码验证所有信息填写完成：

account = MI.user.register(email, password, password_confirmation, name,captcha);

if(account && account.account && account.account.id){

$.mobile.changePage('#app=phone&subapp=productGrid&channel=home');

2、注册邮箱必须是未注册过的，否则会提示注册失败，以下代码验证邮箱是否注册过。

$page.find('span.captcha').append(' 由Html控制页面结构与布局，Css控制样式，Javascript来控制Android

由Html控制页面结构与布局，Css控制样式，Javascript来控制Android

')

3、其他约束条件（代码略），姓名：最多为20位字符；密码：6-20位字母，数字或符号。当用户点击了3次注册，试图进行第四次注册的时候，加入验证码填写项；居右显示验证码图片，提示文字为：请输入右侧4位数字；此处填写为4位数字后，显示对勾，

4、点击注册按钮的时候，会加入数据监听，如下代码[24]：

register: function($div){

var captcha = MI.user.get_captcha();

var $page = $div;

$page.find('span.captcha').append(' 由Html控制页面结构与布局，Css控制样式，Javascript来控制Android

');

$page.find("input.reg-btn").unbind('tap').bind("tap", function(){

//监听

MI.listen.add_action('注册'， '注册按钮');

5、如果不符合条件，会提示注册失败，如以下代码段：

}else{

alert('对不起，注册失败');}

return false;

第四节　用户登录子系统实现

功能描述：

如图6.5中所示，登录页面上端面板显示登录需要填写的项，下端面板显示进入注册页面的入口。菜单栏上方的“登录”按钮在开始的时候默认为不可用的状态。

默认账号和密码填写处有输入提示文字，待点击输入框获得焦点时，提示文字自动消失，显示输入光标，且自动打开英文键盘。；账号输入框提示文字：注册的邮箱或手机号码；密码输入框提示文字：账号对应的密码；账号和密码的输入格式；账号：若输入的是手机，则必须为11位数字(1开头);若输入的是邮箱，则必须有@和；密码：长度为6-20个字符；当两项全部有输入内容不为空的时候，右上角"登录"按钮变为可用状态[22]。
图6.5登录页面样式

输入过程中不进行格式的判断。输入完成后，点击"登录"按钮，先进行格式判断，再进行内容判断：账号和密码是否一致；格式错误时，以弹窗形式显示错误原因；账号格式错误：账号格式有错误；密码：密码长度应该为6-20位；账号和密码填写内容有误：错误的账号或密码，请重新输入。

点击"登录"按钮登录按钮变化为：登录文字从按钮下方移出，转圈效果从按钮上方移入。待提交给后台账户数据，且后台返回来正确的结果，则登录完成，页面自动跳转到登录前的页面。

代码实现过程：

1、登录需要验证账号是否注册和账号密码是否相符，只有注册了且账号密码相符的输入项才能登入系统，以下代码控制该段输入：

Self.login($("#user-login-name").val()，$("#user-login-pword").val()， function(result){

if(result.account){self.userid = result.account.id;

self.init_user_info();

vartarget = self.lastPage.length > 1 &&

self.lastPage[0] !='#app=phone&subapp=productGrid&popup=login' ? self

lastPage[0] : '#app=phone&subapp=productGrid&popup=buy';

$.mobile.changePage(target);

2、点击登录按钮的时候，会加入数据监听，如下代码[28]：

login: function(){

var self = MI.user;

$('#login-btn').bind("tap"， function(){

MI.listen.add_action('登陆'， '登陆按钮');

//MI.user.login($("#user-login-name").val()， $("#user-login-pword").val());

3、监听代码的目的有2个，数据统计和提示短期内点击过多的用户无法登入，当同一机器的用户一段时间内点击次数过多的话，会提示“短期内登录次数过多，暂时无法登录”，登录按钮置灰5分钟；

4、如果登录密码错误的话，会提示“账号密码错误，无法登录”，如下代码：

}else{

$('#login .login-msg').html('用户名或密码不正确，请重新输入')。fadeIn(200);}});

return false;

第五节　商品搜索子系统实现

搜索可以所搜品牌和商品名称两种关键词，以下代码实现，所示搜索的页面样式如图6.6所示：

$.mobile.changePage('#app=phone&subapp=productGrid&keyword=' + encodeURI($.trim(keyword)));
图6.6商品搜索页样式

2、若是当前没有找到和输入关键字相匹配的品牌和商品，则在搜索框下方显示无结果提示"很抱歉!没有找到符合您要求的商品。" （代码略）

3、当没有搜索结果时，提示下方显示网站畅销商品，商品数量为10个，读取畅销数据里面未售完商品的前10个的数据。（若是接口里读到的未售完的商品不足10个，则读到几个数据就显示几个）。以下代码实现[13]：

// search input

searchbeforecreate: function($page){this.search_bind($page.children("[data-role=content]"));}，

search_bind: function($dom， keyword){

$dom.prepend(MI.tmpl.getTmpl('search'， {keyword: keyword})).bind('submit'，function(){

var keyword = $(this).find('input').val();

第六节　购物车子系统实现

功能描述：

购买流程是用户从结算，到付费完成的过程，主要步骤包括：放入购物车-购物车结算-确认订单-地址管理。

主要页面：1）购物车页面；2）编辑订单页面；3）确认订单页面；4）地址管理页面。具体页面样式如图6.7所示。
图6.7购物车页面样式

1）购物车页面，页面元素主要包括：

金额总计，商品数量，结算按钮，购买商品信息，代金券提醒，编辑按钮。点击结算按钮后确认用户状态，未登陆则需用户登陆，已登录用户则进入确认订单页面；点击编辑按钮进入删除商品页面，可对已购买的商品进行删除；当前用户有可供使用的代金券时，在购物车上端显示可用代金券提示。若是用户没有可用的代金券，则不显示此部分提示内容。

代码实现过程：

点击导航栏右端的购物车按钮或者是把商品加入购物车后可以进入购物车页面，实现代码[23]：

$ul.html('').append($("#cart-list-tmpl").tmpl(data.products)).children('li').removeData('tmplItem').find('a').not('.cart-delete').each(function(){

MI.view.custom_tap($(this));

当前用户有可供使用的代金券时，在购物车上端显示可用代金券提示。若是用户没有可用的代金券，则不显示此部分提示内容，实现代码[14]：

if(MI.user.contacts.length){

mobile.changePage('#app=phone&subapp=productGrid&channel=contacts');

return false;

用户点击“马上结算”进入购买流程系统，并且需要判断登录之后才能结算，实现代码：

// pay btn

$("#pay-btn").unbind().bind('tap'， function(){

//监听

MI.listen.add_action('购物车'， '结算按钮');

// check login

if(!MI.user.userid){

$.mobile.changePage('#app=phone&subapp=productGrid&popup=login');

$('#login .login-msg').html('你需要登录后才能结算').show();

return false;

}

购物车可以显示用户收藏了几件商品和总价，实现代码：

if (data.products.length) {

$page.find('.second-bar .list-count').html(data.products.length + '件商品');

$('#cart-goods-money').html("￥" + data.money);

var $ul = $page.find('ul.ui-listview');

用户可以自由删除其收藏的商品，点击删除按钮进入删除页面，实现代码：

if(MI.user.contacts.length){

$.mobile.changePage('#app=phone&subapp=productGrid&channel=contacts');

return false;

}else$.mobile.changePage('#app=phone&subapp=productGrid&channel=addContact');

return false;

第七节　订单结算子系统实现

订单详情页面显示两个面板：订单信息面板和商品信息面板(待收货和已完成还有物流面板)。

不同的订单详情页面右上角的显示情况不同；待发货和已完成右上角为空；待收货右上角显示"已收货"，点击后页面出现系统自带的弹窗提示，提示内容为"感谢您在优众购物，特返还您基因值***"，弹窗下方显示"确认"按钮，点击确认弹窗关闭，此订单详情显示为已完成订单的样式。如图6.8中所示。
图6.8订单结算页面样式

在点击完“提交订单”之后，会进入订单的支付环节（如图6.9所示），用户可以选择货到付款，招行支付，支付宝支付，其他银联支付在内的四种支付方式，用户选择“货到付款”的话，系统会记录用户状态，为其进行货到付款的后续处理工作，如果选择其他三种方式的话，进入其相应的第三方平台进行订单支付工作，本文中不再详细说明。
图6.9订单支付页面样式

订单信息面板的显示项根据订单的状态不同，显示的项不同。只有已完成订单显示"返基因值"项：待发货：金额总计；商品数量；订单编号；成交时间。显示的内容都居右对齐；待收货：金额总计；商品数量；订单编号；成交时间。“查看物流”按钮；已完成：金额总计，返基因值，商品数量，订单编号，成交时间。“查看物流”按钮。

物流显示和查看功能：在待收货和已完成的订单里，最下方显示物流面板(在进入订单详情页面时，就加载物流信息)；点击订单信息面板的"查看物流"，则页面自动定位到物流面板位置处

商品信息面板显示商品的图片和商品信息：商品图片大小为160px；商品信息显示包含：标题、价格、颜色、尺码；点击商品图片所在行，进入商品所对应的单品。

代码实现过程：

1、用户点击“马上结算”按钮，进入结算流程，结算判断用户为已登录状态，并且用户信息里有地址信息，则直接进入确认订单页面，确认订单页面主要是确定地址信息和选择商品优惠策略，实现代码[17]：

if(!$.isEmptyObject(contact)){

contact_name = contact.name;

contact_address = contact.province + contact.city + contact.town + contact.address;

}

2、金额处显示使用折扣的情况：没有使用折扣，则显示“没有使用折扣”；使用了折扣，则显示“已使用折扣减免￥500”，实现代码[27]：

MI.cart.get_carts_data(function(data){

var $uinfo = $content.find('ul.i-cart-info-cont');

$uinfo.find('span.pay-money').html('￥' + data.money);

$uinfo.find('span.pay-user').html(contact_name);

3、确认订单：用户点击了确认订单之后，按钮有个动画效果："确认订单"文字向下移出，laoding转圈从上端移入，表示正在提交订单中(以免用户多次重复提交订单)。待订单提交完成之后，页面显示订单提交成功的提示弹窗(暂时用浏览器的自带提示框)，实现代码[26]：

MI.listen.add_action('结算'， '下单按钮');

var contact = MI.user.current_contact，

r = MI.cart.get_raw_data();

if(r.length > 0){

$('body').addClass('ui-loading');

var pro_data = [];

for(var i in r){

pro_data.push({product_id: r[i].id， measure: r[i].measure});

}

点击按钮后，关闭提示弹窗，跳转到订单管理页面。点击弹窗之外的区域，也可以关闭弹窗，弹窗关闭后，页面也跳转到订单管理页面，实现代码：

$.mobile.changePage('#app=phone&subapp=productGrid&popup=buyManager');

点击确认订单按钮的时候，会加入数据监听，如下代码：

$content.find('a.pay-center-btn').unbind().bind('tap'， function(){

第八节　售后评价子系统实现

1、评价页面一共有3项内容：反馈类型，反馈内容，邮箱，实现代码[15]：

var $listv = $page.find("[data-role=listview]").html("");

$listv.append($('#contacts-tmpl').tmpl(self.contacts)).children('li').removeData('tmplItem');

只有购买过商品之后的用户才能就其所购买的商品进行评价，实现代码：

$listv.find('li a').unbind().bind('tap'， function(event){

var current_id = $(this).attr('data-contact-id');

var c = self.contacts;

反馈类型为2选1的形式，有两种类型：使用体验，商品相关。默认选中“使用体验”这项，实现代码：

while (event && typeof event.originalEvent !== "undefined") {

event = event.originalEvent;

评价页面的样式如图6.10所示。
图6.10售后评价页面样式

点击"提交"按钮后，前端提交反馈内容给后台(若是已登录用户，连同用户id一起提交给后台)，在向后台提交时，按钮显示为loading状态，即"提交"文字往下移，以下代码实现：

MI.view._pagebeforecreate = function(deeplinks， $div){

if(deeplinks['channel'] == 'home')

第九节　核心技术实现

1、表现层：

优众网移动版基于Html5技术开发。其中，由Html控制页面结构与布局，Css控制样式，Javascript控制与用户交互。优众网移动版的主要开发语言为Javascript，依靠jQuery作为主要基础类库，并加载由Google开发的Fast Button技术，实现对用户操作的快速响应，并兼容PC平台浏览器。移动版的框架是在充分吸取jQuery Mobile及Backbone。js两大典型框架的技术优点之后，重构完成，已经形成独立框架。新框架以MVC架构为基础，支持对象事件驱动，并将DOM与Controller进行绑定，将应用模块化，实现页面切换[29]。

2、模型方法：

移动版的与后台的数据交互通过标准HTTP协议进行，主要数据格式为XML，辅以浏览器原生支持的JSON格式，并充分利用Html5的本地存储API，实现在最短时间向用户展示网站内容。

为提升用户体验，提升销售业绩，通过基因后台及Google Analytics提供的接口，记录用户行为[25]。

3、Hybrid App模式：

Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。即移动应用的主体是Web View，主要以网页语言编写，穿插Native功能的Hybrid App开发类型。这种类型开发的移动应用体验相对而言存在缺陷，但整体开发难度大幅降低，并且基本可以实现跨平台。Web主体型的移动应用用户体验的好坏，主要取决于底层中间件的交互与跨平台的能力。国外的appMobi、PhoneGap国内的AppCan和Rexsee都属于Web主体型移动应用中间件。其中Rexsee不支持跨平台开发。appMobi和PhoneGap除基础的底层能力更多是通过插件（Plugins）扩展的机制实现Hybrid。而AppCan除了插件机制，还提供了大量的单View混合型的接口来完善和弥补Web主体型Hybrid App体验差的问题，接近Native App的体验。

系统结构如图6.11所示。
图6.11本系统技术结构图
第七章　总结与展望

第一节　本文总结

本系统为本人根据在工作中进行的一个项目中的一个部分，非常庞大，因此选取其中规模适中的手机端的平台进行论述。

本文中设计开发的是一个电子商务平台，它依托于企业的业务内容，为产品移动端体验优化的一个有力的途径和便利的一手数据收集渠道。在开发中主要取得以下进展：

根据企业和产品的发展方向，确立了用户移动端项目的重要性，同时通过本系统获得一手体验报告与改进方案。在缺少文献与指导的情况下，展开调研，收集业界已经开展的同类型平台和团体信息，确定了平台的规划方向。

根据业务内容对系统进行需求分析，明确梳理了业务流程，也完成了各系统功能点的确定。

对每一个系统功能进行模块化设计，同时根据系统的特点，加强前端页面的展现效果。

通过对本系统的开发，也使得我对自身的能力有了新的认识，在本项目过程中，重新熟悉了软件开发流程；作为项目的主导方与负责人，更多的参与到项目的方案决策中，锻炼了自己的项目管理与协调能力。

第二节　进一步展望

由于项目周期比较紧张，本系统还存在一定的不足之处：

系统功能设计还不够深入。本系统目前仅实现了各大功能点的基本功能，对于用户与平台的互动性尚且不足。

数据库抗压能力测试不足。由于测试资源与规模有限，并没有进行系统压力测试，系统整体抗压力尚属未知之数。

总结以上问题，后期预计为本系统开发增加：

用户积分功能。完善用户积分体系，根据购买的商品、在线情况、评论情况设定不同的等级奖励及积分兑换，设定特定的头衔。

用户交流系统。在平台上开启留言板或即时通讯功能，便于用户在平台进行交流，增加用户的驻留时间。
参考文献

[1] 陆凌牛．HTML 5与CSS 3权威指南[M]．北京：机械工业出版社，2011：1-305．

[2] Mark Pilgrim，常可，胡金埔，赵静译．HTML5揭秘[M]．北京：电子工业出版社，2010：35-110．

[3] 罗森，夏普著，刘宏伟译．HTML5用户指南[M]．机械工业出版社，2011（1）：150-370．

[4] 李烨．别具光芒CSS属性、浏览器兼容与网页布局[M]．北京：人民邮电出版社，2008（1）： 105-277．

[5] Peter Lubbers，Brian Albers，Frank Salim．HTML5程序设计(第2版)[M]．北京：人民邮电出版社，2012：260-322．

[6] Josh Clark，包季真译．触动人心—设计优秀的iPhone应用[M]．北京：电子工业出版社，2011：1-337．

[7] Ken Yarmosh，鞠玮婕，邓力译．App：移动产品经理实战指南[M]．北京：人民邮电出版社，2013:220-401．

[8] 加瑞特，范晓燕译．用户体验要素：以用户为中心的产品设计[M]．机械工业出版社，2011（1）： 1-172

[9] Craig Hockenberry，高京，历勤勇，施迪宏译．iPhone App开发实战手册[M]．北京：电子工业出版社，2012：170-266．

[10] Nicholas C.Zakas，李松峰，曹力译．JavaScript高级程序设计[M]．北京：人民邮电出版社，2010（2）： 1-452

[11]Shawn Welch，郭华丰译．iOS App界面设计创意与实践[M]北京：人民邮电出版社，2013：260-322．

[12] Gary J. Bronson．Java for Engineers and Scientists[M]．Thomson(Brooks/cole)，2003（1）： 351-600

[13] 张孝详，张红梅．JavaScript网页开发[M]．清华大学出版社，2004（1）： 1-269

[14] Jerry Lee Ford．Learn JavaScript In a Weekend[M]．Prima，2004（2）：260-322

[15] D.S. Malik．Java Programming[M]．thomson，2003（1）：500-613

[16] Amy E. Arntson．Digital Design Basic[M]s．Thomson(Wadsworth)，2006（1）：105-160

[17] 霍尔，布朗，蔡金等．Servlet与JSP核心编程[M]．清华大学出版社，2009（2）：100-425

[18] 艾瑞咨询．Java Web开发三部曲•Servlet JSP深入详解：基于Tomcat的Web开发[M]．电子工业出版社，2008（1）：170-266

[19] Robert Hoekman.Jr (作者)，向怡宁 (译者)．瞬间之美：Web界面设计如何让用户心动[M]．人民邮电出版社，2009（1）：1-226

[20]科尔伯恩(Giles Colborne) ，李松峰，秦绪文译．简约至上：交互式设计四策略[M]．人民邮电出版社，2011（1）：1-188

[21] 威尔森(Chauncey Wilson) ，刘吉昆，刘青译．重塑用户体验：卓越设计实践指南[M]．清华大学出版社，2010（1）：20-264

[22] Ilpo Koskinen，Tuuli Mattelmaki，Katja Battarbee．移情设计：产品设计中的用户体验[M]．中国建筑工业出版社，2011（1）：1-97

[23] Andrea Steelman．Murach's Java Servlets and JSP[M]．MURACH MIKE & ASSOC INC，2008（1）：499-651

[24] Yehuda Katz．jQuery in Action[M]．MANNING PUBN，2010（1）：1-133

[25] Kai Jim Refsnes．Learn HTML and CSS with w3schools[M]．JOHN WILEY & SONS INC，2010（1）：144-200

[26] Richard York．Beginning JavaScript and CSS Development with jQuery[M]．WROX PR/PEER INFORMATION INC，2009（1）：241-526

[27] Bill Pribyl．Oracle PL/SQL Programming[M]．O'REILLY & ASSOC INC，2009（1）： 219-290

[28] Jenifer Tidwell．Designing Interfaces[M]．O'REILLY & ASSOC INC，2010（1）： 3-400

[29] 刘晓华，张健，周慧贞．JSP应用开发详解(第3版)[M]．电子工业出版社，2007（3）：90-199

[30] 明日科技．JSP项目开发案例全程实录(第2版)[M]．清华大学出版社，2011（1）：488-599
致谢

时光荏苒，在两年多的学习与论文撰写过程中，我受到了我的硕士论文导师及诸多任课教师的教诲，作为一个研究生的毕业论文，由于经验的匮乏，难免有许多考虑不周全的地方，如果没有导师的督促指导，以及一起工作的同学们的支持，想要完成这个设计是难以想象的。在这里首先要感谢我的导师李旭东教授。本论文是在马捷教授的悉心指导下完成的。在这个过程中，我学到的不仅仅是关于软件工程项目管理的专业知识，也极大地拓展了我的视野和所涉及的领域。

再者，在系统设计和开发过程中，我也得到了家人、同学、同事的大力帮助，技术开发团队的加班加点开发，页面设计团队费尽心血力求完善的用户界面，作为系统的设计者与项目负责人，也深深地感受到了他们对于我本次系统所付诸的努力。同时，家人的默默的支持使我顺利地完成学业和论文的写作。

完成论文离开学校，是一个终点，又是另外一个起点！喝水不忘挖井人，我将铭记大家对我的帮助，以百倍的努力来报答我的朋友，报答社会！

最后衷心地感谢在百忙之中评阅论文和参加答辩的各位专家、教授!

个人简历在学期间发表的学术论文与研究成果

个人简历：

本人生于1985年，现在在天津信一科技有限公司工作。

IV

5

II

I

论文和Essay改写降重和AI查重工具！立刻免费获取！获取免费激活联系微信:idavidxiong

下载

				暂无来源信息

由Html控制页面结构与布局，Css控制样式，Javascript来控制Android

如果你已经登录仍然出现不能下载的情况，请【点击刷新】本页面或者联系站长

演示

作者联系方式