汽车销售网站的设计与实现网页前端与网站功能测试.docx
- 文档编号:11932890
- 上传时间:2023-06-03
- 格式:DOCX
- 页数:22
- 大小:1.91MB
汽车销售网站的设计与实现网页前端与网站功能测试.docx
《汽车销售网站的设计与实现网页前端与网站功能测试.docx》由会员分享,可在线阅读,更多相关《汽车销售网站的设计与实现网页前端与网站功能测试.docx(22页珍藏版)》请在冰点文库上搜索。
汽车销售网站的设计与实现网页前端与网站功能测试
汽车销售网站的设计与实现
──网页前端与网站功能测试
摘 要:
随着社会的进步,科学技术也进行了飞速的发展,网络已经成为了人们在日常生活中不可缺少的一部分。
网络给人们的生活带来了方便、快捷,人们越来越想在方便的时间购买到自己心仪的商品,逛实体店又会很累,于是,网上购买汽车便成了人们向往的事情。
网页前端页面是在Dreamweaver平台上,用HTML语言编写内容、DIV+CSS实现布局。
在编写代码时把握层级简单清晰、标签使用规范、文件命名规范、注释恰到好处等原则。
用功能测试的方法对本网站整体功能进行了测试,使其能满足用户需求。
关键词:
电子商务;汽车销售网;网页前端;测试
Abstract:
Withthedevelopmentofscience,Scienceandtechnologyhas made rapiddevelopment,Thenetworkhasalreadybecome anindispensable partof people indailylife.Thenetwork bringsconveniencetopeople'slives, fast,Moreandmorepeople wantto buy theirfavoritegoods ataconvenient time,Aroundthe store and willbeverytired,soOnlinepurchaseof cars willbecomeanalluringthings.
WebsiteisinthefrontpageDreamweaverplatform,WritteninHTMLcontent,DIV+CSSlayout.Whenwritingcodetograspthesimpleclearhierarchy,labels,specifications,suchasconventions,commentstherightprinciple.Overallthissiteusingthemethodoffunctionaltestfunctionsweretested,makeitscanmeetuserrequirements.
Keywords:
Electroniccommerce;Carsales network;Webpage front;Test
1绪论
1.1课题背景
随着互联网的普及和电子商务的兴起,网上进行汽车销售是互联网电子商务在销售行业发展的必然结果,这种新型的汽车销售形式,与传统利用实体店进行销售的方式相比拥有许多优势:
一是降低了销售成本;二是利用网络作为商家与消费者的交易平台,改变传统的交易方式,使得交易活动不受空间、时间的限制;三是汽车信息的传递更迅速灵活。
汽车销售网站的主要功能是利用网站作为交易平台,将汽车的一些基本信息展示在网页中,客户可以通过登录汽车销售网站来查看汽车销售信息并提交订单订购汽车,实现在线交易。
2可行性分析
2.1社会可行性
随着计算机技术的发展和网络人口的增加,网络世界也越来越广博,越来越丰富,网上购物已经成为互联网娱乐的的一股潮流。
据一家数据公司的统计,今天的互联网有17亿用户。
而目前的全球人口为67亿,到2020年会有更多的人使用互联网。
网民队伍的迅速扩充,无疑为汽车销售的发展提供了巨大的市场空间。
2.2技术可行性
该网站前端页面主要是利用Dreamweaver平台,采用HTML+CSS技术实现效果,部分特效需要用JavaScript或者jQuery同时实现。
测试时利用功能测试方法,对整个网站的功能进行连贯测试。
HTML+CSS开发方面具有方便快捷、使用灵活的特点,以及目前的广泛实际应用,因此本系统在技术方面可行。
2.3操作可行性
大多数计算机都能运行本网站系统,其安装、调试、运行不会改变计算机系统原先的设置和布局,并且网页简单大方,提示信息完整,功能齐全,用户由相关人员简单讲解便能够自主进行方便的操作。
2.4系统的技术介绍
2.4.1HTML+CSS
HTML(HyperTextMark-upLanguage)是一种制作万维网页面的标准语言,是万维网浏览器使用的一种语言,它消除了不同计算机之间信息交流的障碍。
HTML文件的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。
CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。
CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。
2.4.2Javascript
JavaScript主要有如下特征:
JavaScript被设计用来向HTML页面添加交互行为;JavaScript是一种脚本语言(脚本语言是一种轻量级的编程语言);JavaScript由数行可执行计算机代码组成;JavaScript通常被直接嵌入HTML页面;JavaScript是一种解释性语言(就是说,代码执行不进行预编译);所有的人无需购买许可证均可使用JavaScript。
2.4.3JQuery
JQuery是一个兼容多浏览器的javascript框架,核心理念是writeless,domore(写得更少,做得更多)。
jQuery是免费、开源的,使用MIT许可协议。
jQuery的语法设计可以使开发者更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。
除此以外,jQuery提供API让开发者编写插件。
其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。
2.5开发平台及运行环境
2.5.1前端开发平台
本网站的前端开发平台是利用Dreamweaver软件,是检验Web战队和应用程序的专业工具。
他将可视布局工具、应用程序开发和代码编辑支持组合在一起,其功能强大,是的各个层次的开发人员和设计人员都能够开苏创建给予标准的网站和应用程序的优美界面。
Dreamweaver提供了专业人员在一个集成、高效的环境中所需的工具。
2.5.2运行环境
操作系统:
WindowsXP以上版本。
手机系统:
Android系统与iOS系统均可
服务器软件:
Tomcat6.0以上版本
浏览器:
IE、FireFox、GoogleChrome等主流浏览器
3需求分析
3.1系统功能模块概述
根据用户的需求陈述,可以确定本项目分为PC端和手机版,其中PC端分为:
客户端和管理端。
客户端主要展示销售车辆信息,最新活动信息。
提供汽车销售信息的订单添加功能。
为客户提供联系方式。
停工销售汽车相关信息的检索功能。
方便用户查询汽车的相关信息。
管理端主要对车辆信息进行全面管理。
通过后台管理各类订单(订购)信息,提供订单提供查询,增加,修改,删除功能。
对用户信息进行管理,提供查询,增加,修改,删除功能。
对用户预约试驾信息进行管理,提供查询,增加,修改,删除功能等。
手机版网页主要是方便用户对本网站的浏览,随时可以了解汽车的各种信息。
3.2系统功能模块设计
完整的汽车销售网站包括多个模块,主要分为前台模块和后台模块,通过整合,它们形成一个完全集成的基于Web的方案。
汽车销售网站前台模块主要分为车型展示、最新活动、买家指南、售后服务、联系我们、登陆注册等。
后台模块主要分为商品类别管理、商品信息管理、订单处理、用户信息管理等。
如下图所示:
图3.2.1系统功能模块图
4网站前台设计与实现
4.1 首页设计
网站的首页是必须具备的,也是一个网站形象的象征。
所以首页的设计我们把握了简洁大方、信息齐全的要点,在进行前端切图时,把它分成头、中、尾三个部分进行布局。
图4.1.1首页设计图
1)网页head部分,在任何页面点击logo网页都会跳转到首页,导航栏的文字点击都能够进入相应的页面:
图4.1.2首页头部图
分为两个大的Div,一个div的class=top;
这里主要是实现顶部导航栏,logo,搜索框的布局。
另一个div的class=banner;
这里主要模块是对车型排行榜的展示,用户可以点击任何一种车型标题进入相应的汽车详情页进行浏览。
2)网页center部分,点击购物车、收藏夹图标,页面会跳转到购物车、收藏夹相应页面,客服咨询这块能把你的疑问直接和客服进行交流:
图4.1.3首页中间部分图
在布局时分为左右两个大的Div,左边部分主要是新车展示的基本信息,鼠标移到图片上,图片会放大,实现代码为:
img.xz{-webkit-transition:
all0.4sease-in-out;-moz-transition:
all0.4sease-in-out;transition:
all0.4sease-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.xz2:
hover{-webkit-transform:
rotate(20deg);-moz-transform:
rotate(20deg);transform:
rotate(20deg);width:
310px;height:
200px;}
右边部分包含的模块有收藏夹、购物车入口,最新活动,最近浏览的车型,客服入口。
3)网页foot部分,展示了我们公司的联系方式,方便用户有需要是和我们进行交流:
图4.1.4首页底部图
4.2 车型展示设计
车型展示页面就是对本公司所经营的所有车型,按照品牌、座驾数目、功能等特点进行集中展示,供用户在这个平台上能方便快捷地了解到自己心仪的商品。
本页面在进行代码布局时,分为了五个版块:
1)网页head部分:
这里和首页的代码一样,但是少了class=banner的div
2)网页heashow部分,点击车型分类能够进入相应的所有品牌的这款车型页面,点击字母查询,是跳转到品牌首字母的对应版块:
图4.2.1车型展示分类图
这个版块整体会随着页面的滚动而始终固定在顶部,这个效果用JS代码实现:
$(window).scroll(function(){
if(jQuery(this).scrollTop()>176){
jQuery('.heashow').addClass('scrolled');
jQuery('#center').css("marginTop","120px");
}else{
jQuery('.heashow').removeClass('scrolled');
jQuery('#center').css("marginTop","20px");}
});
$(document).ready(
function()
{var$a=$('.showmainh3a');
$a.click(function()
{
varhref=$(this).attr("href");
varpos=$(href).offset().top-105+'px';
$("html,body").animate({scrollTop:
pos},1000);
returnfalse;});
}
);
3)网页center部分,是以品牌首字母的顺序进行排序展示:
图4.2.2车型展示中间部分图
这个模块主要是用div+dl、dt、dd进行嵌套实现效果。
4)网页fd2部分:
图4.2.3车型展示快捷入口图
这部分主要是展示自己的收藏夹和购物车的快捷入口,无论页面滚动与否,它都会一直显示在网页的右侧中间位置,方便用户随时进入相应页面。
实现其固定的主要代码为:
.fd2{position:
fixed;width:
100px;height:
200px;top:
210px;right:
0px;z-index:
99;}
5)网页foot部分与首页实现方法一样。
4.3 车型展示内页设计
车型展示内页是展示某个品牌下的所有车型,每一辆汽车图片下显示了本车的部分基本信息和用户需求指引按钮。
本页面在进行代码布局时,分为以下几个版块:
1)网页heashow部分,这个版块整体会随着页面的滚动而始终固定在顶部,这个效果用JS代码实现(同车型展示效果相同):
图4.3.1车型展示内页设计分类图
2)网页center部分,在这里又把页面分为左右两个部分:
左边是展示某个品牌下的所有车型,在对应汽车下方的基本信息处,然后点击“加入购物车”就可以把图书添加到购物车中,并且会到达购物车列表页面;然后点击“收藏”就可以把图书添加到收藏夹中;然后点击“预约试驾”,页面就会跳转到预约试驾登记信息:
图4.3.2车型展示内页展示图
右边主要包含了三个板块:
客服咨询、最新活动、最近浏览的车型,实现的方法和首页一样。
4.4 最新活动设计
最新活动页面主要就是展示本公司正在举行的汽车活动,包含的汽车的部分基本信息,点击汽车图片进入相应汽车的详细信息网页。
本页面在进行代码布局时,分为以下几个版块:
1)网页center部分,在这里又把页面分为左右两个部分:
左边是展示某个品牌正在进行活动的车型,点击汽车图片进入相应汽车的详细信息网页:
图4.4.1最新活动展示图
右边主要包含了两个板块:
客服咨询、最近浏览的车型,实现的方法和首页一样。
4.5 最新活动内页设计
最新活动内页页面主要就是用户在最新活动页面点击了某一款车型后,所跳转的关于该车型的活动详情,主要展示了这款汽车进行活动的详细信息,旁边有用于登记参加活动的用户信息登记表,用户填写好自己的基本信息后,公司会把后续内容告知用户,并进行跟进。
本页面在进行布局时,分为以下几个版块:
1)网页center2部分,在这里又把页面分为左右两个部分:
左边是展示该车型的活动详情:
图4.5.1最新活动详询图
右边是用户进行报名登记的一个表格:
图4.5.2最新活动报名图
实现代码如下:
……
4.6 售后服务设计
本页面主要介绍售后服务包含的内容。
本页面在进行代码布局时,分为以下几个版块:
1)网页center部分,在这里又把页面分为左右两个部分:
左边是关于售后服的介绍,给用户展示我们售后服务的方式、理念,让用户体会到我们用心的服务:
图4.6.1售后服务详解图
右边主要包含了三个板块:
客服咨询、最新活动、最近浏览的车型,实现的方法和首页一样。
4.7 顾客评论设计
顾客评论页面主要是顾客对某一车型进行满意度评价的平台。
本页面在进行代码布局时,分为以下几个版块:
1)网页center部分:
图4.7.1顾客评论设计图
4.8 买家指南设计
本页面主要给用户提供在购买汽车时的流程,使得用户能方便并迅速地购买汽车,不会再遇到不了解信息而不知道怎么做,这是考虑到用户体验的因素
本页面在进行代码布局时,分为以下几个版块:
1)网页center部分,在这里又把页面分为左右两个部分:
左边是关于买家指南流程:
图4.8.1买家指南流程图
右边主要包含了三个板块:
客服咨询、最新活动、最近浏览的车型,实现的方法和首页一样。
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端和手机版的功能,查找并分析不足,并总结测试过程的成功经验与不足,以便今后能更好的开展测试工作。
5.2测试方法
功能测试(FunctionalTesting),对产品的每一项功能进行验证,根据测试用例,逐项测试,检查产品是否达到用户的要求。
根据产品特征、操作描述和用户方案等文档,测试该产品的特性和可操作行为,确认它们是否满足用户的需求。
5.3测试用例
整个网页的功能模块较多,测试内容篇幅较大由于功能模块较多,测试内容篇幅较长,所以在本论文中只展示PC端前端页面搜索框、新用户登录、新用户注册测试用例,PC端后台商城用户管理、活动管理测试用例,针对手机版只是对其进行了基本的页面链接跳转的测试,从测试结果可以发现与预期结果完全一致。
表5.3.1搜索框测试用例表
测试用例名称
搜索框
测试用例标识
QCXSW-SSK
目的描述
测试网站在用户进行关键词搜索的功能
前提/约束
成功安装Tomcat,Mysql数据库5.1版本,主流浏览器
序号
测试活动
预期结果
评价准则
1
在文本框中,输入有效关键词(奥迪),点击“搜索”按钮
显示搜索到的记录条数及详细信息
与预期结果一致
2
在文本框中,输入无效关键词(geej),点击“搜索”按钮
显示搜索到0条记录
与预期结果一致
3
在文本框中,不输入任何关键词,点击“搜索”按钮
显示搜索到0条记录
与预期结果一致
表5.3.2新用户登录测试用例
测试用例名称
新用户登录
测试用例标识
QCXSW-DL
目的描述
测试软件的用户登陆功能
前提/约束
成功安装Tomcat,Mysql数据库5.1版本,主流浏览器
序号
测试步骤
预期结果
评价准则
1
在页面中点击登陆,进入用户登陆页面,在“用户名”、“密码”文本框中,依次输入相应的内容,点击“登陆”按钮
显示登陆成功
与预期结果一致
2
在页面中点击登陆,进入用户登陆页面,在“用户名”、“密码”文本框中,依次输入内容不匹配,点击“登陆”按钮
显示用户名与密码不一致
与预期结果一致
3
在页面中点击登陆,进入用户登陆页面,在“用户名”、“密码”文本框中,依次输入随机内容,点击“登陆”按钮
显示用户名不存在
与预期结果一致
表5.3.3新用户注册测试用例
测试用例名称
新用户注册
测试用例标识
QCXSW-ZC
目的描述
测试软件的用户注册功能
前提/约束
成功安装Tomcat,Mysql数据库5.1版本,主流浏览器
序号
测试步骤
预期结果
评价准则
1
在页面中点击注册,进入用户注册页面,在“邮箱”、“手机”、“用户名”等文本框中,按照标准要求依次输入相应的内容,并进行用户名是否有重复的检测及邮箱验证,点击“注册”按钮
显示注册成功
与预期结果一致
2
不进行邮箱中的链接激活验证
用户名不可用
与预期结果一致
3
用户名提示重名
提示用户名不可用
与预期结果一致
4
手机号码位数错误或者输入为非数字
提示手机号码错误
与预期结果一致
5
创建密码与确认密码内容不一致
提示密码不一致
与预期结果一致
6
验证码输入错误
提示请重新输入验证码
与预期结果一致
表5.3.4商城用户管理测试用例
测试用例名称
商城用户管理
测试用例标识
QCXSW-HT-SCYHGL
目的描述
测试软件后台对商城用户数据进行查询、删除、禁用(启用)操作
前提/约束
管理员登陆成功(用户名:
admin密码:
123456)
序号
测试步骤
预期结果
评价准则
1
按管理员名登录后,进入后台首页
2
单击用户管理模块,查询商城用户信息,点击姓名,进入详细信息页面
页面显示出用户的基本信息
与预期结果一致
3
单击“删除”按钮,删除对应的用户信息
提示删除成功
与预期结果一致
4
单击“禁用(启用)”按钮,使该用户账号不能再在本网站使用
提示禁用(启用)成功
与预期结果一致
表5.3.5活动管理测试用例
测试用例名称
活动管理
测试用例标识
QCXSW-HT-HDGL
目的描述
测试软件后台对商城汽车的活动数据进行查询、添加、修改操作
前提/约束
管理员登陆成功(用户名:
admin密码:
123456)
序号
测试步骤
预期结果
评价准则
1
按管理员名登录后,进入后台首页,进入活动管理版块
2
选择条件进行所需的活动信息的查询
页面显示活动的基本信息列表
与预期结果一致
3
点击“编辑”“修改”按钮,对活动进行不同的操作
提示操作成功
与预期结果一致
5.4测试结论
经过测试小组的努力测试,本软件的各项功能基本实现,达到了我们预期的效果估计。
整个网站系统测试执行期间,项目组开发人员高效地,及时解决测试组人员提出的各种缺陷,在一定程度上较好地保证了测试执行的效率以及测试最终期限。
另外,部分功能在设计上仍存在不足之处。
需求提出方可以在使用该系统的基础上,继续搜集用户的使用需求反馈,并结合市场同类产品的优势,在今后的版本中不断补充并完善功能。
6总结
通过编写汽车销售网站的前端部分页面和网站的整体功能测试,我较全面的掌握了前端技术的基本知识,从中也总结了很多经验,我自身的前端页面编写能力也得到了很大的提升,在实现部分动态效果时,查阅了大量资料,咨询老师、上互联网查看,这个过程中我的交流能力、查询资料能力也有显著增加,同时自己的技术也是得到了极大的提升
在网页实现过程中我学到了很多经验:
在开始着手编写代码之前,先对整个页面进行观察,版块布局自己要清楚,意识中搭好框架,不同的版块是用什么样的标签实现,这是为了在编写时提高速度必须考虑的;写标签时,要坚持简单、层级关系清晰、实现效果明显等原则,这样才能做出规范的网页。
7致谢
在论文完成之际,我首先要向尊敬的涂峰老师表示最诚挚的感谢。
在论文写作期间,优秀的涂峰老师指导我们进行毕业设计,并经常询问我们毕业项目设计的进展情况,当知道我们遇到技术问题时,总是耐心地指导我们,无论讲解多少次都没有不耐烦的表现。
涂老师的敬业精神深深地感动了我,没有老师细心指导我的项目设计,我就不可能顺利、按时的完成,再次对您表示衷心地感谢。
同时
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 汽车 销售 网站 设计 实现 网页 前端 功能 测试