Web标准的团购网站设计与实现

1、基于Web2.0的网络团购系统的设计与实现,07计算机科学与技术 本科二班 袁国麟,一、需求分析：,21世纪是知识经济迅猛发展的时代，随着经济的全球化，信息还会以其特有的形式改变着经济、科技和社会发展的走向，推动人们自身思维方式和行为模式的创新。团购就是在这个大背景下的创新产物。 团购是近两年才发展起来的B2T商业模式。本课题设计的目的就是做一个完善的团购系统，实现更为完善更为规范的B2T平台的设计。 团购的好处主要表现在两方面：一是团购价格低于产品市场最低零售价，二是产品的质量和服务能够得到有效的保证。,团购系统的意义： 1、拓展企业商品流通渠道，帮助企业扩大市场份额。 2、减少中间环节，降

2、低营销成本，实现企业和消费者的共赢。 3、消费者零购也能获得批发价格，节省居民采购成本和时间。 4、一但产生产品质量问题和纠纷，有利于发挥集体维权优势，确保消费者的消费权益。,2、目前国内网络团购机构有很多，对于消费者而言，团购价格低于一般的市场价格，使消费者得到实惠；而对于商家来说，薄利多销加快了货物和现金的周转，也可以降低商家的销售成本，因此形成了双赢的局面。,3、团购系统正如雨后春笋般的速度繁荣发展着，但是目前存在很大的问题与很大的不规范性。而且存在钻法律空子的想象。我的研究目标是通过做的这个团购系统从技术角度来改变目前的混乱局面，通过一个更为完善的系统以达到科学完美的实现B2T平台的设

3、计。,1、团购是这两年才发展起来的，所谓网络团购，就是认识的或者不认识的具有相同购买意向的零散消费者联合起来，向厂商进行大批量购买的行为，从而加大与商家的谈判能力，以求得最优价格的一种购物方式。,二、相关技术概述,本课题是基于Web2.0相关技术的团购网站，团购网站的技术核心其实和淘宝、当当、拍拍或者亚马逊之类的电子商务型网站是很类似的！团购的优势在于网聚更多的人去买相同的东西会比正常价格低而已。他们都可以说是一个电子商务系统，所涉及的技术主要有Ajax、JavaScript、html/xml、CSS、ASP/PHP/JSP、（.Net/Lamp/JavaEE）以及数据库方面的相关技术。下面对

4、这些技术做相应的介绍。,1.AJAX 即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX是指一种创建交互式网页应用的网页开发技术。Ajax优点是更迅捷的响应速度 。通过 AJAX，我们的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，我们的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据。 主要包含的技术 web标准（standards-based presentation）XHTML+CSS的表示； 使用 DOM（Docume

5、nt Object Model）进行动态显示及交互； 使用 XML 和 XSLT 进行数据交换及相关操作； 使用 XMLHttpRequest 进行异步数据查询、检索； 使用 JavaScript 将所有的东西绑定在一起。,3.CSS CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的

6、外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。,2.JavaScript JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。是一种动态、弱类型、基于原型的语言，内置支持类。,4.XML XML（Extensible Markup Language）即可扩展标记语言，它与HTML一样，都是SGML(Standard Generalized Markup Language,标准通用标记语言)。Xml是Internet环境中跨平台的，依赖于

7、内容的技术，是当前处理结构化文档信息的有力工具。扩展标记语言XML是一种简单的数据存储语言，使用一系列简单的标记描述数据，而这些标记可以用方便的方式建立，虽然XML占用的空间比二进制数据要占用更多的空间，但XML极其简单易于掌握和使用。,5.Web 2.0 Web2.0 是相对Web1.0 的新的一类互联网应用的统称。Web1.0 的主要特点在于用户通过浏览器获取信息。Web2.0 则更注重用户的交互作用，用户既是网站内容的浏览者，也是网站内容的制造者。所谓网站内容的制造者是说互联网上的每一个用户不再仅仅是互联网的读者，同时也成为互联网的作者；不再仅仅是在互联网上冲浪，同时也成为波浪制造者;在

8、模式上由单纯的“读”向“写”以及“共同建设”发展；由被动地接收互联网信息向主动创造互联网信息发展，从而更加人性化！,6.LAMP LAMP即是Linux+Apache+Mysql+Perl/PHP/Python一组常用来搭建动态 网站或者服务器的开源软件，本身都是各自独立的程序，但是因为常被放在一起使用，拥有了越来越高的兼容度，共同组成了一个强大的Web应用程序平台。随着 开源潮流的蓬勃发展，开放源代码的LAMP已经与J2EE和.Net商业软件形成三足鼎立之势，并且该软件开发的项目在软件方面的投资成本较低，因此受到 整个IT界的关注。从网站的流量上来说，70%以上的访问流量是LAMP来提供的，

9、LAMP是最强大的网站解决方案,7.Shopex Shopex即网上商店平台软件系统，又称网店管理系统、网店程序、网上购物系统、在线购物系统。无论是开设个人网上购物商店还是企业在线购物商城，一套好用的网店系统都是必须的。 ShopEx基于开源且性能卓越的Lamp（Linux+Apache+Mysql+Php）架构，最大程度降低您的总体拥有成本； 与Windows平台架构不同，您无需为了操作系统、数据库等支付任何额外费用，大大降低成本。 ShopEx与国内知名的SEO团队点石互动、浩维互动均结成战略合作伙伴关系。业内领先的SEO经验均会在ShopEx软件中迅速得到体现，大大促进您 的网店商品的搜

10、索引擎收录。,8.Database 数据库，通俗点说就是存入数据的仓库。数据库（Database）是按照数据结构来组织、存储和管理数据的仓库。数据库有很多种类型，从最简单的存储有各种数据的表格到能够进行海量数据存储的大型数据库系统都在各个方面得到了广泛的应用。 数据库的种类 ： 大型数据库有：oracl、 BD2 、SQL server 小型数据库有：Access、MySQL、等。,三、功能模块设计,主要功能模块的设计包括以下几个内容： 1.商品发布与展示功能 2.订单处理功能 3.会员管理功能 4.支付与配送功能 5.站点内容管理功能 6.统计分析功能 7.搜索引擎优化功能 8.购物车功能

11、9.第三方支付功能,四、功能模块实现,1.论文设计概述： 本系统是借助于SHOPEX开发的电子商务团购网站，这个网站大部分技术都是借助于这个平台实现的，功能强大，涵盖了所有团购需要到的功能，比如登陆，注册功能、会员管理功能、商品编辑与发布管理功能、购物车功能、订单处理功能、支付功能、站点文件管理功能等等。通过不懈的努力，这个网站终于在三月底成功上线了，详情请点击： 。 本论文是通过这个电子商务网站改版设计出来的团购系统网站。,2.文件模块组成 这个是在PHPNOW环境下的shopex系统，我们需要编辑的是htdocs文件下面的themes文件，下面的截图是其相应的文件组成目录,3.主体风格设计

12、 所有的网站都要有一个设计风格的，一个好的设计风格可以带给人们新意，起码给我们一种舒服的感觉，这样用户体验也会好很多的。 其次是，每个网站还有有内容，一个空空的网站也是留不住来访用户的。我们公司主要是所化妆品下的染发类，主要适用人群是年轻的八零九零后们和上了年纪的白发脱发老人，而这类商品的主要消费人群却基本上的我们这些年轻人，所以这类网站的风格要做的阳光一点，我这里将网站的主体风格设计成深红色调的形式，这样显得热情大气而且吸引眼球。下面的网站首页的显示效果：,页脚显示效果，采用文字竖排显示与横排显示相结合的显示效果，或许会给我们带来点新意：,4.功能展示,登陆模块界面：（正确输入用户名、密码和

13、验证码之后即可登陆到系统后台）,御采堂团购系统后台界面：,站点文件在线编辑界面（可以在线编辑页面，但是效果没有Dreamweaver软件设计的效果好，推荐用DW先设计好样板让后再放进去）：,商品在线编辑功能界面（通过这个后台功能可以直接发布商品信息，效果还可以，但是有一个软件做这更有效率shopex助理，）：,订单模块（可以查看谁买了我们的商品，以及该客户的基本信息还有发货单、收款单快递模板设计等等功能，这个模块还可以导入淘宝的订单，很方便实用。）,购买商品登陆与注册界面（当用户没有登陆要购买商品时，会以弹出窗口的形式出现下面这个对话框，这个也是要通过Ajax技术实现的）：,会员注册与登陆模块

14、（登陆进入购物车页面）：,会员管理功能界面效果：(里面有会员的基本信息和会员享受的一些优惠还有一些基本的设置等等),查看购物车(可以查看到我们要买的商品数量和金额等信息)：,订单处理（购物车模块）：,客户留言模块：,五、总结,设计是一件很快乐的事情，尤其是当你设计出来的作品被采用了，可以实现其商业价值的时候，自然会感到很自豪。在这半年的工作中，自己的辛苦没有白费，自己做的东西很多也得到了肯定，并在不断地进步着。 团购系统的设计与架构是一项大工程，不可能是一个人在短时间内可以全部完成的，我这个网站设计目前也只是完成了其中的一部分的功能，毕业答辩的结束不代表这个团购系统设计的终结，我还会坚持做下去

15、，做好他，最终得以有商业应用的价值。 在做这个系统设计的期间，遇到了不少的技术问题，在这里很感谢我的主管对我的支持与鼓励，促使我不断地改进不断地完善。同时要感谢万老师，能及时给我反馈学校的相关计划和安排，好让我及时完成论文的编写。也感谢白云学院这四年来对我的栽培。,六、参考文献,疯狂Ajax讲义 李刚编著 2009年10月第二次印刷 疯狂JAVA讲义 李刚编著 2010年8月第五次印刷 疯狂XML讲义 李刚编著 2008年10月 第一版 JavaScript征途 朱印宏 著 2009年9月 第一次印刷 大巧不工-Web前端修炼之道 赖定清 林坚 编著 CSS 网页布局实录 李超编著 2007年

16、 9月 第一版 网页设计与配色 旭日东升主编 2009年第一次印刷 电子商务概述 姜宏波主编 2010年5月 第四次印刷,附录：网站重要代码,Index.html ,Header.html ,Footer.html ,Footer.css /*底部样式 */ #foot width:100%; text-align:center; background:url(ybgx_05.jpg) repeat-x; .footmain width:1007px; margin:0 auto; .footlogo float:left; width:217px; height:88px; text-ali

17、gn:center; margin-top:20px; ,.footinfo float:left; width:770px; margin:10px 0 0 20px; text-align:center; .footinfo .cat1 float:left; padding:0 15px; color:444; line-height:32px; ,内部页面CSS 样式： #footer clear:both; width:900px; color:#000; height:auto; margin:2px auto; #footer p clear:both; #footer h3 a font-size:18px; font-weight:bold; color:#fff; text-decoration:none; #footer h4 a font-size:14px; font-weight:bold; text-decoration:none; #dg float:right; margin-right:260px; ,#eg float:right; padding-right:20px; border:2px #999999; margin-right:50px;