汽车之家网站设计范文.doc

保定华美整形医院 汽车之家网站设计 系（院、部）： 软件与服务外包学院 学生姓名： 王XXX 专业班级： 信XXXXXXX 学 号： 1454564455 指导教师： XXXXXXXX 保定华美整形声明本人做的网站设计基于PHP构造的对于4s店销售汽车的论文，是我在指导老师、同校同学、公司同事、查阅网络资料和相关专业书籍下进行分析、研究、制作所取得的成果。除论文已标注的参考文献外，本论文所作内容均由本人编写。对本文的研究做出重要贡献的个人和集体，均已在文中作了明确说明并表示谢意。作者签名：XXXX日期：2016年2月14日 汽车之家网站设计摘要：本论文介绍了开发网上4s店销售汽车的网站的构建，该网站以产品销售为目的，用户体验宗旨进行设计。表明本网站是服务消费者的汽车网站,运用的是B2C的营销模式,本系统利用静态页面采用div+css，结合JavaScript和css两种脚本语言，动态页面采用php+mysql的交互方式以及配合多种网页开发工具，实现了电子商务汽车销售平台。并对网站功能的划分，对网站内部结构的设计和功能的实现进行了说明。依照基于浏览器稳定性测试方法对接着本网站进行了测试,并编写了主要功能模块的后台。最后对本次设计进行了总结,并对网上4s店网站的意义和发展前景进行了简要的说明。保定华美美容医院关键词：html，div+css，javascript，php，mysql网上4s店Car home website designAbstract:This paper introduces the development of online 4S shop car sales website construction, the site to sell products for the purpose, user experience purpose design. Show that this website is a service consumer automotive Web site, the use is B2C marketing mode, the system uses static pages using div + CSS, combined with JavaScript and CSS two scripting languages, dynamic pages using PHP + MySQL interactive way and with a variety of web development tools, realized the e-commerce platform for automobile sales. And the division of the website function, the design and function of the internal structure of the site are described. The website was tested according to the method of stability test based on the browser, and the background of the main function module was compiled. At the end of this design are summarized, and the online website of the 4S shop significance and development prospect are briefly described.Keywords: HTML, div+css, JavaScript, PHP, MySQL , 4S shop online 目录目 录一、引言7（一）开发背景及意义7二、相关技术7（一） Php简介7（二） HTML简介7（三） DIV+CSS简介8（四） Photoshop图片编辑软件8（五） Dreamweaver网页编辑9三、 系统需求分析9（一）网站总体功能分析设计91. 首页显示模块102. 用户注册模块103. 用户登录模块114. 留言管理模块115. 留言板模块116. 产品添加模块117. 产品显示模块128. 后台登录模块129. 子页显示模块12（二）非功能需求12四、 系统分析与设计13（一）网站设计原则13（二）网站总体架构设计14（三）网站功能模块设计141.功能模块的划分14（四）系统数据库设计141.数据库设计规定142.数据库的设计15（五）网站用例分析17（六）网站部署图20五、 网站的具体实现20（一）网站开发平台及工具20（二）首页显示模块的实现20（三）子页显示模块的实现21（四）用户注册模块的实现25（五）用户登录模块的实现28（六）留言管理模块的实现30（七）留言板模块的实现32（八）产品添加模块的实现33（九）产品显示模块的实现35（十）后台登录模块的实现35总结38致谢39参考文献406一、引言当代社会互联网经济飞速发展，很多行业开始或已经进军互联网销售模式，中国作为人口第一的大国，我国网络普及率相当高，手机网民突破8亿，电脑用户突破4亿。网络技术飞速发展,渗透到各行各业，网上店铺和企业网站也如雨后春笋般出现。汽车网上4s店可以面向全国，信息的咨询也更加方便快捷，加上互联网作为传播媒介，可以迅速扩大一个店铺或企业的知名度，网站销售已然成为一种潮流，越来越适合当代生活的需求。汽车之家网站是基于浏览器的交互、信息传递的资讯网站,既方便了消费者又使商家获益。二、相关技术 在确定了汽车4s网站的发展前景，下一步是选择一个好的目标，开发工具及开发利用技术相关的系统。网站选择静态页面采用div+css，结合JavaScript和css两种脚本语言，动态页面采用php+mysql的交互方式以及配合多种网页开发工具，只要打开浏览器即可浏览网站。（一） PHP简介PHP是可以说是当今服务器端脚本语言最容易学的，使用最方便的。你只需要很少的编程，看一本书的知识你建立一个使用php做的真正交互的WEB站点。这个语言你甚至不需要完全学号了解，就可以让你尽快加入动态网站站点开发的行列。如果在拥有html的基本知识和一些编程思想。PHP是网站应用非常广的动态语言，特别在现在的网络网站开发。PHP的执行大多在服务器端执行，通过服务器执行PHP的代码产生网页内容提供给人们浏览，甚至也可以用来命令行脚本程式和使用者端的GUI应用程式。能够执行php的服务器、操作系统、平台有很多很多，许多数据库也可以和php相结合。PHP Group组织为程序开发提供了非常完整的源代码，允许开发人员修改、编译、扩充来使用，而且开发网站使用PHP不交费用。执行环境架构 PHP 的语法混合了 C、C+、Perl 以及 PHP 自创的独特语法。php可以比其他动态语言更快的执行网页内容解析。用其他不同的动态语言和PHP 语言做出的网站页面相比较，PHP是把php语言嵌套到HTML页面中去执行的，执行的效率比完全靠生成HTMl要高很多；PHP也能执行编译后的代码，编译后可以加密和优化网站代码运行速度，使页面内容运行更加快速。PHP的功能非常强大，CGI的所有功能PHP语言都能实现，并且所有流行的数据库和操作系统php都支持。最重要的是PHP可以对C、C+语言进行程序的扩展！保定胸部整形医院（二）HTML简介HTML简介超级文本标记语言其实就是网页的本质，通过结合使用其他的编程语言（如：脚本语言、公共网关接口、插件等），可以创造出效果绚丽而且功能非常强大的网页。因而，万维网（Web）编程的基础就是超级文本标记语言，也可以说万维网就是是建立在超文本链接基础之上的。超级文本标记语言之所以能够被大家称为超文本标记语言，其实就是因为文本中包含了“超级链接”描点。HTML结构图超级文本标记语言是一种规范，一种标准，它通过a连接符号来连接网站中的网页。网页是一种网站文本文件，不用编辑器通过在网页文件中可以添加html标记符，告诉浏览器网页要如何显示其中网站需要的内容（如：文字如何编排，网页效果安排，图片显示效果等）。浏览器的顺序阅读方式是以自上而下的方式，然后根据html标记符显示其标记的文本内容，浏览器并不指出我们书写出错的标记的地方，且不停止其解释执行过程，开发人员只能通过浏览器显示出来的效果来分析出错地方以及出错的原因。同时我们应该注意的是，不同公司制作的浏览器，对与网页中的同一标记符都有可能有不同的解析，因此网页会显示不同的网页效果。（三）DIV+CSS简介DIV+CSS是目前最常用的静态语言，div+css 是一种网页的布局方法,传统的HTML网页设计语言中的表格定位方式与DIV+CSS有不同的区别,DIV+CSS真正地达到了w3c内容与样式相分离。CSS是样式表，用来定义页面的显示效果，用DIV制作的网页比Tabl表格更科学、精确，网页兼容性更好，而且网页被浏览器打开速度更快，并且网站内容也利于搜索引擎收录。修改网站网页的显示效果，用DIV+CSS修改网页是非常的方便，用Table制作的网页修改则非常麻烦。因此现在的网站，都用DIV+CSS来实现网页效果的。很方便的网页的内容拖拽和编辑网页内容。怎么样祛痘Div+css 样式实例css是层叠样式表的缩写，用于定义HTML的显示效果，是W3C推出的格式化网页内容的技术。网页前端制作者必须掌握的技术之一。在HTML文档中加入CSS样式表可分为嵌入式样式表、外联样式表和内联样式表三种，网站大多数采用的是外联样式表的方式。div+css制作的页面效果结构清晰，搜索引擎容易收录网站的内容，适合网站的seo，而且降低网页大小，较快的加载网页内容。 （五） Dreamweaver简介Dreamweaver网页编辑Adobe Dreamweaver由adobe公司开发的制作网站网页的所见即所得网页编辑器，DW为程序员提供可视化的网页设计和网站管理。可视化的网页开发工具的易用性非常好，因为它更比较符合开发人员的交互和操作的自然逻辑。DW是第一个针对网页开发人员的视觉化网页开发工具，一个好的文本编辑器可以提加速网页开发人员的开发速度。DW基本对最新的Web技术都有所支持，包含HTML标签检查、网页格式化选项、文本格式控制、网站站点捆绑、图像编辑、可视化网页设计、全局查找替换、全FTP 功能、处理Flash和动态HTML、基于团队的Web创作和Shockwave等富媒体格式。在编辑上制作者可以选择可视化方式或者喜欢的源码编辑方式。DW编辑区是非常灵活的，因此它可以非常快的让开发人员适应各种不同的工作风格，Dreamweaver常用的工作区组件有以下： 文档窗口可显示当前编辑网页文档，文档的显示效果和浏览器中看到的基本是一样的效果。 可以在装载器当中打开和关闭常用检查器和模板。 对象工具栏包含创建不同网站网页类型的对象（例如 图象、表格和层等）的按钮。整形美容 属性检查器可以显示网页中的选定对象的属性。 快捷菜单可以使网页开发人员对当前选择或区域快速执行命令。 网页开发人员可以通过固定的浮动工具栏、浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。三、 网站需求分析（一）网站总体功能分析设计通过对网站进行详细的分析与研究，最终得出了网站的功能需求。系统可分为9个模块，包括首页显示模块、子页显示模块、用户注册模块、用户登录模块、留言管理模块、留言板模块、产品添加模块、产品显示模块、后台登录模块。网站功能模块图，如图3-1所示。留言板后台登录产品管理提交汽车之家网站留言管理用户注册联系我们用户登录图3-1网站总体模块图1. 用户模块用户管理模块包括用户登录、用户注册等2个子页面。该模块功能模块图如图3-2所示:注册登录用户管理图3-2 用户模块2. 产品管理模块产品管理模块包括添加产品、产品列表、修改产品、删除产品等4个子模块。该模块功能模块图如图3-3所示：产品列表添加产品修改产品删除产品用户管理图3-3 产品管理模块3. 后台管理模块订单管理模块包括订单列表、删除订单等2个子模块。该子模块功能模块图如图3-4所示：留言板产品模块后台管理图3-4 后台管理模块4. 收货地址管理模块收货地址管理模块包括添加收货地址、收货地址列表、修改收货地址、删除收货地址等4个子模块。该子模块功能模块图如图3-5所示：图3-5 收货地址管理模块5. 我的帐户模块帐户模块包括我本人的个人资料，我的购物车，我的订单等3个模块。该子模块功能模块图如图3-5所示：图3-5 我的帐户模块6. 用户模块用户模块包括登录、注册、退出系统等3个子模块。该子模块功能模块图如图3-6所示：图3-6 用户模块7. 图片上传模块在添加产品的时候必然会用到图片上传功能，在J2EE开发中将使用jspSmartUpload组件进行图片上传，其特点如下：使用方便，能控制上传，上传文件大小，类型等方面作出灵活的特点，下载限制。8. 页面UI模块页面UI模块包括产品首页、产品详细、后台页面等3个子模块。该子模块功能模块图如图3-7所示：图3-7 页面UI模块（二）总体设计分析网页总体设计网站网页的布局类型网页的布局一般大致可以分为标题正文型、拐角型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型。眼部整形我们开发的网页页面结构布局采用左右和上下型，也包含两种布局方式的结合。和拐角型的结构基本相似。这种网页结构在很多新闻网站页面中采用的比较多。采用这种页面结构可以是网站信息能够非常清楚的展示在在用户面前，能够突出页面信息的标题，能使用户非常快速的获取到这个网站页面的内容。网站框架设计你的设计效果图呢，网站主页设计 1. 网站页面头部网站网页的头部首先显示网站的logo，并加上超级链接a标签，作为醒目的标题。然后网站的导航菜单并列的方式显示。根据网站统一性，网站的所有的头部都采用相同的结构方式。2. 网页中部页面中部主要是用来向用户显示网站具体的内容信息。我们的网站网页，我们页面中部设置为两种结构，分别为左右部分或者上下部分。网站的首页中部采用上下结构，依次展示商品的一些信息3. 网页底部网页页面下部设计显示版权信息。以及网站开发的版权信息和用户联系网站开发者的连接。二级页面设计 根据网页的特点，网页的统一性，各个二级页面也将采用主页的整体布局风格。头部和底部都采用相同的布局方式。页面内容中将显示各个不同的专题各自的文章。四、 网站制作（一） 系统设计原则在这个项目中，必须在设计阶段认真细致的工作，以保证工程的顺利进行，避免不必要的风险。因此，根据项目的特点和业务的要求，我认为系统设计应遵循以下原则： 1.实用性本实用和有效的方法来确保投资和系统，我会选择相对成熟和稳定的系统开发技术，系统易于使用。2.易用性本系统必须正视用户的体验效果。因而，本系统的界面显示的非常大气简洁。在系统设计时，在系统设计中，系统应该是整体式布局，简洁，易于使用的实用原则，用户界面是一致的，友好的，注重整体的界面效应，精心设计的细节，如按钮接口，数据表现方式，使操作者可以很容易的操作和易于理解的接口信息和内容，便于用户快速掌握系统的使用。3可扩展性在前面我已提到整个系统结构的重要性，其中十分重要的一点就在于整套系统的可扩展性。（二）系统总体架构设计本系统是基于 J2EE的WEB应用系统，采用B/S模式。B/S模式系统开发中的优势，维护和升级方便，管理成本较低。一般客户机只需安装有浏览器就可以进行操作。应用程序运行在服务器端，有效地保证了系统平台和服务器数据库的安全。整个网站系统架构，如图4-1所示。图4-1 基于Struts的MVC三层体系架构（三）系统功能模块设计通过对系统进行详细的分析与研究，最终得出了系统的功能需求。系统可分为用户模块、产品管理模块、订单管理模块、收货地址管理模块、我的帐户模块、用户模块、图片上传模块、页面UI模块等八大模块。（四）系统数据库设计1.数据库设计规定为了使数据库系统需要具有一定的安全水平，通过验证程序来测试它是否是合法的用户，只有通过身份验证的后方可进行相关操作，防止非法用户的登录和执行非法操作，让数据库的安全性得到进一步提高。保定华美整形（1）容错要求数据输入或输入一个有效的测试条件下，非合法的数据块从客户端和服务器的正常运行，数据库也有了进一步的安全。第二，一些技巧和错误或用户错误连接数据库操作的警告，非正常着陆系统的安全控制。随着产品的网络运行环境，服务器很容易受到不法人员通过各种攻击手段，为了找到控制系统在一定程度上的方法，应该做的：界面结构应避免直接的框架，所有的代码显示；（2）灵活性要求查询时查询完后可返回继续查找；（3）硬性要求用户使用环境不应存在太多限制。（4）故障处理要求为了防止对数据库服务器的访问请求的用户是“无限”的状态，系统应判断的时间，超过规定的时间或要求服务器放弃对其运行，且对用户的错误请求做出一定“智能”的处理。2.数据库的设计系统实体表如图4-1所示：表4-1 系统实体表表名描述收货地址信息表用于存储收货地址的信息订单信息表用于存储订单的信息产品信息表用于存储产品的信息产品订购信息表用于记录产品订购的信息购物车信息表用于存储购物车的信息用户信息表用于存储用户的信息（1）送货地址信息表，用来存储传递地址信息，其结果如表4-2所示的结构：表4-2收货地址信息表表名Address描述收货地址信息表列名数据类型（精度范围）空/非空约束条件描述idint不为空主键useridint不为空provicevarchar(100)不为空cityvarchar(100)不为空detailedaddressvarchar(100)tcodevarchar(100)ownernamevarchar(100)ownertelephonevarchar(100)createtimedatetime补充说明（2）订单信息表，用于存储订单的信息，其结构如表4-3所示：表4-3 订单信息表表名Orderinfo描述订单信息表列名数据类型（精度范围）空/非空约束条件描述idInt不为空主键ordernumvarchar(100)不为空useridInt不为空sumpricedouble不为空addressvarchar(100)不为空createtimedatetime补充说明（3）产品信息表，用于存储产品的信息。其结构如表4-4所示：表4-4产品信息表表名Productinfo描述产品信息表列名数据类型（精度范围）空/非空约束条件描述idInt不为空主键productnumbervarchar(200)不为空productdescriptionvarchar(200)不为空productdetailcontentvarchar(100)不为空productpricedouble不为空productcovervarchar(100)createtimedatetime补充说明（4）产品订购，用于存储产品订购的消息，其结构如表4-5所示：表4-5产品订购信息表表名Productorder描述产品订购信息表列名数据类型（精度范围）空/非空约束条件描述idInt不为空主键orderinfoidvarchar(400)不为空productnovarchar(400)不为空productnumintuseridint不为空productpricedoublecreatetimedatetime补充说明（5）物车信息表，用于记录购物车的消息，其结构如表4-6所示：表4-6购物车信息表表名Shopcart描述购物车信息表列名数据类型（精度）空/非空约束描述idInt不为空主键useridInt不为空productnoVarchar(200)不为空productnumintispaysmallintcreatetimedatetime补充说明（6）用户信息表，用于记录用户的信息，其结构如表4-6所示：表4-6用户信息表表名Users描述用户信息表列名数据类型（精度范围）空/非空约束条件描述idInt不为空主键usernameVarchar(100)不为空passwordVarchar(100)不为空ownerintsexVarchar(100)telephoneVarchar(100)createtimedatetime补充说明（五）系统用例分析 (1) 在该系统中，需要用户的参与，此系统的用户是需要用户及管理员进行操作。(2) 系统中的信息是需要维护和管理的，根据甲方要求，对于非常敏感的信息要给予及时的处理等。在案件的管理包括：产品管理，订单管理，用例，用例，账户管理。以下表格为具体内容：用例名称产品管理用例用例描述管理员可进行添加产品、修改产品信息、删除产品信息等参与者管理员优先级1前置条件登录页面用管理员帐号登录后置条件基本操作流程无可选操作流程被泛化的用例无被包含的用例无被扩展的用例无 用例名称订单管理用例用例描述管理员可以管理所有订单及删除订单等操作参与者管理员优先级1前置条件管理员进入系统,并进入订单管理模块后置条件完成了管理所有订单及删除订单基本操作流程1.管理员进入订单管理模块,进行管理所有订单及删除订单等操作2.系统根据管理员的请求响应相应操作3-管理员确认相应操作4-系统保存这次的操作可选操作流程管理员选择取消订单和订单管理等。被泛化的用例无被包含的用例无被扩展的用例无用例名称帐户管理用例案例描述管理员可以管理所有帐户，删除帐户等操作参与者管理员优先级1前置条件管理员进入系统,并进入用户模块后置条件完成了管理所有帐户及删除帐户基本操作流程1.管理员进入用户模块,进行管理所有帐户及删除帐户等操作2.系统根据管理员的请求响应相应操作3-管理员确认相应操作4-系统保存这次的操作可选操作流程被泛化的用例无被包含的用例无被扩展的用例无用例名称下单用例用例描述注册用户可以进行添加到购物车、下单结算等参与者注册用户优先级1前置条件注册用户首页后置条件基本操作流程1.注册进入首页，可以进行添加到购物车、下单结算等操作2.系统根据注册用户的请求响应相应操作3-注册用户确认相应操作4-系统保存这次添加到购物车、下单结算等操作可选操作流程被泛化的用例无被包含的用例无被扩展的用例无 用例名称注册用例用例描述用户可以进行注册成为网站会员参与者所有用户优先级1前置条件用户访问注册页面后置条件完成了用户注册操作基本操作流程1.用户的基本程序进入注册页面，输入用户的注册信息，点击注册2.系统根据管理员的请求响应相应操作3-用户确认相应操作4-系统保存这次的操作可选操作流程用户选择注册用户等操作被泛化的用例无被包含的用例无被扩展的用例无（六）系统部署图图4-5 系统部署图五、 系统的具体实现（一）系统开发平台及工具1.服务器端: 操作系统:Windows 7 Web服务器:Tomcat6.0 数据库服务器:MYSQL2.客户端 操作系统:Windows 7 浏览器:Internet Explorer 7.03.主要开发工具: Dreamweaver 8+Myeclipse8.5+PowerDesinger+Tomacat6.0+JDK1.64.主要开发技术: Struts2/JSP (Servlet) +Ajax+Lucence+HTML+JavaScript+CSS（二）产品管理模块的实现产品管理模块的设计思想是通过采用PHP、数据库连接技术实现对数据库的增删改查。用户模块包括用户登录、用户注册等2个子模块。图5-1 帐户管理处理帐户管理的核心业务代码如下：public List selectAllUserInfo() QueryRunner qr=DBHelper.getQueryRunner();String sql = select id,username,password,sex,telephone,createtime from users;List list=null;try list = (List) qr.query(sql,new BeanListHandler(User.class); catch (SQLException e) e.printStackTrace();return list;public User getuserinfobyuid(int uid)QueryRunner qr=DBHelper.getQueryRunner();String sql = select id,username,password,sex,telephone,createtime from users where id=+uid;List list=null;try list = (List) qr.query(sql,new BeanListHandler(User.class);if(list.size()0)User user = (User)list.get(0);return user; catch (SQLException e) e.printStackTrace();return null;（三） 产品管理模块的实现产品管理模块的设计思想是通过采用JDBC、数据库连接池技术和DBUTILS工具类实现对数据库的增删改查，同时采用了AJAX、DWR等技术实现页面的无刷新效果。产品管理模块包括添加产品、产品列表、修改产品、删除产品等4个子模块。图5-2 产品管理处理产品管理模块的核心代码如下：public ProductInfo selectproductbynumber(String number)QueryRunner qr=DBHelper.getQueryRunner();String sql = select id,productnumber,productdescription,productdetailcontent,productprice,productcover,createtime from productinfo where productnumber=+number+;List list=null;try list = (List) qr.query(sql,new BeanListHandler(ProductInfo.class);if(list.size()0)ProductInfo pp = (ProductInfo)list.get(0);return pp; catch (SQLException e) e.printStackTrace();return null;public List selectproductbyKeyWord(String keyword)QueryRunner qr=DBHelper.getQueryRunner();String sql = select id,productnumber,productdescription,productdetailcontent,productprice,productcover,createtime from productinfo where productnumber like %+keyword+% or productdescription like %+keyword+% or productdetailcontent like %+keyword+%;List list=null;try list = (List) qr.query(sql,new BeanListHandler(ProductInfo.class); catch (SQLException e) e.printStackTrace();return list;public int deleteProduct(String number)String sql = delete from productinfo where productnumber=+number+;QueryRunner qr = DBHelper.getQueryRunner();int result = 0;try result = qr.update(sql); catch (SQLException e) e.printStackTrace();return result; （四） 订单管理模块的实现订单管理模块的设计思想是通过采用JDBC、数据库连接池技术和DBUTILS工具类实现对数据库的增删改查。订单管理模块包括订单列表、删除订单等2个子模块。图5-3 订单管理处理订单管理的核心业务代码如下：public int addOrderinfo(int userid,String ordernum,double sumprice,String address)String sql = insert into orderinfo (userid,ordernum,sumprice,address,createtime) values (?,?,?,?,now();String params = String.valueOf(userid),ordernum,String.valueOf(sumprice),address;QueryRunner qr = DBHelper.getQueryRunner();int result = 0;try result = qr.update(sql, params); catch (SQLException e) e.printStackTrace();return result;public int addProductOrder(int userid,String orderinfoid,String productno,int productnum,double productprice)String sql = insert into productorder (orderinfoid,productno,productnum,userid,productprice,createtime) values (?,?,?,?,?,now();String params = orderinfoid,productno,String.valueOf(productnum),String.valueOf(userid),String.valueOf(productprice);QueryRunner