电子商务网站原型设计设计.doc

《电子商务网站原型设计设计.doc》由会员分享，可在线阅读，更多相关《电子商务网站原型设计设计.doc（31页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、【精品文档】如有侵权，请联系网站删除，仅供学习与交流电子商务网站原型设计设计Prototyping Design of E-commerce Website学生姓名谢道贤学号201011611122所在学院信息学院班级电子1113所在专业电子信息工程申请学位工学学士指导教师李小立职称讲师副指导教师职称答辩时间2015 年 6 月 6 日.精品文档.电子商务网站原型设计目 录设计总说明IINTRODUCTIONIII 第1章 绪论11.1网站打印机产生的背景11.2设计电子商务网站原型系统的目的及意义21.3 课题引入21.4课题研究的内容31.5本章小结3第2章 系统总设计32.1 系统需求分

2、析32.1.1总体结构框图32.2 本章小结4第3章 场景应用43.1电脑版和手机版43.2场景演示63.2.1场景A演示介绍63.2.2场景B演示介绍123.3菜单搜索功能163.4电脑版场景A173.5企业简介、联系我们173.6本章小结17第4章 系统设计开发过程174.1总体思路174.2需求分析174.3确定网站风格184.4设计功能模块184.5确定目录结构和主页栏目184.6数据库链接184.7 Div和表格布局、CSS美化界面194.8 javascript特效和部分功能204.9 系统调试过程224.10完工22第5章 后台管理功能225.1登录介绍235.2产品排序介绍24

3、5.3产品增删改功能介绍、产品详细编辑功能介绍275.4优惠推荐功能介绍325.5订单搜索功能介绍345.6订单删除功能、订单备注功能355.7企业简介栏目、联系方式栏目的编辑功能365.8平台注册功能365.9本章小结37第6章 总结38鸣 谢39参考文献40设计总说明移动互联网，是指将手机载体和互联网二者结合起来成为一体，各种互联网技术、平台、商业模式和应用在这个手机载体上运行以产生各种信息交互的总称。随着4G时代的开启以及移动终端设备的凸显，我国移动互联网的发展越发越烈。未来，是一个以手机为载体去控制各种各样的智能终端电子设备的物联网世界。物联网就是物物相连的互联网。这有两层意思：其一，

4、物联网的核心和基础仍然是互联网，是在互联网基础上的延伸和扩展的网络；其二，其用户端延伸和扩展到了任何物品与物品之间，进行信息交换和通信，也就是物物相息。物联网通过智能感知、识别技术与普适计算等通信感知技术，广泛应用于网络的融合中，也因此被称为继计算机、互联网之后世界信息产业发展的第三次浪潮。物联网是互联网的应用拓展，与其说物联网是网络，不如说物联网是业务和应用。因此，应用创新是物联网发展的核心，以用户体验为核心的创新2.0是物联网发展的灵魂,即移动互联网。以手机为载体，在其上运行的各种应用程序的技术，现在已经深入人心，它渗透入了我们生活的方方面面。比如现在最流行线下OTO、网络购物。这也是本课

5、题的设计任务来源，将手机网站、电脑网站分别和网站打印机连接起来，这就是物物相联了，是物联网物物相联的基本特征。只不过这些物更多的是以手机为终端载体，但它仍然是属于移动互联网。物联网和移动互联网的关系，是父集和子集的关系，移动互联网是物联网的很重要的一部分，未来的物联网更多的也体现在移动互联网上。本课题主要是围绕移动互联网和线下OTO具体使用场景，来开发设计一套电子商务网站原型系统，将互联网技术融入餐饮行业，实现用户在手机上或者电脑上都可以浏览餐饮商家的全部菜单、挑选菜单。当用户挑选好菜单后完成下单，餐饮商家后台链接的网站打印机会立刻将该用户的下单信息打印出来。那么根据哪种标准把这个课题做好呢？

6、要实现这种场景应用，本课题主要以asp技术为标准，将asp作为后台技术开发语言，将各种信息通过asp程序和javascript程序处理，汇总传送到与之配套的网站打印机，然后打印出来；以access数据库为后台开发数据库，将各种信息通过asp程序和javascript程序处理，汇总插入到access数据库中保存起来，在需要时调用；以html、css和javascript布局和美化界面效果，生成非常怡人友好的人机交互界面。采用Dreamweaver CS6 作为开发工具。程序运行环境为windows 操作系统环境。这套开发出来的能在手机上和电脑上浏览和下单并触发打印机立即打印的程序，实用性强，功能

7、完善，可以方便快捷帮助用户下单，帮助餐饮商家接单和统计数据，是餐饮行业必不可少的运营必备工具之一。在人民追求尽善尽美的今天，UI界面设计的重要性越来越凸显。本系统的设计原则就是围绕UI设计与程序设计进行的，界面上要简洁明朗大方，操作上要方便流畅。UI的本意是用户界面，是英文User和interface的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系。界面设计，在漫长的软件发展中，界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要卖点。一个友好美观的界面会给人带来舒适的视觉享受，拉

8、近人与电脑的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。在人和机器的互动过程（Human Machine Interaction）中，有一个层面，即我们所说的界面（interface）。从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程，认

9、知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性。本次设计的参考资料很多，可供查阅的条件也很多，从知网上，网络中，都可以找到参考的资料。本次设计着重参考了Dreamweaver设计和asp构架，并且查阅了一部分数据库书籍，参考了商业网站综合案例，对于本次设计的帮助极大，而且能够对于这个设计的构架细节都做出足够的支持和帮助。关键词：网站打印机；互联网打印机；OTO；点餐系统INTRODUCTIONMobile Internet, it refers to the phone and the Internet

10、combine the two carriers become collectively one, a variety of Internet technologies, platforms, business models and applications running on the phone carrier to produce a variety of information exchange. As well as highlighting the 4G era of open mobile terminal equipment, the development of Chinas

11、 mobile Internet increasingly more intense. The future is a mobile phone for the carrier to control a wide variety of intelligent terminal electronic device networking world. Things that material objects connected to the Internet. This has two meanings: First, the core and foundation of things is st

12、ill the Internet, is based on the Internet extension and expansion of the network; second, to extend and expand its client to any goods and items of information exchange and communication, that is, physical objects interest. Things through IntelliSense, identification technology and pervasive comput

13、ing, communications sensing technology, widely used in converged networks, has been called the second computer, the Internet world information industry development of the third wave. Things is an application to expand the Internet of Things is not so much a network as it is a business and networking

14、 applications. Therefore, the application of innovation is the core of the development of things, to the user experience as the core of innovation 2.0 is the soul of the development of things, that the mobile Internet.Mobile phone carrier, various applications of technology to run on it, and now has

15、 gained, it penetrates into every aspect of our lives. For example, now the most popular line of OTO, online shopping.This design is also the subject of the origin of the tasks, the mobile phone sites, computer website and printers are connected together, and this is linked to the physical objects,

16、is the basic characteristic of things associated with physical objects. But these things are based more on the phone for the terminal carrier, but it still belongs to the mobile Internet. Relationship Things and mobile Internet, is the relationship between a parent and a subset of the set, the mobil

17、e Internet is a very important part of things, more things future is also reflected in the mobile Internet. This paper mainly around mobile internet and cable OTO specific usage scenarios, to develop a suitable food industry convenient meal service applications, Internet technology will be integrate

18、d into the food and beverage industry, to achieve a user on the phone or computer can browse catering All menu businesses, the selection menu. Upon completion of the user menu selection of good order, food businesses linked site printer back immediately the next single user to print out information.

19、So depending on which standard to this issue to do it? To achieve this scenario application, the subject mainly asp technology as the standard, the asp as a back-end technology development language, all kinds of information through the asp and javascript program processing program, a summary is tran

20、smitted to the accompanying website printer, then print it out; to access back-end database development database, all kinds of information through the asp program and javascript program processed, summarized into the access database saved, only when needed; in html, css and javascript interface layo

21、ut and landscaping effect, generating very pleasant friendly interactive interface. Dreamweaver CS6 use as a development tool. Program operating environment for windows operating system environments. The developed can be viewed on the phone and computer and printer orders and trigger immediate print

22、ing, practical, functional, easy and quick to help users orders, orders to help food businesses and statistics, catering One indispensable tool for industry operators is essential.In pursuit of perfect people, the importance of UI interface design more and more prominent. The system is designed arou

23、nd the principle that UI design and program design, and the interface to be simple and clear appearance, to facilitate smooth operation. UI was intended user interface is in English and User interface abbreviations. Literally user interface with two part, but in fact also includes the interactive re

24、lationship between the user and the interface. Interface design, in the long software development, interface design work has not been seriously. People who do the interface design were derogatory called art. In fact, software interface design as industrial products, industrial design, is an importan

25、t selling point of the product. A friendly and beautiful interface will bring a comfortable visual enjoyment, to narrow the distance between people and computers to create a selling point for businesses. Interface design is not simply the art of painting, he needs to locate the user, the environment

26、, usage and designed for end users, is purely scientific nature of art and design. A standard test interface is neither a project development team led by the results of the project are not the views of members voted, but the end-user experience. Therefore, it should be closely integrated interface d

27、esign and user research is a continuous design satisfactory visual effects process for the end user. Man and machine interaction process (Human Machine Interaction) in, there is a dimension that we call interface (interface). From a psychological sense to points, the interface can be divided into se

28、nsory (visual, tactile, auditory, etc.) and two levels of emotion. User interface design is an important part of the screen product. Interface design is a complex there are different disciplines involved in the engineering, cognitive psychology, design, linguistics and so on in this play an importan

29、t role. Three user interface design principles: set under the control of a user interface to; reduce the burden on the users memory; consistent interface.The reference design is a lot, there are many conditions are available for inspection from known online network, you can find reference informatio

30、n. The reference design focuses on the design and asp Dreamweaver architecture, and access to a part of the database of books, reference is made to commercial websites integrated case, for helping this great design, but also the details of the architecture of this design have made adequate support a

31、nd Help.KEYWORDS: Website printer; Internet printer; OTO; ordering system电子商务网站原型设计电子信息工程，201011611122，谢道贤指导教师：李小立第1章 绪论1.1 网站打印机产生的背景随着互联网技术的飞速发展，网络购物已不在是什么新鲜的名词。自小米公司的雷军在互联网上搞饥饿营销以来，越来越多的企业意识到电子商务平台分销渠道的重要性，并建立了自己的电子商务宣传平台，将自家产品发布上去供消费者浏览和下单。但问题来了。企业在互联网上有了一个网站，用户可以不限时间不限地点的到他们的网站下单。但用户下了单，企业管理员如果

32、不登录后台进去查看数据，他们就不能及时知道已经有订单产生。这样就影响了货物的及时配送。下单的用户不能及时收到货物，影响体验不说，而且他们还会认为，这个企业的电子商务网站系统不完善，连个管理人员都没有。一旦这样的观念在用户脑海中形成，他们下次就不会在你的网站下单了，而且还会形成一个恶性循环，就是订单越来越少。最终，这是个失败的电子商务网站系统。而这一切的根源，就在于企业管理员能不能及时知道有订单产生和迅速安排货物发送。做电子商务，不是说有一个宣传平台就行了的，它不仅涉及到信息流，还涉及资金流和物流。但信息流是一切电子商务活动的基础，如果用户下了单企业却不知道，资金流和物流就无从说起1。为了解决这

33、个问题，曾经有过不少解决方案。比如短信通知管理者，邮件通知管理者。但这些都是有延迟的，效果不好。而网站打印机的横空出世，却如此完美的解决了这个难题。自从有了网站打印机，企业商家把他们的电子商务平台或者网店对接好这个网站打印机，那么用户下的单这台打印机就能在毫秒级别的时间差内将这个订单信息打印出来。这对网站管理员来说是福音，对企业来说也是福音。有了这个网站打印机，电子商务活动中的信息流环节可以说是完美解决。至于资金流和物流那些，中国现在也在不断完善相应法规和基础设施。这里不讨论物流技术。而在餐饮行业，有一个专业术语叫OTO。目前OTO在中国发展火热，各种外卖送餐广告漫天飞舞。包括肯德基麦当劳都开

34、始推出自己的送餐业务。网站打印机用在这方面，就真的是十分恰到好处。有了网站打印机，餐饮商家宣传时，只需把自己网站的地址制作成为二维码，印制在广告单上，那么用户用手机微信一扫瞄就进入商家的网站了，然后在里面下了单，这边的打印机立刻把下单者的姓名、手机、地址等下单信息打印出来了。然后餐饮商家可以快速安排物流发货。而即使不是外卖送餐，对于餐饮商家来说，这个打印机还有一个大大的用处。传统的餐饮商家都有很多服务员，几十到几百甚至上千。用户来餐厅就餐，坐下了，传统的餐饮商家会立刻安排服务员上来询问顾客要点什么菜，写好菜然后拿到厨房。但是，技术发展到今天，网站打印机的出现，把这个过程变得更加便捷。应用这种网

35、站打印机物联网技术，餐饮商家只需在自己的每一张桌子放一个二维码，来就餐的用户使用手机扫一扫功能就能进到这个餐饮商家的订餐网站，然后在里面下单。同样，这台打印机就能将下单信息打印出来。而且，连这个用户是在哪张桌子下的单的那个桌号都打印出来了。这里面打印机的工作原理是，用户扫描二维码的同时，将二维码里的桌号信息也发送给网站打印机了，当然，二维码里面的桌号信息是之前专人设置好的。所以这种网站打印机能将用户在哪个桌子的下单桌号都打印出来。1.2 设计电子商务网站原型系统的目的及意义电子商务网站，是一种信息宣传平台，是一种信息载体。就像电力一样，它可以渗透到各行各业，提高每个行业的信息传播效率。在这里，

36、就以最常见的餐饮业为例子来研究它吧，万变不离其宗，电子商务网站在餐饮业的研究成果最终也是可以平滑过度和应用到其他行业的。有人说，有了网站打印机，那么餐饮不再需要服务员了。其实，他们未来会两者共存，没有谁消灭谁的说法。就像线下实体店和线上网站，它们是共存的，互相促进。网站打印机和服务员的关系也是这样，能够互相促进，最终提升的是这个餐饮商家的服务水平。有了网站打印机，服务员可以更轻松更高效的工作；有了服务员，网站打印机的信息才能更好的发挥及时作用。网站打印机的出现，可以解决用户一下单企业管理员这边就能立刻知道的问题。但问题一个接着一个来了。网站打印机，它只是一种硬件，它是联网的，是物联网设备中不可

37、缺少的硬件设施。但是有了硬件，如果没有软件支撑，没有交互体验良好的界面，那么这个打印机就无用武之地了。所以，既然已经有那么完善的打印机硬件出来了，那么，研究开发一套与之配套的电子商务网站原型系统就很有必要。具有强大的交互功能的电子商务网站原型系统，能使企业和消费者更方便传递信息，快速完成电子商务过程。电子商务将卖方和买方，供应商和合作伙伴更紧密地联系在一起，从而消除了时间和空间上的障碍。依靠电子商务网站原型系统，我们可以利用计算机提供的信息管理方便的特点，对网上购物的过程中形成的一系列动态信息进行管理，通过结合使用ASP和access数据库，以及页面编辑器Dreamweaver对电子商务网站原

38、型系统进行建设和实现数据库连接，成功实现网站的搭建。这种电子商务网站原型系统对餐饮行业的发展的促进作用是相当明显的。对用户来说，他们可以随时下单，甚至即使在餐厅桌面坐着了，也不需要服务员拿着餐单来询问他们要点什么菜。用户只需要拿起手机扫描桌上的二维码打开订餐网站下好单，厨房那边就把订单信息包括该用户下单的桌号都打印出来了，然后迅速把菜端上来。随着技术的进步，其各方面的提升对于连带产业和相关方面都能起到连带的借鉴提升作用，这具有十分重要的意义，所谓的进步便是由此而来2。1.3 课题引入设计本套电子商务网站原型系统，是“以点餐系统为中心、以物联网技术为辅、以网站打印机为硬件基础条件、以access

39、数据库作为整站信息管理数据库，通过asp程序和javascript脚本语言处理汇总信息，实现点餐功能齐全、可靠性强、成本低、体积小、功耗严格要求的专用餐饮行业的必备下单系统工具。如今，人们生活水平的提高，生活的节奏加快，加上手机的日益普及和4G网络的铺建，人们也在追求越来越便捷的下单体验。研究这套电子商务网站原型系统，是能影响人类生活甚至改变整个人类社会的，因此设计出一套能够及时打印下单信息的电子商务网站原型系统是具有很高的实际应用意义的。1.4 课题研究的内容本课题主要研究电子商务网站原型系统。最终目的是设计出一套交互友好、响应及时、无累赘乱码、访问速度快、视觉效果好、采用ajax后台异步通

40、信技术来处理数据的电子商务网站原型系统，。1.5 本章小结综合以上，本章讲述了网站打印机和点餐系统的发展背景、出现的意义以及对餐饮商家的服务水平的促进作用。当今，人们对便捷快速的生活要求越来越高，设计一个能快速下单而管理者能立刻知道的电子商务网站原型系统越来越受到重视，因此引入了电子商务网站原型设计这个课题。本课题初步采用asp动态语言技术、ajax技术和javascript技术，使用access数据库作为整站系统数据储存容器，完成下单功能、打印功能、后台管理功能。第2章 系统总设计2.1 系统需求分析用户访问页面：立刻下单、优惠推荐、企业简介、联系我们、搜索功能、下单功能、计算价格功能、填写

41、订单信息功能、发送邮件功能餐饮商家管理员后台：产品增删改功能、产品排序功能、产品详细编辑功能、产品推荐功能、搜索下单信息功能、删除和备注订单信息功能、编辑和修改企业简介联系我们栏目功能、写入数据库功能、控制打印机打印功能、发送邮件功能平台商功能：注册功能2.1.1 总体结构框图根据课题的要求，本设计的系统总框图如图2-1所示。图2-1 系统总框图2.2 本章小结本章主要分析了课题的需求，网站需要的功能，网站整体框架 第3章 场景应用3.1 电脑版和手机版本电子商务点餐系统默认首页为: 假设现在有一个用户在 来访问他网站程序的首页地址。访问的时候又分电脑设备访问和手机设备访问，传统的网站程序在这

42、两种设备访问下都是同一个页面，这就导致了手机版访问出现很严重的界面错落。本程序专门针对这个问题设计开发了两种版本，使用javascript语言程序自动识别用户来访设备。如果用户是电脑版访问，则停留在电脑版界面；如果用户是手机版访问，则跳转至手机版界面3。下面具体演示使用电脑在浏览器地址栏输入 ,打开的页面如图3-1图3-1 电脑版首页使用手机在浏览器地址栏输入： ,打开页面如图3-2：图3-2 手机版首页所以，用户在该系统平台注册后，只要宣传一个网址就行了，无需担心访客用什么设备访问网站。系统能够自动识别访客设备并自动转到相应设备的首页。而控制实现这个功能，只要在电脑版的首页head与head

43、标签中嵌入这段javascript代码就可以了。 if(navigator.platform.indexOf(Win32)!=-1) /pc /window.location.href=电脑网址; else /shouji window.location.href=m.asp;3.2 场景演示本系统的主要应用场景有两个。一个是用户不在餐饮店，在其他的地方，有可能是南极，也有可能是北极，通过直接访问网站地址下单，暂且把这个定义为场景A；另一个是用户在餐饮店，通过手机微信等扫描设备扫描餐桌上的二维码进入网站下单,暂且把这个定义为场景B。3.2.1 场景A演示介绍微信的公众号服务号的强大功能，已经代

44、替了传统浏览器的功能。该程序手机版本是可以嵌入微信服务号的。所以，在本系统平台注册了帐号的用户，如果他们有一个微信服务号，那么就可以把这个手机版本的页面地址嵌入微信服务号里4。所以，顾客想订餐的时候，（可以直接打开他们的微信，当然前提是他们的微信也关注了该餐饮商家）直接打开微信找到该餐饮商家的微信服务号进入页面，这个其实跟在浏览器地址栏直接访问的网址是一样的界面，只不过嵌入微信公众号后用户访问起来就便捷多了。下面是用户使用手机访问程序后的下单界面在下单界面里，用户点了餐，系统能立刻计算出点餐的份数和总价并在左下角显示出来。如图3-3图3-3场景A下单界面一如果用户想详细了解该菜单，那么点击菜单

45、的图片或者文字就会弹出如下面的详细介绍，本技术采用后台ajax后台异步通信技术，整个过程没有刷新的迹象，交互体验优良完美。单击关闭按钮后这个详细介绍页就会消失，如图3-4。图3-4 弹出详细页点击下单按钮后，程序进入第二页面，在这个页面，程序会要求用户填写下单信息，如收货地址、收货姓名、联系电话等信息，这些信息是必须的，程序对这些做了限制，如果用户没有填写这些信息，则提示其填写，否则无法提交。因为如果没有收货地址、联系电话等信息，餐饮商家也不知道送货到哪里、送货给谁是吧？所以本程序强制性设定用户必须填写订单信息才能提交订单5。用户也可以重新选择份数，系统同样能够及时根据用户点的菜系计算出份数和

46、总价并在下方显示出来，如图3-5图3-5 场景A下单界面二确定无误后用户再点击确定下单，程序会在后台处理数据。此时会将数据发送给远端联网的打印机。打印机接收指令后会将数据打印出来。完成后程序进入下面的下单成功界面。在这个界面里，上面有个接收订单疑问询问用户。如果用户想保留这份订单作为凭证或者其他作用，反正不管他出于什么目的，他想接收这份订单数据就在那个文本框里输入邮箱地址，然后点击发送，他的邮箱就可以接收这份订单信息，如图3-6图3-6 场景A下单界面三不管你在哪里下单，这台打印机都能把你的下单信息打印出来。下面这个小发票是上面演示中打印出来的，一下单就打印出来了，非常快捷。注意，这里是场景A

47、演示，即用户直接通过网址访问或者从微信公众号进入点餐程序，如果是场景A,这张小票的头部标题就会显示大大的“网页下单”四个大字。那么如果是场景B呢？（场景B指用户已到餐馆，通过扫描餐桌上放置的二维码进入点餐系统）请看后两段场景B详细介绍，图3-7图3-7场景A打印机打印出来的发票订单如果用户在下单成功后的程序界面填写接收订单邮箱，他填写的邮箱就可以接收刚才下单的信息，如图3-8图3-8场景A_用户填写邮箱后接收的订单信息3.2.2 场景B演示介绍假设现在一用户来到餐厅就餐，选了个8号桌坐下，餐桌上有一个显目的标签牌，上面放置了专门针对8号桌设置的二维码，并提示有：“请扫描此二维码下单”的广告字。该用户看到后，掏出手机，使用手机微信等扫描设备扫描了该二维码。一般情况下，经过本人多方检测，微信是一扫描就立刻打开进入本应用程序了，其他一些二维码扫描软件可能会把网址显示出来，用户还要点击这个网址才能进入本应用程序。反正呢就是不影响使用。下面是该餐桌二维码，如图图3-9图3-9 桌号为8的桌子上放置专门设置的二维码扫描后进入的程序界面，这里和场景A的界面都是一样的。也可以及时计算用户的下单份数和总价并在左下角显示出来。请继续往下看，如图3-10图3-10场景B下单界面一用户点击确定按钮后进入进入本页面。看，开始不同了，发现没有？在场景