【《基于HTML5的网络商品销售网站设计》8600字】

基于HTML5的网络商品销售网站设计摘要随着互联网时代的到来，人们的生活已经被多方面的影响，基于互联网的网络商品销售网站，本着让销售者和消费者能够更好的体验购物的感觉，促进网络商品的发展。网站的出现，可以销售者们找到更完美的销售渠道，让购买者们找到更满足消费者利益的购买渠道。减去了原始商品销售中的很多不必要的环节。有利于网络销售的发展。本文首先提出网络商品销售网站的需求以及特点，将主要的业务流程总结设计出来，为网站开发做好准备。由于网络商品销售网站业务灵活多变，需求多等，因此在系统开发过程中采用MyEclipse作为开发平台，使用Mysql完成对数据库的开发，Java技术完成对系统功能的开发，Tomcat服务器做为系统的运行环境。在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。在对整体系统设计与实现的基础上本文进一步分析了数据库的设计与实现，从数据库的概念结构设计，逻辑结构设计，物理结构设计等方面做出了分析，使之可以更好的实现系统的运营。最后,对系统做了测试,特别是在功能上采用了黑盒测试,通过各种不同情况下的异常数据进行测试,找到了系统中的问题并加以改正,保证了系统可以实现必须的功能,并具有稳定,安全等优点。最后针对本次毕业设计做了总结。关键词：网站；网络购物；Java；Mysql目录32689一、绪论 一、绪论（一）课题背景随着21世纪的来临，互联网的飞速发展给人类社会生活带来了历史性的改变，把人们带进了一个网络社会中。而互联网时代的到来,让我们享受了足不出户就可购买美食，衣物等用品，给我们的生活提供了极大的方便。电子商务是目前广受欢迎的商业模式，已经成为人们生活中必不可少的一部分。网上购物商城是电子商务中最普遍的形式，他已经成为人们购物方式的首选。目前国内外已经有很多个购物网站了，如京东，淘宝等，购物网站的优势在于物品价格便宜，而且不需要跑很多个购物商场来买自己心仪的物品也不需要排队买单，极大的节省了以后的时间，下单之后可以送货上门非常方便，比传统购物效率高。网上购物商城不仅能扩大商家规模，节省商家开支，而且也能满足用户购物需求，在很大程度上降低了商家的经营成本，提高了商家的工作效率[3]，因此，网络商品销售网站不论从哪一方面来说都是非常值得去研究和设计的。（二）课题的目的与意义在我们的日常生活中，互联网无时不在，无处不在，比如大量电子销售平台的出现，其中不乏有网络商品销售网站。在信息化时代发展不迅速的时候，人们购物只能线下购物，购物过程繁琐且耗费时间，为了解决这种问题，大部分购物类网站接连出现，所以本文研究了基于HTML5的网络商品销售网站。网络商品销售网站是一种具有强大交互功能的购物网站，他向用户提供商品，信息等资源，比如资讯信息，留言反馈，还有商品的价格信息，图片信息等，可以使用户和商家较为方便的传递信息，而且满足了消费者足不出户便可购买自己想要的东西的心理，为商家和用户提供了便利的购物方式。网络商品销售网站平台拥有高度的自主性，商品销售网站的框架布局，版面设计可以按照自己想要的效果来实现，使其独具一格，网络商品销售网站的使用使购物过程变得轻松，便利，现已吸引大量的消费人群。（三）课题的研究现状改革开放以来，我国经济都在增长，互联网的出现，继而产生兴起了网上购物。这也引得国内外的企业纷纷转入中国市场，引起了一股网络热潮。在我们的大中国，新兴的网上购物商城从没有到现在的多样化也就过了不长的时间。从网上了解到我国意义上的第一次网上购物大约是在二十世纪末,网上出售景泰蓝,虽然买这个商品货款支付方式并非在网上支付，是在现实世界中用货币交换的，但这也算是成功地在我国的零售行业打响了网上购物的第一枪。网络购物大约是在二十世纪末得到大众的普遍接受。伴随着网络的迅速发展，我国的网上购物商城变得数不胜数，这对我国经济的增长起到了促进的作用。现在随着网上购物的发展，必然会出现各种各样的问题，比如商品的真实性、商品的质量问题、支付是否安全、商品配送及时不及时、售后的服务好不好、交易是否受法律保障等，从侧面观察网上商城网上购物这几年的发展，这些很容易出现的问题不好的地方都在不断的发展和完善完备中。因为信用口碑是随着时间不断积累的，技术是随着时间不断进步的，售后服务也变得越来越来越人性化，法律保障也在不断完善，只要是在向好的方向发展，这些问题的处理也就变得简单化起来。因此展望未来，未来网上购物的发展前景，必然会随着科技的进步，人类的智慧发展，而前途光明，形势大好。因为，人们工作越来越紧张，时间也必然越来越珍贵，所以网上购物是一种趋势，是时代的必然产物，越来越受到广大普通老百姓的青睐，世界互联网经济的蓬勃发展对中国经济的飞速发展起到很大的推进作用。二、网站开发环境分析及相关知识概述（一）网站开发环境本网站开发环境：JAVA+Spring+SpringMVC+Maven

开发工具：Eclipse

浏览器：GoogleChrome

操作系统的环境：Windows7

数据库：mysql数据库工具：Navicat

Web服务器：Tomcat（二）HTML5及Css3知识相关概述 HTML（HyperTextMarkupLanguage超文本标记语言）是一种用来制作超文本文档的简单标记语言[5]。HTML加CSS3可以很好的实现页面效果。CSS3是CSS技术的升级版本，现在的浏览器基本都支持CSS3属性。CSS3具有许多特性：如CSS3选择器；CSS3转换和变形:2D转换,3D转换；CSS3过渡等；CSS3使页面布局更加完善，页面更加美观。 （三）JAVA简介Java语言是一个面向对象的编程语言，具有强大的功能和方便使用的特点[6]，而且Java开发时使用接口，摒弃了对多重继承和指针的使用，因此很大程度上降低了程序的复杂程度。Java语言是体系结构中立的，是多线程、动态性的也是高性能的，这些强大的特性使得Java语言非常受欢迎，且广泛用于分布式系统和嵌入式系统应用程序开发中。Java开发过程需要jdk的开发环境，安装了jdk环境之后才可以进行Java程序的开发。（四）数据库知识相关概述数据库是系统开发过程中不可缺少的一部分。MySQL数据库可以和Java等语言结合设计出简单的项目，MySQL是一款完全免费的数据库系统，非常实用，并且他可以在大多数的操作系统中使用、运行，具有体积小，简便、易于操作，存储和读方取速度很快的优势。本网站中使用数据库，有助于数据的管理，简化了项目的实际操作。（五）SSM框架SSM框架就是Spring

+

SpringMVC

+

MyBatis的缩写，Spring技术主要是用来管理Java的，他能解决开发中遇到的大部分问题，可以让开发者设计出更好的项目，他能对Springmvc和Mybatis框架进行操作和管理。SpringMVC技术是由模型，视图，控制器组成，常常用于控制器的分类工作模式，与模型对象分开，这样的分类模式能更方便的进行定制及操作控制。MyBatis是一个良好的可持续性框架，支持普通SQL查询，在每次与数据库交互时，通过sqlSessionFactory拿到一个sqlSession，再执行sql命令。三、需求分析需求分析是系统开发过程中不可忽略的一个重要环节，也是其他环节工作得以有序开展的基本前提。本质上来看，它的首要任务就是“怎么做？”主要的目标体系是什么？在这个阶段，设计人员通过系统获取到价值信息，然后将这些信息与用户需求进行结合，以达到规范设计的要求[2]。需求分析的目的是确定用户的需要并对用户所要实现的功能提出直观、准确、完整的方案。（一）网站功能需求1.网站设计目标了解并掌握开发网站的相关知识，打造一个供商家展示并售卖商品，用户浏览并购买商品的网络商品销售网站是此次网站的设计目标。2.网站功能需求网络商品销售网站一方面展示各种商品进行售卖，另一方面也需要对用户以及商品等进行管理，因此从管理员需求以及用户需求两方面开展研究管理员是负责网站的维护者，比如需要对网站里的商品进行管理，商品的价格是否需要调整，库存是否还有多余等，这些通过管理员来管理以便网站能正常运行，管理员部分需求如下所示：1.用户管理：可以展示用户的个人信息，如用户名，电话，邮箱等信息，可以通过对用户姓名的搜索进行查询。2.商品管理：更改商品类别、商品价格、是否进行售卖、上传商品图片供用户查看了解，对商品所属的类别和品牌进行管理，用户可以根据自己所喜欢的类别以及品牌等来购买商品。3.订单管理页面：可以及时查看到用户提交的订单，及时反馈；在商品库存不足或无法发货时，可在订单里查看到购买本商品的用户并及时通知，用户提供准确的订单号，可更快地查询到该订单的完整信息。用户是网站的使用者，以后在进入网站之后可以浏览商品，当用户想要购买商品时需要进行登录以及填写个人信息才能进行购买，因此网站至少有登录注册以及商品展示等功能，用户部分需求如下所示：1.用户登录注册按钮在网络商品销售网站首页上，非常明显，让用户登录注册更加方便快捷。2.在网络商品销售网站首页可以直接看到正在热卖的商品，点击按钮可以了解商品对应的信息、商品详细简介，可以添加购物车并进行购买，商品销售网站首页使用轮播图效果来吸引眼球，在系统后台可以查看以往的订单信息，了解以往个人的消费记录。也可以修改个人信息。（二）网站可行性分析1.操作可行性可操作性主要是指网站设计完成后，用户的使用体验度，本网站的设计界面特别简单，也具有一定的美观性，通过网站页面的导航条可以有目的的进行查看自己想要查看的内容。对于网站的操作，和淘宝等购物网站的操作类似，只需对用户简单培训，用户便会使用，特别简单方便。所以在系统的可操作性是完全可以的。2.经济方面经济的可行性研究主要是对系统开发成本的分析，在本系统的开发过程中，投入的资金较少，资源的使用也比较少。本系统作为一个中小型网站，开发过程中网站所投入的硬件实施费，网站维护费都相对较少。本系统的开发，是把学习过的知识转化为实践的过程，利用学过的知识，已有的软硬件支持，实现一个比较实用的项目，所获得的回报远比支出的多，现实中应用此网站，可以满足用户购物的需求，也可以降低商家的开支，具有很大的优势，因此经济方面是可行的。（三）项目设计原则为了更好的实现本网站，提高用户的体验感，在设计该网站时，需要考虑一些设计上的原则问题。本网站的主要设计的原则如下所示：整体性原则从整个网站的角度出发，设计网站的数据构造，网站的总体构造等，保证网站的统一性。高可靠性原则在设计网站时，需要考虑到网站的稳定性和可靠性，只有网站稳定可靠了，才会被更多的人使用。3.可扩展性在设计网站时，应当具有远瞻未来的眼光，尽最大的能力让网站可以适应未来可能需要的需求。（四）总体结构在总体设计中，对网站的功能进行了解并设计一个总体框架，明确各个模块的功能以及联系。1.网站的总体结构设计网站的总体结构设计图是开发该商品销售网站的基础，通过这个总体结构图可以大致了解该网站的功能，本系统的功能都是根据此功能图开发的，网站主要分为用户和管理员，用户进入网站之后，会看到一个导航条，包含最新资讯，全部商品，日常用品，洗漱类，衣架类，限时出售，在线留言以及个人中心等，用户可以根据自己的实际情况进行选择浏览或购买，管理员主要是对网站进行管理，包括业务管理，统计分析，系统设置等，保证网站的正常运行。如图3-1所示图3-1系统功能结构图2.网站的流程分析系统流程图可以更方便的帮助用户了解网站销售的流程，用户或者管理员可以更好的了解平台购物或管理的流程，在本系统中，管理员具有很重要的作用，他的基本工作是对数据的增删改查，可以对用户会员的基本信息进行修改，删除，可以对商品的价格，数量等信息进行修改，还可以把不想出售的商品删掉。部分流程图如图3-2所示。图3-2系统流程图3.数据流图数据流程图能清晰准确的展示数据的流动情况，可以直观的观察到下一步将要执行的操作，有助于程序员开发代码[12]。通过绘制数据流程图，可快速的查看数据流入流出的情况，帮助我们了解数据走向，在本系统中，把数据流图分为三层，用户层、管理层、数据层。用户层主要是显示用户所看的商品信息。管理层主要是添加修改商品信息，处理订单信息以及管理用户信息等，数据层主要是存储数据，为其它层提供数据支持。系统数据流图如图3-3所示：图3-3数据流图数据库的设计与实现数据库是完成一个项目必不可少的重要组成部分，也是整个项目的核心内容。（一）数据库的概念结构设计概念结构设计是了解用户需求，并对其进行分析，抽象转化成一种信息结构的过程。1.概念结构设计的目的概念结构设计阶段的终极目标是整理获得的用户需求信息，将其抽象、归纳、转化成一种独立的概念模型，有利于开发人员更好的获取平台及用户的需求，便于开发。2.概念结构设计的过程本平台中的用户进行登录注册进入平台主页面，进行相应功能的查看，以及商品的购买等功能，后台管理页面可以通过前台页面点击进入，进入管理系统后，可以实现对资讯，品牌，会员，商品，订单，评价等页面进行管理。如下图4-1所示：图4-1E-R图当您进入系统时,首先将进入一个登录界面,只有登录进去之后才能查看商品进行购买，登录时，网站将会检查您的用户名,密码是否正确，正确将进入网站首页然后进行相应的操作，错误则重新登录，否则将无法进入。该系统的操作过程框图如下表4-2。图4-2系统操作流程图（二）数据库的逻辑结构设计数据库逻辑结构设计就是将在概念架构阶段已经设计的基础实体-关系图改变成一个能够完全符合系统生产所需要的数据模型。由于该平台所实现的主要功能是对商品资源的展示查询及购买，后台可以实现对商品资源、价格等的管理。因此设计订单表，商品表等来存放用户的购买数量等信息，这样的逻辑结构设计，不但方便了对数据的存储，也更好地实现了对表的管理，最后更加有利于开发人员对数据库的使用，提高对数据资源的调整以及开发效率，给用户带来愉悦的体验感。对于用户实体，根据用户所需要的需求，做出了如图4-3的实体图图4-3用户信息实体属性图用户是此网站平台的主体，网站的一切服务都是围绕用户来做的，在此E-R图中，用户作为主体，在注册信息之后进行登录，登录进页面之后，用户可以浏览全部商品，也可以根据商品分类进行分类别查看，用户还可以浏览最新资讯，进行了解网站的最新消息，网站中还会有限时出售的商品，用户可以根据自己选择进行购买，用户还可以进入个人中心进行个人信息的修改，让用户使用起来简单方便。对于订单这个实体，我根据订单所需要的功能，做出了如图4-4的实体图图4-4订单信息实体属性图用户登录商品销售网站，浏览商品的具体信息，当看到自己想要的物品时，点击按钮即可查看商品详情，浏览完成后,即可再次进行网上购买，在商品的选择完成后,会产生一个商品的订单，用户也可以根据这个订单的信息状态来查询自，要购买的商品和价格。订单信息为作为购买者的主体，和订单号，购买数目，金额，购买者，电话等信息形成一对一的联系，订单信息可以保证用户的权益，也可以让管理员更好的管理商品。（三）数据库物理结构设计数据库物理结构设计是根据数据库逻辑结构，给数据提供一个可操作执行的空间，并提供一些存储过程及方法的设计。1.确定数据库物理结构以及设计关系关于product表：商品信息表。如图4-5所示：图4-5商品信息表用户可以根据自己的爱好来查看物品的信息，包括物品名称，物品价格，商品的类别，商品是哪一品牌提供的，推荐人数是否比较多，以及商品图片看上去是否符合自己喜好等来选择自己喜欢的商品，有些商品还是特价商品，使用过后可以进行推荐。关于member表：会员表。如图4-6所示：图4-6会员表本平台采用会员制，用户如果是会员的话购买商品时可以特价购买关于dingdan表：订单表。如图4-7所示：图4-7订单表在用户的实际订单之中，需要包含订单编号，数量，金额用户的下单时间以及付款状态，发货状态等，让用户可以很方便的查看自己的订单信息。关于backmsg表：退货表。如图4-8所示：图4-8退货表在用户购买商品后如果发现不满意或者存在质量问题等，用户可以申请退货，在退货订单中，需要包含订单编号，数量，退货时间，退货原因以及申请状态等，让用户可以很方便的查看自己的退货信息。关于msg表：留言表。如图4-9所示：图4-9留言表用户可以登录本平台进行商品的浏览购买等，使用过后可以进行留言，评价商品，以便以后的用户参考。2.评价物理结构数据库在系统的物理架构中具备着非常重要的地位,因此在系统建立的过程中，多次地调整了系统所配置的变量，切实地改进了系统的性能,通过对时间效率，空间效率的维护成本和各类用户需求的评估进行了权衡，比较，选取上述架构作为系统的主体。五、系统测试（一）测试定义及目的一个网站的开发，在开发完成时，不可能没有一点错误，因为开发人员不是万能的，开发人员也无法预测未知的错误，因此在完成网站的开发之前，对网站进行多次测试，通过测试，可以发现问题并进行解决，确保在功能上没有缺陷，在界面显示上没有乱码等问题，给用户带来更好的使用感。（二）测试的方法白盒测试和黑盒测试分别是测试中一种比较普遍使用的方式,功能测试也叫黑盒测试，主要是针对程序功能能够按照系统设计正常实现相应功能的一种检测，它是通过一个测试器，在程序的接口上进行,检测一个程序所输入的数据是否正常，与外部信息之间的交流是否全面等。测试中，我们最多的运用黑盒测试。检测网站功能是否正常，如登陆注册等功能检测网站界面，浏览器是否兼容（三）测试的结果通过该网站的测试可以了解到，该网站能够基本实现所设计的功能，满足用户的需求，能够对商品进行增删改查，该网络商品销售网站基本功能都是可行的，成功实现了前台、后台以及数据库的连接。经过测试，本网站可以投入使用。如下表5-1，表5-2，表5-3，表5-4所示：表5-1用户及管理员登录页面测试用例测试名称操作描述数据实际结果是否通过用户登录测试输入用户名，输入错误密码，点击登录按钮用户名，错误的用户密码是用户登录测试输入错误的用户名和密码点击登录按钮错误的用户名密码是管理员登录测试输入正确的管理员用户名和密码点击登录按钮正确的管理员用户名和密码是

表5-2删除会员测试用例：测试名称操作描述期望结果实际结果是否通过删除会员测试删除昵称为冬冬的会员删除成功、页面自动跳转删除成功、页面自动跳转通过表5-3修改管理员密码测试用例：测试名称操作描述数据实际结果是否通过修改管理员密码测试输入管理员错误的原密码，新密码和确认密码管理员原密码，新密码，确认密码通过修改管理员密码测试输入管理员正确的原密码，新密码和确认密码管理员原密码，新密码，确认密码通过

表5-4兼容性及响应速度测试：测试内容测试方法测试结果兼容性使用不同的浏览器测试2345浏览器缩放到50%2345浏览器正常搜狗浏览器缩放到85%搜狗浏览器正常六、总结本次设计主要是围绕基于html5的网络商品销售平台展开的，通过小组成员的不断努力，本项目一开始定的功能如用户通过登录注册进入网页，可以挑选自己心仪的商品并进行购买，这一系列流程都已实现，还有管理员以及用户可以查看订单，留言等内容。在与组员合作完成本网站的时间，让我明白了实践出真理的意义，只有自己动手操作，才能够巩固所学的知识，通过这次课题的研究，也让我学习到了很多无法在课本上能学习到的知识，而且也提高了自己动手实践的能力。不仅如此，在毕业设计的过程中也让我明白了合作的重要性，团结就是力量，与伙伴或者同事做任何事都需要团结。本次开发的网站，功能相对来说较为简单，但基于用户需求方面的内容都已经基本实现，具有很大的现实意义，但也有一些不足，如无法与商家取得真正的合作因此无法发货，希望日后能够与各大供货商连接，做出一个完整的购物网站。在今后的学习生活中，一定会更好的去学习知识，希望自己可以建设国家，做一个有用的人。参考文献[1]何静,谭新民.基于J2EE的网上购物商城的设计[J].山西电子技术,2008(1):66-68.[2]衡友跃.基于MVC模式的网上购物商城应用研究[J].淮北职业技术学院学报,2008,007(001):77-79.