基于ssm+maven+idea的滴滴网络租车系统设计与实现

心已赠人 2024-04-02 04:45 62阅读 0赞

1.  绪 论 1  
    1.1 课题来源 1  
    1.2 课题背景 1  
    1.3 系统设计的目标 1
2.  系统可行性分析 2  
    2.1 经济可行性 2  
    2.2 技术可行性 2  
    2.3 操作可行性 2  
    2.4 维护可行性 2
3.  关键技术介绍 3  
    3.1 软件环境 3  
    3.2 开发技术简介 3  
    3.2.1 Java简介 3  
    3.2.2 JavaScrapt简介 3  
    3.2.3 jQuery简介 4  
    3.2.4 MySQL简介 4  
    3.2.5 Spring简介 4  
    3.2.6 Spring MVC简介 4  
    3.2.7 MyBatis 简介 4  
    3.2.8 Maven简介 5  
    3.3 应用插件简介 5  
    3.3.1 Validform表单验证 5  
    3.3.2 bootStrap框架 5  
    3.3.3 autoComplete自动填充 5  
    3.3.4 arttemplate 模板插件 5  
    3.3.5 dialog 弹出框插件 6  
    3.3.6 idcode 验证码插件 6
4.  系统概要设计 7  
    4.1 需求分析 7  
    4.1.1 用户需求分析图 7  
    4.1.2 管理员需求分析图 7  
    4.1.3 超级管理员需求分析图 8  
    4.2 数据库设计 8
5.  系统详细设计 11  
    5.1 用户注册与登陆 11  
    5.1.1 用户注册 11  
    5.1.2 用户激活 11  
    5.1.3 用户登陆 12  
    5.2 头部栏与底部栏 12  
    5.2.1 头部栏 12  
    5.2.2 底部栏 14  
    5.3 首页 14  
    5.4 详细页面 15  
    5.4.1 车辆详情页面 17  
    5.4.2 商家详情页面 18  
    5.5 用户页面 18  
    5.5.1 普通用户 19  
    5.5.2 普通管理员 19  
    5.5.3 超级管理员 20  
    5.6 车辆页面 20  
    5.6.1 上传车辆页面 21  
    5.6.2 编辑车辆页面 22  
    5.7 商家页面 22  
    5.7.1 新建商家页面 22  
    5.7.2 编辑商家页面 23  
    5.8 错误页面 23  
    5.8.1 404页面 24  
    5.8.2 500错误页面 24  
    5.9 后台代码说明 24
6.  系统测试 26  
    6.1 后台代码测试 26  
    6.2 程序运行测试 26  
    6.2.1 注册 26  
    6.2.2 登录 27  
    6.2.3 修改头像测试 28  
    6.2.4 租赁车辆测试 28  
    总结 30  
    致谢 31  
    参考文献 32  
    基于SSM框架的网络租车系统，其开发主要包括前台页面数据的展示，后台是基于MySQL数据库的restful api开发，利用ajax请求api将数据展示在前台页面\[2\]。  
    （1） 用户邮箱注册与验证码登陆：用户注册后需要通过邮箱所发邮件链接进行激活，激活成功后才能登陆，否则会提示未激活。当用户选中车辆需要租赁时会需要用户登陆。  
    （2） 查看用户基本信息，修改用户密码，上传用户头像等。  
    （3） 车辆信息展示，使用轮播图展示车辆图片，展示基本车辆信息，使用百度地图api展示商家位置。  
    （4） 商家信息展示，展示基本商家信息，展示商家下的车辆。使用百度地图api展示商家位置。  
    （5） 用户成功租赁车辆后会向用户和商家发送邮件提醒商家和用户。  
    （6） 上传车辆，修改车辆。  
    （7） 上传商家，修改商家。  
    （8） 设置管理员，删除管理员。
7.  关键技术介绍  
    3.1 软件环境  
    软件环境是一个程序的运行土壤，开发程序时需要就要设定好的，如果环境错误或缺失很容易造成系统崩溃或运行错误。  
    操作系统：Window10专业版  
    Jdk：1.8.0  
    服务器：apache-tomcat-9.0.6  
    数据库：MySQL 5.7  
    系统开发工具：IntelliJ IDEA 2017.2.6  
    3.2 开发技术简介  
    本软件系统开发所用到的技术：MySQL 、Java、JavaScrapt、jQuery、Sping、Spring MVC、MyBatis、Maven。

用户总体分为三种：普通用户，管理员，超级管理员\[8\]。  
超级管理员：是网站的负责人，可以新建商家，并可以对商家信息进行修改，也可以删除违法或不再继续运营的商家。也可以上传车辆，但是需要指定商家。  
管理员：商家的负责人，可以上传车辆，商家指定为自己所在的商家。也可以修改车辆，通过条件筛选车辆。删除不再继续租赁的车辆  
用户：浏览车辆，根据条件筛选车辆，登录成功后租赁车辆。用户注册时没有头像，有一个默认头像，进入个人信息页面后可以修改自己的头像。并修改自己的用户名  
这三种身份都是用户，本文转载自http://www.biyezuopin.vip/onews.asp?id=14736都需要注册，超级管理员是预先设定的。所以数据库中需要一个用户表，然后一个字段说明用户级别。一个表存储商家下的管理员。

<%--
      Created by IntelliJ IDEA.
      User: ytuln
      Date: 2018/1/26
      Time: 9:53
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>滴滴租车</title>
        <link rel="shortcut icon" type="image/x-icon" href="<%=request.getContextPath()%>/skins/images/car.ico" media="screen"/>
        <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/skins/css/public/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/skins/css/public/autocomplete.css">
        <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/skins/css/public/header.css">
        <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/skins/css/public/footer.css">
        <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/skins/css/index.css">
    </head>
    <body>
    
    <jsp:include page="public/header.jsp"></jsp:include>
    <div class="content">
        
        <div id="image-around" class="carousel slide">
            <ol class="carousel-indicators">
                <li data-target="#image-around" data-slide-to="0" class="active"></li>
                <li data-target="#image-around" data-slide-to="1"></li>
                <li data-target="#image-around" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <img src="<%=request.getContextPath()%>/skins/images/1234.jpg" alt="First slide">
                </div>
                <div class="item">
                    <img src="<%=request.getContextPath()%>/skins/images/2345.jpg" alt="Second slide">
                </div>
                <div class="item">
                    <img src="<%=request.getContextPath()%>/skins/images/3456.jpg" alt="Third slide">
                </div>
            </div>
            <a class="carousel-control left" href="#image-around"
               data-slide="prev">‹</a>
            <a class="carousel-control right" href="#image-around"
               data-slide="next">›</a>
        </div>
        
    
        <div class="select row">
            
            <div class="col-md-4 item-select brand-select">
                <p class="select_title">品牌
                    <i class="glyphicon glyphicon-chevron-down"></i>
                    <span class="badge brand"></span>
                    <button class="brand-reset">重置</button>
                </p>
                <div class="item-message">
                    <div class="car-brand">
                        <a>
                        <img src="<%=request.getContextPath()%>/skins/images/bieke.png">
                        <span>别克</span>
                        </a>
                    </div>
                    <div class="car-brand">
                        <a>
                        <img src="<%=request.getContextPath()%>/skins/images/bentian.png">
                        <span>本田</span>
                        </a>
                    </div>
                    <div class="car-brand">
                        <a>
                        <img src="<%=request.getContextPath()%>/skins/images/dazhong.png">
                        <span>大众</span>
                        </a>
                    </div>
                    <div class="car-brand">
                        <a>
                        <img src="<%=request.getContextPath()%>/skins/images/fute.png">
                        <span>福特</span>
                        </a>
                    </div>
                    <div class="car-brand">
                        <a>
                        <img src="<%=request.getContextPath()%>/skins/images/richan.png">
                        <span>日产</span>
                        </a>
                    </div>
                    <div class="car-brand">
                        <a>
                        <img src="<%=request.getContextPath()%>/skins/images/biaozhi.png">
                        <span>标致</span>
                        </a>
                    </div>
                    <div class="car-brand">
                        <a>
                        <img src="<%=request.getContextPath()%>/skins/images/jeep.png">
                        <span>Jeep</span>
                        </a>
                    </div>
                    <div class="car-brand">
                        <a>
                        <img src="<%=request.getContextPath()%>/skins/images/baoma.png">
                        <span>宝马</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                        <img src="<%=request.getContextPath()%>/skins/images/mazida.png">
                        <span>马自达</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                        <img src="<%=request.getContextPath()%>/skins/images/woerwo.png">
                        <span>沃尔沃</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                        <img src="<%=request.getContextPath()%>/skins/images/aerfa.png">
                        <span>阿尔法罗密欧</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                        <img src="<%=request.getContextPath()%>/skins/images/aodi.png">
                        <span>奥迪</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                        <img src="<%=request.getContextPath()%>/skins/images/benchi.png">
                        <span>奔驰</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                        <img src="<%=request.getContextPath()%>/skins/images/benteng.png">
                        <span>奔腾</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                        <img src="<%=request.getContextPath()%>/skins/images/byd.png">
                        <span>比亚迪</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                        <img src="<%=request.getContextPath()%>/skins/images/dongfeng.png">
                        <span>东风</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                        <img src="<%=request.getContextPath()%>/skins/images/dongfengfengxing.png">
                        <span>东风风行</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                            <img src="<%=request.getContextPath()%>/skins/images/dongfengfengshen.png">
                            <span>东风风神</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                            <img src="<%=request.getContextPath()%>/skins/images/fengtian.png">
                            <span>丰田</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                            <img src="<%=request.getContextPath()%>/skins/images/jianghuai.png">
                            <span>江淮</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                            <img src="<%=request.getContextPath()%>/skins/images/leinuo.png">
                            <span>雷诺</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                            <img src="<%=request.getContextPath()%>/skins/images/linken.png">
                            <span>林肯</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                            <img src="<%=request.getContextPath()%>/skins/images/luhu.png">
                            <span>路虎</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                            <img src="<%=request.getContextPath()%>/skins/images/mashaladi.png">
                            <span>玛莎拉蒂</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                            <img src="<%=request.getContextPath()%>/skins/images/qiya.png">
                            <span>起亚</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                            <img src="<%=request.getContextPath()%>/skins/images/rongwei.png">
                            <span>荣威</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                            <img src="<%=request.getContextPath()%>/skins/images/sanling.png">
                            <span>三菱</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                            <img src="<%=request.getContextPath()%>/skins/images/tesila.png">
                            <span>特斯拉</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                            <img src="<%=request.getContextPath()%>/skins/images/woerwo.png">
                            <span>沃尔沃</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                            <img src="<%=request.getContextPath()%>/skins/images/yingfeinidi.png">
                            <span>英菲尼迪</span>
                        </a>
                    </div>
                    <div class="car-brand hideBrand">
                        <a>
                            <img src="<%=request.getContextPath()%>/skins/images/zhongtai.png">
                            <span>众泰</span>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4 item-select type-select">
                <p class="select_title">车型
                    <span class="badge type"></span>
                    <button class="type-reset">重置</button>
                </p>
                <div class="item-message">
                    <a>
                        <img src="<%=request.getContextPath()%>/skins/images/SUV.png">
                        <span>SUV</span>
                    </a>
                    <a>
                        <img src="<%=request.getContextPath()%>/skins/images/xiaoche.png">
                        <span>紧凑型车</span>
                    </a>
                    <a>
                        <img src="<%=request.getContextPath()%>/skins/images/kache.png">
                        <span>卡车</span>
                    </a>
                    <a>
                        <img src="<%=request.getContextPath()%>/skins/images/pika.png">
                        <span>皮卡</span>
                    </a>
                    <a>
                        <img src="<%=request.getContextPath()%>/skins/images/huoche.png">
                        <span>货车</span>
                    </a>
                    <a>
                        <img src="<%=request.getContextPath()%>/skins/images/MPV.png">
                        <span>MPV</span>
                    </a>
                    <a>
                        <img src="<%=request.getContextPath()%>/skins/images/paoche.png">
                        <span>跑车</span>
                    </a>
                </div>
            </div>
            
            <div class="col-md-4 item-select price-select">
                <p class="select_title">价格/天
                    <span class="badge startPrice"></span>
                    <span class="connection"> - </span>
                    <span class="badge endPrice"></span>
                    <button class="price-reset">重置</button>
                </p>
                <div class="item-message">
                    <a startPrice="0" endPrice="100">
                        0-100
                    </a>
                    <a startPrice="100" endPrice="300">
                        100-300
                    </a>
                    <a startPrice="300" endPrice="500">
                        300-500
                    </a>
                    <a startPrice="500" endPrice="1000">
                        500-1000
                    </a>
                    <br>
                    <span>请输入价格区间</span><br>
                    <input type="number" class="input-startPrice" placeholder="请输入起始金额">
                    <input type="number" class="input-endPrice" placeholder="请输入结束金额">
                    <button class="conform-price">确定</button>
                </div>
    
            </div>
        </div>
    
        
        <%-- 开始展示一部分，经过上面筛选之后这里的车辆会改变 --%>
        <div class="row carInfo-list">
    
        </div>
    </div>
    
    <jsp:include page="public/footer.jsp"></jsp:include>
    
    <%-- 车辆模板 --%>
    <script type="text/html" id="resultList">
        {
        {
        each resultSet as searchData}}
        <div href="{
        {searchData.carId}}" class="col-md-3 carInfo">
            <a href="<%=request.getContextPath()%>/jsp/detail.jsp?carId={
        {searchData.carId}}">
            <img src="<%=request.getContextPath()%>/skins/images/{
        {searchData.carImage}}">
            <div>
                <p>
                    <span class="car-price">￥{
        {
        searchData.carPrice}}</span>
                    <span class="car-rent-count">租赁次数：{
        {
        searchData.rentCount}}</span>
                </p>
                <p>
                    剩余车辆：{
        {
        searchData.carAmount}}
                </p>
                <p>
                    <span>{
        {
        searchData.carBrand}}  {
        {
        searchData.carName}}</span>
                </p>
                <a href="<%=request.getContextPath()%>/jsp/detail.jsp?shopId={
        {searchData.shopId}}">{
        {
        searchData.shopName}}</a>
            </div>
            </a>
        </div>
        {
        {
        /each}}
    </script>
    </body>
    <script type="text/javascript">
        var context = "<%=request.getContextPath()%>";
    </script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/skins/js/public/jquery.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/skins/js/public/bootstrap.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/skins/js/public/public.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/skins/js/public/autocomplete.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/skins/js/public/header.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/skins/js/public/arttemplate.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/skins/js/index.js"></script>
    </html>

![在这里插入图片描述][372e43ab30e1414c97207e1ec776257e.png_pic_center]  
![在这里插入图片描述][1d66b99af98f4b0db8c8df0d8ca65db6.png_pic_center]  
![在这里插入图片描述][a1ad9f96c8064fcaad143a41ae39bde1.png_pic_center]  
![在这里插入图片描述][fba70fafd3034003b2e83f763dbeb277.png_pic_center]  
![在这里插入图片描述][efe6869bc02845d7a4dbbf74dba8e7bc.png_pic_center]  
![在这里插入图片描述][ea2f651fc92e4cdb8c545c9bfc90af5a.png_pic_center]  
![在这里插入图片描述][d26191e9ce514961bc7b684098552715.png_pic_center]  
![在这里插入图片描述][e01c79a683004707a7a6cdc5e88e0625.png_pic_center]  
![在这里插入图片描述][b7b491692bc84b8b83ce4f95dd355879.png_pic_center]  
![在这里插入图片描述][92539267a57c481e8bb761030aaf1f44.png_pic_center]  
![在这里插入图片描述][169d8e9a4ac745f3ae0b9faf24b0cd7c.png_pic_center]  
![在这里插入图片描述][3260b234127f46e9abc0bcac73ce7f29.png_pic_center]  
![在这里插入图片描述][673d744c9ade4b3b9cbf4d5e9f9d1504.png_pic_center]  
![在这里插入图片描述][9f0d3defc7ff45dbafc7f9731963a54e.png_pic_center]  
![在这里插入图片描述][7b3c4abee9144a9fa882287dd282208c.png_pic_center]  
![在这里插入图片描述][413670729298465caa62f17efa36f62d.png_pic_center]  
![在这里插入图片描述][cf25aa2634004bc48b4fdde4b9cd4c12.png_pic_center]  
![在这里插入图片描述][cf55b5fafe32457b9f49a8a95818f656.png_pic_center]  
![在这里插入图片描述][db68ea6257024f2380eaad44ef131a21.png_pic_center]  
![在这里插入图片描述][5c7c1006e4ca43e3bff2e944159ce3d2.png_pic_center]  
![在这里插入图片描述][68f516108c5c428daf9b5901e1d48290.png_pic_center]  
![在这里插入图片描述][fb3d71e939414e6285be6413645e28c3.png_pic_center]

[372e43ab30e1414c97207e1ec776257e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/4dc3944c756c42a6b3fc7e2d0c37ce96.png
[1d66b99af98f4b0db8c8df0d8ca65db6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/fbebd088c752470fb679675a65dd64b0.png
[a1ad9f96c8064fcaad143a41ae39bde1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/00deecf470b64ad78ff7cc94426cc198.png
[fba70fafd3034003b2e83f763dbeb277.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/90287ec18270436eb3933895c80abb73.png
[efe6869bc02845d7a4dbbf74dba8e7bc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/59d8ce7221e74193978b7b62d0fe6d94.png
[ea2f651fc92e4cdb8c545c9bfc90af5a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/e325750acc9f48c4ab6702f686144839.png
[d26191e9ce514961bc7b684098552715.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/022502b02e4248ecb73a783d0da3b76e.png
[e01c79a683004707a7a6cdc5e88e0625.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/822324bbde8842d2bbe230119df86e3a.png
[b7b491692bc84b8b83ce4f95dd355879.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/1396068df89d4f819f46766bd3d33176.png
[92539267a57c481e8bb761030aaf1f44.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/593de231a361463785eb2d202542e5f1.png
[169d8e9a4ac745f3ae0b9faf24b0cd7c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/28087cd1306c4698a54cca6cbc7ad084.png
[3260b234127f46e9abc0bcac73ce7f29.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/af378eb813644b888ba5690581371795.png
[673d744c9ade4b3b9cbf4d5e9f9d1504.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/247049e735314844a12280b93b827fbd.png
[9f0d3defc7ff45dbafc7f9731963a54e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/a16f00efca234f0a977a8900c35a290f.png
[7b3c4abee9144a9fa882287dd282208c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/476b3d4f29ef4be682da4d1b46a08309.png
[413670729298465caa62f17efa36f62d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/6c4c2b431fb241a0b22dec0f9ea40425.png
[cf25aa2634004bc48b4fdde4b9cd4c12.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/94c2ff1a1d9b4019be3bd3ef2736433d.png
[cf55b5fafe32457b9f49a8a95818f656.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/43782219bdd64f23be007f5ec78e611e.png
[db68ea6257024f2380eaad44ef131a21.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/cb8f1c6c287845fd81faab1422d6da89.png
[5c7c1006e4ca43e3bff2e944159ce3d2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/b1bb4f1f01ce4febb2c65256cb638567.png
[68f516108c5c428daf9b5901e1d48290.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/e5fae7225e7c40fdb292a54d108a12a4.png
[fb3d71e939414e6285be6413645e28c3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/d44bef21af5744329006b771342fa231.png