项目清单 包安装运行 官网地址 http://chenqi1990.site

ssm209基于的汽车服务商城系统设计与实现+vue

github 项目仓库 开源仅有后端代码

点击播放视频 ▼

第1章 绪论

1.1 课题背景

随着中国的科技的不断进步，计算机发展也慢慢的越来越成熟，人们对计算机也是越来越更加的依赖，科研、教育慢慢用于计算机进行管理。从第一台计算机的产生，到现在计算机已经发展到我们无法想象。给我们的生活改变很多很多，给我们提供了把很多的方便，计算机已经融入到我们的生活中，和我们的生活息息相关。

社会经济的快速发展，汽车业发展迅速，汽车4S店的日益竞争激烈，汽车4S店要想生存发展，就必须在各个方面加强管理，客户是汽车4S店赖以生存的基本，因此，为了更好的为客户服务，提高服务质量，结合信息技术的发展，开发了本汽车服务商城系统。实现汽车服务商城系统与传统的汽车服务模式相比，有着无法比拟的优点，其具有方便、及时、管理快捷、储存空间大、成本低、查找方便等特点，能够提高效率，更好的为广大用户服务。

1.2 设计原则

在开始开发项目之前，必须要先考虑项目的实用性、科学性，以及该项目是否能够真正让用户受益并尽可能的发挥项目的作用。因此，在开发前，通过以下几条原则对项目进行判断：

（1）可行性原则。项目需要保证经济可行性和技术可行性，这包括了项目在浏览端、服务端等方面上的经济和技术上是可以达成的。

（2）适应性原则。项目要保证可维护性和可扩展性，这是每个非短期项目都需要考虑的，并且不论是维护还是扩展，都必须要建立在适应用户的正常需求的基础上。

（3）安全性及保密性原则。要充分保证用户信息的安全性和保密性，不能因为开发上的疏忽，导致用户的信息泄露。

（4）系统工程原则。为了确保项目的整体性，在项目调查、项目分析、项目设计、项目开发的过程中，都需遵从项目工程的方法和步骤逐步进行。

（5）统一规划、分期实施、逐步完善原则。项目开发的过程中，要按照规划、分期实施，特别是要注意在项目开发过程中要有条理，从点到面，一步步完善，不要贪图进度，要循环渐进的对项目进行开发。

1.3 论文组织结构

第一部分绪论：文章主要从课题背景、设计原则综合阐述了开发此系统的必要性。

第二部分相关技术：系统开发用到的各种技术都大致做出了简介

第三部分系统分析：从可行性分析和功能需求分析等角度综合研究了此次开发的系统

第四部分系统设计：功能模块设计和数据库设计这两部分内容都有专门的表格和图片表示

第五部分系统实现：进行系统主要功能模块的界面展示

第六部分系统测试：检验程序是否达到预期目标

第七部分总结：进行最后的总结工作

31

第2章 关键技术简介

2.1 Java技术

Java是一种非常常用的编程语言，在全球编程语言排行版上总是前三。在方兴未艾的计算机技术发展历程中，Java的身影无处不在，并且拥有旺盛的生命力。Java的跨平台能力十分强大，只需一次编译，任何地方都可以运行。除此之外，它还拥有简单的语法和实用的类库，让编程人员可以尽可能将精力集中在问题的求解上，并且许多开源项目和科研成果都是采用它实现的。

在1995年这一年的5月份，著名的Sun Microsystems公司在程序开发设计上面郑重推出一种面向对象开发的程序设计语言——Java，最开始的时候Java是由詹姆斯.高斯林这位伟大的JAVA之父来进行主导，但是在后来由于各种原因，让甲骨文公司这个针对商业程序创建了oracle大型数据库的公司收购了Java[16]。Java的平台总共算下来有3个，分别为javaME和javaSE以及javaEE这3个java平台。下面将对其进行分别介绍。

（1）在电脑桌面程序的开发上面需要选择JavaME，这个用得也比较多。

（2）企业也会根据工作以及业务需要开发各种软件，那么就会选用JavcEE这个支持企业版软件的开发的Java平台，JavcEE主攻运用在企业领域上面的web应用，JavcEE也在javaSE的基础上获得了比如jsp技术 ，Servlet技术等程序开发技术的支持。

（3）现在生活中手机的普及化，也使得手机端这样的移动设备的软件的兴起，JavaME这个迷你版java平台就能运用于移动端的软件开发操作。

2.2 Vue框架

Vue是当今前端的三大框架之一，主要技术领域运用到的是单页SPA的应用之中。这样很好的提供了用户的浏览网页的交互体验。减少了浏览器的负载。提高浏览器的高效的浏览的速度。

Vue 是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue可以在任意其他类型的项目中使用，使用成本较低，更加灵活，主张较弱，在Vue的项目中也可以轻松融汇其他的技术来开发，而且因为Vue的生态系统特别庞大，可以找到基本所有类型的工具在vue项目中使用。其特点：易用（使用成本低），灵活（生态系统完善，适用于任何规模的项目），高效（体积小，优化好，性能好）。

VUE的出现，加快了前后端分离的进程，提高了程序员的工作效率，也减少了工作时间。Vue.js是一套用于构建用户界面的，可以自底向上逐层应用的渐进式前端框架。它相比于其他主流的JavaScript框架例如AngularJS或React都具有运行效率高、语法简洁、自身占用空间小、上手容易等特点。它的核心只关注视图层，是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统，并且所有的这些都是响应式的。

2.3 B/S结构

此次设计的网络结构模式B/S结构（Browser/Server）。B/S架构也称为B/S模式，是一种服务器以及浏览器架构模式。B/S的工作模式都是先由浏览器请求，服务器再响应。B/S体系结构解决了异构系统中的连接难题，大大改善了系统的开放性，让系统的扩展和维护更加简单；同时，B/S体系结构操作也比较容易，界面全都为浏览器模式，容易分发数据的捕获程序。只要安装通用的浏览器（如WWW浏览器）就能通过Web服务器与数据库进行数据交互。此结构的好处之一在于由于它使用的统一的浏览器，使其可以在不同的地方且不需要用专门的软件进行操作，实现了不论你使用怎样的接入网的方式都可以对公共的数据进行调用和浏览。

相对于C/S模式，B/S模式是对C/S模式应用的扩展，B/S模式不用对不同的计算机安装不同应用程序，还有安全性的要求及对模式上手难度都比前者更好。B/S模式可以让客户机的压力大大减轻，工作的负荷被合理的分配了。

B/S三层框架结构图如图2-1所示：

显示逻辑

浏览器

事物处理逻辑

Web服务

数据库

事物处理逻辑

数据库服务器

响应

请求

相应

请求

求

图2-1 B/S三层框架结构图

2.4 MYSQL数据库

MySQL 是关系型数据库管理系统的代表， 因为MySQL是其免费开源的，而且MySQL的功能已经足够用对于学习和中小型企业来讲，所以开发中小型网站都会选择MySQL作为网站的数据库。[13]

MySQL具有开放性，它是一种关系型数据库管理系统，并且它的源代码可以被大众所熟知[3]。由于MySQL是开放源代码的，因此，只要经过授权就可以在自己需求的基础上对其进行修改。MySQL因为其固有的特点而备受关注，它具有很强的适应性，并且十分可靠，查询速度快。MySQL安装起来非常方便，且数据存储量大，不需要事务化处理。Sql语言拥有很多的方法，在项目中编写sql语句时使用起来是非常方便的，不会像其他语言那样需要编写更多的语句。正因为MySQL使用sql语言进行数据库管理，所以它收到了大多数程序员的热爱。

第3章 系统分析

3.1 可行性分析

在系统开发之初要进行系统可行分析，这样做的目的就是使用最小成本解决最大问题，一旦程序开发满足用户需要，带来的好处也是很多的。下面我们将从技术上、操作上、经济上等方面来考虑这个系统到底值不值得开发。

3.1.1 技术可行性

本基于Vue的汽车服务商城系统采用Java和MYSQL数据库进行开发设计，作为计算机专业学生，在学校期间就接触到许多关于编程方面的知识，当然也包括各种编程软件，对他们的了解度也比较系统，所以技术开发上面还是有一定把握。

3.1.2 经济可行性

由于自己本身就是学生，还没有正式参加工作，金钱上面一直都处于缺乏状态。所以在开发程序过程中，我是不会花太多经济成本在上面的。针对开发软件和数据库，还有界面设计的photoshop软件等在百度上面就可以直接下载，然后根据各种安装视频进行安装，这些资源都是免费的，程序编码阶段使用的源代码在百度上面可以轻松获得，在有网络的环境下就能下载下来，不需要支付任何费用，经济成本很低。

3.1.3 操作可行性

本人自己就是学生，程序开发经验不足，在界面设计上面不会设计太复杂，要讲究简单好看，操作上要方便，不能让用户觉得不流畅。用户一旦进入操作界面，界面上就会有相应提示，跟着操作提示就可以找到对应的功能操作模块，对于用户来说免培训就能使用。本基于Vue的汽车服务商城系统本身具有操作可行性，其界面设计清晰、功能权限分配合理，操作简单，不同用户登录后可对进行相应功能模块的操作，具有极高的操作可行性。

3.1.4 时间可行性

从时间上看，在三个月的时间里学习相关知识，开发本基于Vue的汽车服务商城系统，时间上是有点紧，但是不是不可能实现，在做毕业设计的这几个月里，我通过努力使得功能应该基本可以实现。

综上所述，我们进行了四个方面的可行性研究，可以看出，该基于Vue的汽车服务商城系统的开发是没有问题的。

3.2 系统功能分析

本基于Vue的汽车服务商城系统主要满足两种用户的需求，这两种用户分别为管理员和用户，下面将对这两种用户分别实现的功能进行详细的阐述。

（1）用户：用户在系统前台可查看系统信息，包括首页、汽车、汽车美容、配件、维修保养以及公告等，注册登录后主要功能模块包括个人中心、汽车分类管理、汽车管理、汽车美容管理、配件管理、维修保养管理、购买记录管理以及预约记录管理，用户用例图如图3-1所示。

图3-1 用户用例图

（2）管理员：管理员登录后可对系统进行全面的管理，主要功能模块包括个人中心、用户管理、汽车分类管理、汽车管理、汽车美容管理、配件管理、售后服务管理、维修保养管理以及购买记录管理。管理员用例图如图3-2所示。

图3-2 管理员用例图图

3.3 系统性能分析

（1）系统的存储性：因为是汽车服务商城系统，所以就会在数据库要求上比较严格，信息录入的比较多，而且丰富复杂， 这就需要一个强大的数据库来存放更多的数据和保证数据的时时性。

（2）系统的易学性：系统设计的应该简单易学的，设计的各种功能应该简单操作，不需要努力学习培训，缩短用户熟悉系统的进程。

（3）系统的数据要求：数据应该录入准确，需要更新时，数据应该可以及时的修改，数据还应该有独立保存，不能删除数据的时候会连带着把还需要的数据都删除掉。

（4）系统稳定性：开发的基于Vue的汽车服务商城系统要求运行稳定，运行过程中无界面不清楚、字体模糊等现象。

（5）系统可靠性：系统不可以有病毒类代码，必须有拦截器，验证方法，对里面信息的保护措施，这样才让人用的放心。

3.4 系统流程分析

3.4.1注册流程

未有账号的用户可进行注册操作，在注册时系统会判断用户名是否已存在，已存在的话，提示返回重新填写用户名，用户名不存在，填写其他注册信息，系统判断注册信息是否正确，正确则在数据库中添加用户信息，注册成功。用户注册流程图如图3-3所示。

图3-3注册流程图

3.4.2登录流程

登录模块主要满足了用户以及管理员的权限登录，用户登录流程图如图3-4所示

图3-4登录流程图

第4章 系统设计

4.1 系统结构设计

系统结构设计是一个将一个庞大的任务细分为多个小的任务的过程，这些小的任务分段完成后，组合在一起形成一个完整的任务。在整个设计过程，以确定可能的具体方案达成每一个小的最终目标，对于每一个小的目标而言，我们必须先了解一些相关的需求分析的信息。然后对系统进行初步的设计，并对其逐渐进行优化，设计出一个具体可实现的系统结构。

本基于Vue的汽车服务商城系统主要包括用户模块和管理员模块，根据第三章中系统功能需求分析，可画出本基于Vue的汽车服务商城系统的结构图如图4-1所示：

图 4-1 系统结构图

4.2系统顺序图

4.2.1登录模块顺序图

用户和管理员均可进行登录操作，登录模块的顺序图如图 4-2 所示。

图4-2用户登录顺序图

4.2.2添加信息模块顺序图

管理员和用户登录后均可进行添加信息操作，添加信息顺序图如图4-3所示

图4-3添加信息顺序图

4.3 数据库设计

4.3.1 数据库E-R图设计

E-R图展现了数据的实体结构关系，为系统数据管理奠定了基础，也对数据进行规范化的设置，保证后期的高效性，避免数据出现重复造成冗余使得数据更新出现异常，无法同步数据和插入数据。通过E-R图也可便于对数据的设计和修改，如果一个数据库在被设计时没有相对应的E-R图，则整体数据库就缺少明确的定位和条理性，使得处理数据的效率大大降低，在需要更新或者查找数据时报错的可能性大大提升，对与后期运行调试系统会造成不必要的麻烦。本基于Vue的汽车服务商城系统的E-R图如下图所示：

1、配件信息实体E-R图如图4-4所示：

图4-4 配件信息实体的E-R图

2、汽车信息实体E-R图如图4-5所示：

图4-5 汽车信息实体E-R图

3、汽车美容实体图如图4-6所示。

图4-6 汽车美容实体E-R图

4、管理员信息实体图如图4-7所示。

图4-7 管理员信息实体E-R图

5、用户信息实体图如图4-8所示。

图4-8 用户信息实体E-R图

4.3.2数据库表设计

本基于Vue的汽车服务商城系统采用了MYSQL数据库进行系统数据的储存，主要的数据库表的具体设置如下：

表4-1 peijian配件信息表

列名	说明	类型 ( 长度 )	备注
id	编号	bigint(20)	不允许空，主键
addtime	创建时间	timestamp	允许空
shangpinbianhao	商品编号	varchar(200)	允许空
peijianmingcheng	配件名称	varchar(200)	允许空
peijianfenlei	配件分类	varchar(200)	允许空
pailiang	排量	varchar(200)	允许空
gongxiaoshangmingcheng	供应商名称	varchar(200)	允许空
dizhi	地址	varchar(200)	允许空
fuzeren	负责人	varchar(200)	允许空
lianxifangshi	联系方式	varchar(200)	允许空
shuliang	数量	varchar(200)	允许空
peijiantupian	配件图片	varchar(200)	允许空
peijianjiage	配件价格	int(11)	允许空
peijianjieshao	配件介绍	longtext	允许空

表4-2 qiche汽车信息表

列名	说明	类型 ( 长度 )	备注
id	编号	bigint(20)	不允许空，主键
addtime	创建时间	timestamp	允许空
qichemingcheng	汽车名称	varchar(200)	允许空
qichefenlei	汽车分类	varchar(200)	允许空
qichepinpai	汽车品牌	varchar(200)	允许空
qicheyanse	汽车颜色	varchar(200)	允许空
qichetupian	汽车图片	varchar(200)	允许空
tianchuang	天窗	varchar(200)	允许空
huandangfangshi	换挡方式	varchar(200)	允许空
zuowei	座位	varchar(200)	允许空
`qichepailiang	汽车排量	varchar(200)	允许空
shangshinianfen	上市年份	varchar(200)	允许空
shuliang	数量	int(11)	允许空
qichexiangqing	汽车详情	longtext	允许空
`clicktime	最近点击时间	datetime	允许空
clicknum	点击次数'	int(11)	允许空

表4-3 qichemeirong汽车美容信息表

列名	说明	类型 ( 长度 )	备注
id	编号	bigint(20)	不允许空，主键
addtime	创建时间	timestamp	允许空
xiangmumingcheng	项目名称	varchar(200)	允许空
xiangmuleixing	项目类型	varchar(200)	允许空
xiangmutupian	项目图片	varchar(200)	允许空
xiangmujiage	项目价格	int(11)	允许空
`keyueshijian	可约时间	varchar(200)	允许空
yuyueshijian	预约时间	datetime	允许空
yuyuebeizhu	预约备注'	varchar(200)	允许空
sfsh	是否审核	varchar(200)	允许空
shhf	审核回复'	longtext	允许空

表4-4 users管理员信息表

列名	说明	类型 ( 长度 )	备注
id	编号	bigint(20)	不允许空，主键
username	用户名	varchar(100)	允许空
password	密码	varchar(100)	允许空
role	角色	varchar(100)	允许空
addtime	添加时间	timestamp	允许空

表4-5 yonghu用户信息表

列名	说明	类型 ( 长度 )	备注
id	编号	bigint(20)	不允许空，主键
addtime	创建时间	timestamp	允许空
zhanghao	账号	varchar(200)	允许空
mima	密码	varchar(200)	允许空
xingming	姓名	varchar(200)	允许空
xingbie	性别	varchar(200)	允许空
shouji`	手机	varchar(200)	允许空
youxiang	邮箱	varchar(200)	允许空
`shenfenzheng	身份证	varchar(200)	允许空
zhaopian	照片	varchar(200)	允许空
beizhu`	备注	longtext	允许空

第5章 系统的实现

5.1 用户功能模块的实现

5.1.1系统主界面

用户可进入系统主界面查看系统信息，系统主界面的运行效果如图5-1所示.

图5-1 系统主界面

5.1.2用户登录界面

用户要想实现图书购买等操作，必须进行登录操作，在登录界面输入正确的用户名和密码，选择登录类型，点击登录按钮进行登录，用户登录界面如图5-2所示。

图5-2用户登录界面

5.1.3个人信息界面

用户登录后可对个人信息进行修改，个人信息界面的运行效果如图5-3所示.

图5-3 个人信息界面

5.1.4汽车详情界面

用户可选择汽车查看汽车详情信息，登录后可进行申请售后和购买操作，汽车详情界面如图5-4所示。

图5-4 汽车详情界面

5.1.5汽车美容详情界面

用户可选择汽车美容查看详情信息，登录后可进行预约操作，汽车美容详情界面展示如图5-5所示。

图5-5 汽车美容详情界面

5.1.6配件详情界面

用户可选择配件查看详情信息，登录后可进行购买操作，配件详情界面如图5-6所示。

图5-6 配件详情界面

5.1.7维修保养详情界面

用户可选择维修保养项目查看详情信息，登录后可进行预约操作，维修保养详情界面如图5-7所示。

图5-7 维修保养详情界面

5.2 管理员功能模块的实现

5.2.1用户管理界面

管理员登录后可增删改查用户信息，用户管理界面如图5-8所示 。

图5-8 用户管理界面

5.2.2汽车分类管理界面

管理员可增删改查汽车分类信息，汽车分类管理界面展示如图5-9所示 。

图5-9 汽车分类管理界面

5.2.3汽车管理界面

管理员可查看、添加、修改和删除汽车信息，汽车管理界面展示如图5-10所示 。

图5-10 汽车管理界面

5.2.4汽车美容管理界面

管理员可增删改查汽车美容信息，对用户预约还可进行审核操作，汽车美容管理界面展示如图5-11所示 。

图5-11 汽车美容管理管理界面

5.2.5配件管理界面

管理员可添加、修改和删除配件信息，配件管理界面如图5-12所示。

图5-12 配件管理界面

5.2.6售后服务管理界面

管理员可增删改查售后服务信息，售后服务管理界面展示如图5-13所示 。

图5-13 售后服务管理界面