汽车销售网站的设计与实现网页前端与网站功能测试-大学毕业设计.doc

《汽车销售网站的设计与实现网页前端与网站功能测试-大学毕业设计.doc》由会员分享，可在线阅读，更多相关《汽车销售网站的设计与实现网页前端与网站功能测试-大学毕业设计.doc（21页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、汽车销售网站的设计与实现 网页前端与网站功能测试 摘要：随着社会的进步，科学技术也进行了飞速的发展，网络已经成为了人们在日常生活中不可缺少的一部分。网络给人们的生活带来了方便、快捷，人们越来越想在方便的时间购买到自己心仪的商品，逛实体店又会很累，于是，网上购买汽车便成了人们向往的事情。网页前端页面是在Dreamweaver平台上，用HTML语言编写内容、DIV+CSS实现布局。在编写代码时把握层级简单清晰、标签使用规范、文件命名规范、注释恰到好处等原则。用功能测试的方法对本网站整体功能进行了测试，使其能满足用户需求。 关键词：电子商务；汽车销售网；网页前端；测试Abstract：With th

2、e development of science, Science and technology hasmaderapid development ,The network has already becomean indispensablepart ofpeoplein daily life. The networkbrings convenience to peoples lives,fast, More and more peoplewant tobuytheir favorite goodsat a convenienttime, Around thestoreandwill be v

3、ery tired ,so Online purchase ofcarswill become an alluring things.Web site is in the front page Dreamweaver platform, Written in HTML content, DIV + CSS layout. When writing code to grasp the simple clear hierarchy, labels, specifications, such as file naming conventions, comments the right princip

4、le. Overall this site using the method of functional test functions were tested, make its can meet user requirements.Key words: Electronic commerce; Car salesnetwork; Webpagefront; Test1 绪论1.1 课题背景随着互联网的普及和电子商务的兴起，网上进行汽车销售是互联网电子商务在销售行业发展的必然结果，这种新型的汽车销售形式，与传统利用实体店进行销售的方式相比拥有许多优势：一是降低了销售成本；二是利用网络作为商家与

5、消费者的交易平台，改变传统的交易方式，使得交易活动不受空间、时间的限制；三是汽车信息的传递更迅速灵活。汽车销售网站的主要功能是利用网站作为交易平台，将汽车的一些基本信息展示在网页中，客户可以通过登录汽车销售网站来查看汽车销售信息并提交订单订购汽车，实现在线交易。2 可行性分析2.1 社会可行性随着计算机技术的发展和网络人口的增加，网络世界也越来越广博，越来越丰富，网上购物已经成为互联网娱乐的的一股潮流。据一家数据公司的统计，今天的互联网有17亿用户。而目前的全球人口为67亿，到2020年会有更多的人使用互联网。网民队伍的迅速扩充，无疑为汽车销售的发展提供了巨大的市场空间。2.2 技术可行性该网

6、站前端页面主要是利用Dreamweaver平台，采用HTML+CSS技术实现效果，部分特效需要用JavaScript或者jQuery同时实现。测试时利用功能测试方法，对整个网站的功能进行连贯测试。HTML+CSS开发方面具有方便快捷、使用灵活的特点，以及目前的广泛实际应用，因此本系统在技术方面可行。2.3 操作可行性大多数计算机都能运行本网站系统，其安装、调试、运行不会改变计算机系统原先的设置和布局，并且网页简单大方，提示信息完整，功能齐全，用户由相关人员简单讲解便能够自主进行方便的操作。2.4 系统的技术介绍2.4.1 HTML+CSSHTML（HyperText Mark-up Langu

7、age）是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。HTML文件的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。2.4.2 JavascriptJavaScript主要有如下特征：JavaScript 被设计

8、用来向 HTML 页面添加交互行为； JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）；JavaScript 由数行可执行计算机代码组成； JavaScript 通常被直接嵌入 HTML 页面；JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）； 所有的人无需购买许可证均可使用 JavaScript。 2.4.3 JQueryJQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷，例如操作文

9、档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。2.5 开发平台及运行环境2.5.1 前端开发平台本网站的前端开发平台是利用Dreamweaver软件，是检验Web战队和应用程序的专业工具。他将可视布局工具、应用程序开发和代码编辑支持组合在一起，其功能强大，是的各个层次的开发人员和设计人员都能够开苏创建给予标准的网站和应用程序的优美界面。 Dreamweaver提供了专业人员在一个集成、高效的环境中所需的工具。2.5.2 运行环境操作系统：Windo

10、ws XP以上版本。手机系统：Android系统与iOS系统均可服务器软件：Tomcat 6.0以上版本浏览器：IE、Fire Fox、Google Chrome等主流浏览器3 需求分析3.1 系统功能模块概述根据用户的需求陈述，可以确定本项目分为PC端和手机版，其中PC端分为：客户端和管理端。客户端主要展示销售车辆信息，最新活动信息。提供汽车销售信息的订单添加功能。为客户提供联系方式。停工销售汽车相关信息的检索功能。方便用户查询汽车的相关信息。管理端主要对车辆信息进行全面管理。通过后台管理各类订单（订购）信息，提供订单提供查询，增加，修改，删除功能。对用户信息进行管理，提供查询，增加，修改，

11、删除功能。对用户预约试驾信息进行管理，提供查询，增加，修改，删除功能等。手机版网页主要是方便用户对本网站的浏览，随时可以了解汽车的各种信息。3.2 系统功能模块设计完整的汽车销售网站包括多个模块，主要分为前台模块和后台模块，通过整合，它们形成一个完全集成的基于Web的方案。汽车销售网站前台模块主要分为车型展示、最新活动、买家指南、售后服务、联系我们、登陆注册等。后台模块主要分为商品类别管理、商品信息管理、订单处理、用户信息管理等。如下图所示：图 3.2.1 系统功能模块图4 网站前台设计与实现4.1首页设计网站的首页是必须具备的，也是一个网站形象的象征。所以首页的设计我们把握了简洁大方、信息齐

12、全的要点，在进行前端切图时，把它分成头、中、尾三个部分进行布局。图4.1.1 首页设计图1) 网页head部分，在任何页面点击logo网页都会跳转到首页，导航栏的文字点击都能够进入相应的页面：图4.1.2 首页头部图分为两个大的Div，一个div的class=top； 这里主要是实现顶部导航栏，logo，搜索框的布局。 另一个div的class=banner；这里主要模块是对车型排行榜的展示，用户可以点击任何一种车型标题进入相应的汽车详情页进行浏览。2) 网页center部分，点击购物车、收藏夹图标，页面会跳转到购物车、收藏夹相应页面，客服咨询这块能把你的疑问直接和客服进行交流：图4.1.3

13、首页中间部分图在布局时分为左右两个大的Div，左边部分主要是新车展示的基本信息，鼠标移到图片上，图片会放大，实现代码为：img.xz-webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; transition: all 0.4s ease-in-out;img.xz:hover-webkit-transform:scale(1.2);-moz-transform:scale(1.2);transform:scale(1.2);z-index:3;position:relative;img.xz

14、2:hover-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);transform:rotate(20deg);width:310px;height:200px;右边部分包含的模块有收藏夹、购物车入口，最新活动，最近浏览的车型，客服入口。3) 网页foot部分，展示了我们公司的联系方式，方便用户有需要是和我们进行交流：图4.1.4 首页底部图4.2车型展示设计车型展示页面就是对本公司所经营的所有车型，按照品牌、座驾数目、功能等特点进行集中展示，供用户在这个平台上能方便快捷地了解到自己心仪的商品。本页面在进行代码布局时，分为

15、了五个版块：1) 网页head部分：这里和首页的代码一样，但是少了class=banner的div2) 网页heashow部分，点击车型分类能够进入相应的所有品牌的这款车型页面，点击字母查询，是跳转到品牌首字母的对应版块：图4.2.1 车型展示分类图这个版块整体会随着页面的滚动而始终固定在顶部，这个效果用JS代码实现：$(window).scroll(function () if (jQuery(this).scrollTop() 176) jQuery(.heashow).addClass(scrolled);jQuery(#center).css(marginTop,120px); els

16、e jQuery(.heashow).removeClass(scrolled);jQuery(#center).css(marginTop,20px););$(document).ready(function()var $a = $(.showmain h3 a);$a.click(function() var href = $(this).attr(href); var pos = $(href).offset().top-105+px; $(html,body).animate(scrollTop: pos, 1000); return false;); );3) 网页center部分，

17、是以品牌首字母的顺序进行排序展示：图4.2.2 车型展示中间部分图这个模块主要是用div+dl、dt、dd进行嵌套实现效果。4) 网页fd2部分：图4.2.3 车型展示快捷入口图这部分主要是展示自己的收藏夹和购物车的快捷入口，无论页面滚动与否，它都会一直显示在网页的右侧中间位置，方便用户随时进入相应页面。实现其固定的主要代码为：.fd2position:fixed;width:100px;height:200px;top:210px;right:0px;z-index:99;5) 网页foot部分与首页实现方法一样。4.3车型展示内页设计车型展示内页是展示某个品牌下的所有车型，每一辆汽车图片下

18、显示了本车的部分基本信息和用户需求指引按钮。本页面在进行代码布局时，分为以下几个版块：1) 网页heashow部分，这个版块整体会随着页面的滚动而始终固定在顶部，这个效果用JS代码实现（同车型展示效果相同）：图4.3.1 车型展示内页设计分类图2) 网页center部分，在这里又把页面分为左右两个部分：左边是展示某个品牌下的所有车型，在对应汽车下方的基本信息处，然后点击“加入购物车”就可以把图书添加到购物车中，并且会到达购物车列表页面；然后点击“收藏”就可以把图书添加到收藏夹中；然后点击“预约试驾”，页面就会跳转到预约试驾登记信息：图4.3.2 车型展示内页展示图右边主要包含了三个板块：客服咨

19、询、最新活动、最近浏览的车型，实现的方法和首页一样。4.4最新活动设计最新活动页面主要就是展示本公司正在举行的汽车活动，包含的汽车的部分基本信息，点击汽车图片进入相应汽车的详细信息网页。本页面在进行代码布局时，分为以下几个版块：1) 网页center部分，在这里又把页面分为左右两个部分：左边是展示某个品牌正在进行活动的车型，点击汽车图片进入相应汽车的详细信息网页：图4.4.1 最新活动展示图右边主要包含了两个板块：客服咨询、最近浏览的车型，实现的方法和首页一样。4.5最新活动内页设计最新活动内页页面主要就是用户在最新活动页面点击了某一款车型后，所跳转的关于该车型的活动详情，主要展示了这款汽车进

20、行活动的详细信息，旁边有用于登记参加活动的用户信息登记表，用户填写好自己的基本信息后，公司会把后续内容告知用户，并进行跟进。本页面在进行布局时，分为以下几个版块：1) 网页center2部分，在这里又把页面分为左右两个部分：左边是展示该车型的活动详情：图4.5.1 最新活动详询图右边是用户进行报名登记的一个表格：图4.5.2 最新活动报名图实现代码如下： 4.6售后服务设计本页面主要介绍售后服务包含的内容。本页面在进行代码布局时，分为以下几个版块：1) 网页center部分，在这里又把页面分为左右两个部分：左边是关于售后服的介绍，给用户展示我们售后服务的方式、理念，让用户体会到我们用心的服务：

21、图4.6.1 售后服务详解图右边主要包含了三个板块：客服咨询、最新活动、最近浏览的车型，实现的方法和首页一样。4.7顾客评论设计顾客评论页面主要是顾客对某一车型进行满意度评价的平台。本页面在进行代码布局时，分为以下几个版块：1) 网页center部分：图4.7.1 顾客评论设计图4.8买家指南设计本页面主要给用户提供在购买汽车时的流程，使得用户能方便并迅速地购买汽车，不会再遇到不了解信息而不知道怎么做，这是考虑到用户体验的因素本页面在进行代码布局时，分为以下几个版块：1) 网页center部分，在这里又把页面分为左右两个部分：左边是关于买家指南流程：图4.8.1 买家指南流程图右边主要包含了三

22、个板块：客服咨询、最新活动、最近浏览的车型，实现的方法和首页一样。4.9试驾设计试驾页面主要是针对希望对某一车型进行试驾时，在网上填写资料进行预约试驾。本页面在进行代码布局时，分为以下几个版块：1) 网页center部分：图4.9.1 试驾报名登记图4.10结账设计本页面是用户选择了汽车，点击“购买”按钮下订单后，出现的结账界面。包含了四个流程块：订单信息确认界面图4.10.1 订单确认图提取方式页面图4.10.2 提取方式展示图支付信息页面图4.10.3 支付界面图订单总览页面图4.10.4 订单总览图5 功能测试5.1 测试的目的对汽车销售网站项目中所有的功能模块进行测试，分为PC端和手机

23、版的功能，查找并分析不足，并总结测试过程的成功经验与不足，以便今后能更好的开展测试工作。5.2 测试方法功能测试（Functional Testing），对产品的每一项功能进行验证，根据测试用例，逐项测试，检查产品是否达到用户的要求。根据产品特征、操作描述和用户方案等文档，测试该产品的特性和可操作行为，确认它们是否满足用户的需求。5.3 测试用例整个网页的功能模块较多，测试内容篇幅较大由于功能模块较多，测试内容篇幅较长，所以在本论文中只展示PC端前端页面搜索框、新用户登录、新用户注册测试用例，PC端后台商城用户管理、活动管理测试用例，针对手机版只是对其进行了基本的页面链接跳转的测试，从测试结果

24、可以发现与预期结果完全一致。表5.3.1 搜索框测试用例表测试用例名称搜索框测试用例标识QCXSW-SSK目的描述测试网站在用户进行关键词搜索的功能前提/约束成功安装Tomcat，Mysql数据库5.1版本，主流浏览器序号测试活动预期结果评价准则1在文本框中，输入有效关键词（奥迪），点击“搜索”按钮显示搜索到的记录条数及详细信息与预期结果一致2在文本框中，输入无效关键词（geej），点击“搜索”按钮显示搜索到0条记录与预期结果一致3在文本框中，不输入任何关键词，点击“搜索”按钮显示搜索到0条记录与预期结果一致表5.3.2 新用户登录测试用例测试用例名称新用户登录测试用例标识QCXSW-DL目的

25、描述测试软件的用户登陆功能前提/约束成功安装Tomcat，Mysql数据库5.1版本，主流浏览器序号测试步骤预期结果评价准则1在页面中点击登陆，进入用户登陆页面，在“用户名”、“密码”文本框中，依次输入相应的内容，点击“登陆”按钮显示登陆成功与预期结果一致2在页面中点击登陆，进入用户登陆页面，在“用户名”、“密码”文本框中，依次输入内容不匹配，点击“登陆”按钮显示用户名与密码不一致与预期结果一致3在页面中点击登陆，进入用户登陆页面，在“用户名”、“密码”文本框中，依次输入随机内容，点击“登陆”按钮显示用户名不存在与预期结果一致表5.3.3 新用户注册测试用例测试用例名称新用户注册测试用例标识Q

26、CXSW-ZC目的描述测试软件的用户注册功能前提/约束成功安装Tomcat，Mysql数据库5.1版本，主流浏览器序号测试步骤预期结果评价准则1在页面中点击注册，进入用户注册页面，在“邮箱”、“手机”、“用户名”等文本框中，按照标准要求依次输入相应的内容，并进行用户名是否有重复的检测及邮箱验证，点击“注册”按钮显示注册成功与预期结果一致2不进行邮箱中的链接激活验证用户名不可用与预期结果一致3用户名提示重名提示用户名不可用与预期结果一致4手机号码位数错误或者输入为非数字提示手机号码错误与预期结果一致5创建密码与确认密码内容不一致提示密码不一致与预期结果一致6验证码输入错误提示请重新输入验证码与预

27、期结果一致表5.3.4 商城用户管理测试用例测试用例名称商城用户管理测试用例标识QCXSW-HT-SCYHGL目的描述测试软件后台对商城用户数据进行查询、删除、禁用（启用）操作前提/约束管理员登陆成功（用户名：admin 密码：123456）序号测试步骤预期结果评价准则1按管理员名登录后，进入后台首页2单击用户管理模块，查询商城用户信息，点击姓名，进入详细信息页面 页面显示出用户的基本信息与预期结果一致3单击“删除”按钮，删除对应的用户信息提示删除成功与预期结果一致4单击“禁用（启用）”按钮，使该用户账号不能再在本网站使用提示禁用（启用）成功与预期结果一致表5.3.5 活动管理测试用例测试用例

28、名称活动管理测试用例标识QCXSW-HT-HDGL目的描述测试软件后台对商城汽车的活动数据进行查询、添加、修改操作前提/约束管理员登陆成功（用户名：admin 密码：123456）序号测试步骤预期结果评价准则1按管理员名登录后，进入后台首页，进入活动管理版块2选择条件进行所需的活动信息的查询页面显示活动的基本信息列表与预期结果一致3点击“编辑”“修改”按钮，对活动进行不同的操作提示操作成功与预期结果一致5.4 测试结论经过测试小组的努力测试，本软件的各项功能基本实现，达到了我们预期的效果估计。整个网站系统测试执行期间，项目组开发人员高效地，及时解决测试组人员提出的各种缺陷，在一定程度上较好地保

29、证了测试执行的效率以及测试最终期限。另外，部分功能在设计上仍存在不足之处。需求提出方可以在使用该系统的基础上，继续搜集用户的使用需求反馈，并结合市场同类产品的优势，在今后的版本中不断补充并完善功能。6 总结通过编写汽车销售网站的前端部分页面和网站的整体功能测试，我较全面的掌握了前端技术的基本知识，从中也总结了很多经验，我自身的前端页面编写能力也得到了很大的提升，在实现部分动态效果时，查阅了大量资料，咨询老师、上互联网查看，这个过程中我的交流能力、查询资料能力也有显著增加，同时自己的技术也是得到了极大的提升在网页实现过程中我学到了很多经验：在开始着手编写代码之前，先对整个页面进行观察，版块布局自

30、己要清楚，意识中搭好框架，不同的版块是用什么样的标签实现，这是为了在编写时提高速度必须考虑的；写标签时，要坚持简单、层级关系清晰、实现效果明显等原则，这样才能做出规范的网页。7 致谢在论文完成之际，我首先要向尊敬的涂峰老师表示最诚挚的感谢。在论文写作期间，优秀的涂峰老师指导我们进行毕业设计，并经常询问我们毕业项目设计的进展情况，当知道我们遇到技术问题时，总是耐心地指导我们，无论讲解多少次都没有不耐烦的表现。涂老师的敬业精神深深地感动了我，没有老师细心指导我的项目设计，我就不可能顺利、按时的完成，再次对您表示衷心地感谢。同时也很感谢我们的小团队，虽然人数不多，但是大家遇到问题都一起讨论解决，把自

31、己负责的模块完成得很好。本次毕业设计，是我们团队共同努力的结果，很高兴能为这次设计画上圆满的句号。最后，对在忙碌地工作中挤出时间对我的论文进行评审，并提出宝贵意见的老师们表示衷心地感谢！参考文献1 贾伟,网页制作技术M，北京:中国物资出版社，20022 杜黎强,前端网页设计M，机械工业出版社，20133 张晓红.网站前端模块化开发策略研究.计算机时代M，20134 朱印宏.CSS商业网站布局之道M，北京清华大学出版社，20075 网上购物系统-需求规格说明书6 网上购物系统测试计划，江伟雄、魏胜权，20087 古乐,史九林编著，软件测试技术概论.北京:清华大学出版社，20048 网上购物系统-测试用例模板第21页 （共21页）