共享车位|基于SpringBoot+vue+node共享车位平台的设计与实现-阿里云开发者社区

项目编号：BS-PT-075

前言：

现如今，私家车辆数量越来越多，方便了人们出行的同时，也带来了很多问题。其中，停车成了最大的难题，本平台的前台帮助用户快速查找空闲车位，做到高效停车，后台帮助停车场管理员管理有限的车位资源。

本文针对上述问题，设计开发出一个B/S架构的基于SpringBoot框架技术的共享车位平台。在整个平台的开发周期中，开发选用SpringBoot框架，选用MYSQL数据库和Redis数据库来实现。主要完成以下几个方面的研究：

1.分析在SpringBoot应用程序开发过程中所采用的C/S结构和B/S结构的优缺点，提出了基于SpringBoot共享车位平台的基本实行方案；

2.对功能需求详细分析，并且也对非功能需求以及系统运行环境进行简单分析，分析各个功能模块的设计和实现，分析寻找车位流程以及实现方案。

3.实现了登录注册、用户管理、停车场管理、车位管理、车位和车辆状态监控、查看用户留言、查看附近停车场、查看车位信息、在线留言等功能。

本平台UI简洁美观，极易使用，功能完善。为用户提供停车场、车位等信息，方便用户快速寻找空闲的停车位；方便管理员高效管理车位资源，及时查看用户反馈信息，快速了解车位情况。

一，项目简介

本平台包括前台系统和后台管理系统，前台系统供用户使用，后台管理系统供管理员使用。管理员又分为超级管理员和普通管理员两个角色，超级管理员除了拥有普通管理员的所有权限外，还能对普通管理员进行管理。用户可以进行登录注册、找回密码、查看附近停车场、查看车位信息、在线留言。管理员可以进行登录注册、管理用户信息、管理停车场信息、管理停车场车位信息、状态监控、查看用户在线留言。

前台系统

用户对象：

（1）用户可以登录、通过手机验证码辅助注册账号、找回密码。

（2）用户可以在个人中心完善个人信息、修改个人信息、修改密码等操作。

（3）用户可以查看附近停车场信息。

（4）用户可以查看指定停车场内车位的信息，使用空闲车位，并支持一键快速查找空闲车位。

（5）用户可以在线留言，通过发表留言及时向管理员反馈遇到的问题。

（6）用户可以通过地图查看公司所在地理位置，以及公司地址、联系方式等信息。

后台管理系统

超级管理员对象：

（1）超级管理员对普通管理员进行管理，可以新增管理员、删除管理员、修改管理员信息、查看管理员列表、重置管理员密码。

（2）超级管理员拥有普通管理员的所有权限。

普通管理员对象(以下统称为“管理员”)：

（1）管理员可以在个人中心完善个人信息、修改个人信息、修改密码等操作。

（2）管理员对用户信息进行管理，可以停用/启用、新增、删除、条件查询用户，修改用户信息、导出用户信息。

（3）管理员对停车场信息进行管理，可以停用/启用、新增、删除、条件查询停车场，修改停车场信息、导出停车场信息。

（4）管理员对停车场车位信息进行管理，可以新增、删除、条件查询车位，修改车位信息。

（5）管理员可以监控所有的车辆状态和指定停车场内的车位状态，生成统计数据后通过饼状图和柱状图进行数据展示。

（6）用户留言后，管理员可以在用户在线留言中查看留言内容和留言人信息，并可以调整留言处理进度。

二，环境介绍

语言环境：Java: jdk1.8

数据库：Mysql: mysql5.7

应用服务器：Tomcat: tomcat8.5.31

开发工具：IDEA或eclipse

后台开发技术：Springboot+Mybatis

前端开发技术：Vue+ElementUI+Nodejs

三，系统展示

5.1 用户信息管理

用户信息管理主页面如下图5-1所示，管理员登录后点击用户信息管理进入主页面，可以查看所有用户的综合信息，并可以进行禁用/停用用户账号、多条件模糊查询数据、新增用户页面如图5-2所示、修改用户信息页面如下图5-2所示、删除用户、导出用户信息等操作。

图5-1 用户信息管理主页面

图5-2 新增用户页面

图5-3 修改用户信息页面

5.2 用户在线留言管理

用户留言管理主页面如下图5-4所示，管理员登录后进入留言管理主页面，可以查看用户的留言、支持多条件模糊查询、并可以对留言的处理进度进行调整如下图5-5所示，以及删除留言等操作，主要是为了帮助管理员查看用户的留言，从而针对留言采取对应的措施。用户可以在前台发表留言，发表留言页面如图5-6所示。

图5-4 用户留言管理主页面

图5-5 调整留言状态

图5-6 前台用户发表留言页面

5.3 前台登录注册模块

如果车主还没有账号，可以通过注册一个新的账号并登录享受本平台提供的服务，注册页面如图5-7所示。用户登录成功后，会返回一个token作为身份令牌，前端再将token在请求拦截器中存进请求头信息中，后端根据token查询出对应的用户信息并返回，登录页面如图5-8所示，如果忘记了登录密码，还可以通过手机验证码找回密码，找回密码如图5-9所示。

图5-7 前台注册页面

图5-8 前台登录页面

图5-9前台找回密码页面

5.4 状态监控模块

以监控车辆状态为例，管理员登录后可以在车辆列表中查看具体的车辆信息如图5-10所示，也可以点击生成统计数据，并在ECharts提供的饼状图和柱状图上展示，如图5-11所示，可以对车辆状态进行宏观监控，主要是为了方便管理员对当前的车位、车辆状态有一个直观的认识。

图5-10 车辆信息列表页面

图5-11 统计数据展示页面

5.1 用户停放车辆实现

用户需要寻找车位停车时，登录本平台前台后，点击附近停车场，进入查看停车场列表页面如图5-12所示，选择一个停车场后进入该停车场内所有车位列表页面如图5-13所示，寻找一个空闲车位后点击使用按钮(也可以点击一键快速查找空闲车位)，在弹窗中填写将要停放的车辆信息并提交后，就可以使用该车位了如图5-14所示。

图5-12 停车场列表页面

图5-13 车位列表页面

图5-1 提交车辆信息页面

四，核心代码展示

package com.znz.web.controller.car;
import com.znz.car.domain.CarCar;
import com.znz.car.domain.vo.QueryCarListVo;
import com.znz.car.service.ICarCarService;
import com.znz.common.annotation.Log;
import com.znz.common.core.controller.BaseController;
import com.znz.common.core.domain.AjaxResult;
import com.znz.common.core.page.TableDataInfo;
import com.znz.common.enums.BusinessType;
import com.znz.common.utils.poi.ExcelUtil;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletResponse;
import java.util.List;
/**
 * 车辆Controller
 *
 * @author znz
 * @date 2022-10-15
 */
@Api(tags = "车辆状态")
@RestController
@RequestMapping("/car/car")
public class CarCarController extends BaseController {
    @Autowired
    private ICarCarService carCarService;
    /**
     * 查询车辆列表
     */
    @ApiOperation("查询车辆列表")
    @PreAuthorize("@ss.hasPermi('car:carSta:list')")
    @GetMapping("/list")
    public TableDataInfo list(CarCar carCar) {
        startPage();
        List<QueryCarListVo> list = carCarService.selectCarCarList(carCar);
        return getDataTable(list);
    }
    /**
     * 导出车辆列表
     */
    @PreAuthorize("@ss.hasPermi('car:carSta:export')")
    @Log(title = "车辆", businessType = BusinessType.EXPORT)
    @PostMapping("/export")
    public void export(HttpServletResponse response, CarCar carCar) {
        List<QueryCarListVo> list = carCarService.selectCarCarList(carCar);
        ExcelUtil<QueryCarListVo> util = new ExcelUtil<QueryCarListVo>(QueryCarListVo.class);
        util.exportExcel(response, list, "车辆数据");
    }
    /**
     * 获取车辆详细信息
     */
    @PreAuthorize("@ss.hasPermi('car:carSta:query')")
    @GetMapping(value = "/{carId}")
    public AjaxResult getInfo(@PathVariable("carId") Long carId) {
        return AjaxResult.success(carCarService.selectCarCarByCarId(carId));
    }
    /**
     * 新增车辆
     */
    @PreAuthorize("@ss.hasPermi('car:carSta:add')")
    @Log(title = "车辆", businessType = BusinessType.INSERT)
    @PostMapping
    public AjaxResult add(@RequestBody CarCar carCar) {
        return toAjax(carCarService.insertCarCar(carCar));
    }
    /**
     * 修改车辆状态
     */
    @PreAuthorize("@ss.hasPermi('car:carSta:edit')")
    @Log(title = "车辆", businessType = BusinessType.UPDATE)
    @PutMapping
    public AjaxResult edit(@RequestParam("carId") Long carId,@RequestParam("carStatus")String carStatus) {
        CarCar carCar = new CarCar();
        carCar.setCarId(carId);
        carCar.setStatus(carStatus);
        return toAjax(carCarService.updateCarCar(carCar));
    }
    /**
     * 删除车辆
     */
    @PreAuthorize("@ss.hasPermi('car:carSta:remove')")
    @Log(title = "车辆", businessType = BusinessType.DELETE)
    @DeleteMapping("/{carIds}")
    public AjaxResult remove(@PathVariable Long[] carIds) {
        return toAjax(carCarService.deleteCarCarByCarIds(carIds));
    }
}

package com.znz.web.controller.car;
import com.znz.car.domain.CarCarpark;
import com.znz.car.service.ICarCarparkService;
import com.znz.common.annotation.Log;
import com.znz.common.constant.Constants;
import com.znz.common.core.controller.BaseController;
import com.znz.common.core.domain.AjaxResult;
import com.znz.common.core.page.TableDataInfo;
import com.znz.common.enums.BusinessType;
import com.znz.common.utils.poi.ExcelUtil;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletResponse;
import java.util.List;
/**
 * 停车场Controller
 *
 * @author znz
 * @date 2022-10-14
 */
@Api(tags = "停车场表")
@RestController
@RequestMapping("/car/carpark")
public class CarCarparkController extends BaseController {
    @Autowired
    private ICarCarparkService carCarparkService;
    /**
     * 查询所有数据
     */
    @ApiOperation("查询所有停车场数据")
    @GetMapping("/getAll")
    public AjaxResult getAll() {
        List<CarCarpark> carParkList = carCarparkService.getAll();
        for (CarCarpark carCarpark : carParkList) {
            String photo = carCarpark.getPhoto();
            photo = Constants.PHOTO_PREFIX + photo;
            carCarpark.setPhoto(photo);
        }
        return AjaxResult.success().put("carParkList", carParkList);
    }
    /**
     * 查询停车场列表(带分页-后台)
     */
    @PreAuthorize("@ss.hasPermi('car:carpark:list')")
    @GetMapping("/list")
    public TableDataInfo list(CarCarpark carCarpark) {
        startPage();
        List<CarCarpark> list = carCarparkService.selectCarCarparkList(carCarpark);
        return getDataTable(list);
    }
    /**
     * 导出停车场列表
     */
    @PreAuthorize("@ss.hasPermi('car:carpark:export')")
    @Log(title = "停车场", businessType = BusinessType.EXPORT)
    @PostMapping("/export")
    public void export(HttpServletResponse response, CarCarpark carCarpark) {
        List<CarCarpark> list = carCarparkService.selectCarCarparkList(carCarpark);
        ExcelUtil<CarCarpark> util = new ExcelUtil<CarCarpark>(CarCarpark.class);
        util.exportExcel(response, list, "停车场数据");
    }
    /**
     * 获取停车场详细信息
     */
    @PreAuthorize("@ss.hasPermi('car:carpark:query')")
    @GetMapping(value = "/{carparkId}")
    public AjaxResult getInfo(@PathVariable("carparkId") Long carparkId) {
        return AjaxResult.success(carCarparkService.selectCarCarparkByCarparkId(carparkId));
    }
    /**
     * 新增停车场
     */
    @PreAuthorize("@ss.hasPermi('car:carpark:add')")
    @Log(title = "停车场", businessType = BusinessType.INSERT)
    @PostMapping
    public AjaxResult add(@RequestBody CarCarpark carCarpark) {
        return toAjax(carCarparkService.insertCarCarpark(carCarpark));
    }
    /**
     * 修改停车场
     */
    @PreAuthorize("@ss.hasPermi('car:carpark:edit')")
    @Log(title = "停车场", businessType = BusinessType.UPDATE)
    @PutMapping
    public AjaxResult edit(@RequestBody CarCarpark carCarpark) {
        return toAjax(carCarparkService.updateCarCarpark(carCarpark));
    }
    /**
     * 删除停车场
     */
    @PreAuthorize("@ss.hasPermi('car:carpark:remove')")
    @Log(title = "停车场", businessType = BusinessType.DELETE)
    @DeleteMapping("/{carparkIds}")
    public AjaxResult remove(@PathVariable Long[] carparkIds) {
        return toAjax(carCarparkService.deleteCarCarparkByCarparkIds(carparkIds));
    }
    /**
     *  分页查询停车场数据(前台)
     */
    @ApiOperation("前台-分页查询停车场列表")
    @GetMapping("/pageList")
    public TableDataInfo pageList(CarCarpark carCarpark) {
        startPage();
        List<CarCarpark> list = carCarparkService.selectCarCarparkList(carCarpark);
        for (CarCarpark carpark : list) {
            String photo = carpark.getPhoto();
            photo = Constants.PHOTO_PREFIX + photo;
            carpark.setPhoto(photo);
        }
        return getDataTable(list);
    }
}

package com.znz.web.controller.car;
import com.znz.car.domain.CarMessage;
import com.znz.car.service.ICarMessageService;
import com.znz.common.annotation.Log;
import com.znz.common.core.controller.BaseController;
import com.znz.common.core.domain.AjaxResult;
import com.znz.common.core.page.TableDataInfo;
import com.znz.common.enums.BusinessType;
import com.znz.common.utils.poi.ExcelUtil;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletResponse;
import java.util.List;
/**
 * 留言Controller
 *
 * @author znz
 * @date 2022-10-17
 */
@RestController
@RequestMapping("/car/message")
public class CarMessageController extends BaseController {
    @Autowired
    private ICarMessageService carMessageService;
    /**
     * 查询留言列表
     */
    @PreAuthorize("@ss.hasPermi('car:message:list')")
    @GetMapping("/list")
    public TableDataInfo list(CarMessage carMessage) {
        startPage();
        List<CarMessage> list = carMessageService.selectCarMessageList(carMessage);
        return getDataTable(list);
    }
    /**
     * 导出留言列表
     */
    @ApiOperation("导出留言列表")
    @PreAuthorize("@ss.hasPermi('car:message:export')")
    @Log(title = "留言", businessType = BusinessType.EXPORT)
    @PostMapping("/export")
    public void export(HttpServletResponse response, CarMessage carMessage) {
        List<CarMessage> list = carMessageService.selectCarMessageList(carMessage);
        ExcelUtil<CarMessage> util = new ExcelUtil<CarMessage>(CarMessage.class);
        util.exportExcel(response, list, "留言数据");
    }
    /**
     * 获取留言详细信息
     */
    @PreAuthorize("@ss.hasPermi('car:message:query')")
    @GetMapping(value = "/{messageId}")
    public AjaxResult getInfo(@PathVariable("messageId") Long messageId) {
        return AjaxResult.success(carMessageService.selectCarMessageByMessageId(messageId));
    }
    /**
     * 新增留言
     */
    @PreAuthorize("@ss.hasPermi('car:message:add')")
    @Log(title = "留言", businessType = BusinessType.INSERT)
    @PostMapping
    public AjaxResult add(@RequestBody CarMessage carMessage) {
        return toAjax(carMessageService.insertCarMessage(carMessage));
    }
    /**
     * 修改留言
     */
    @PreAuthorize("@ss.hasPermi('car:message:edit')")
    @Log(title = "留言", businessType = BusinessType.UPDATE)
    @PutMapping
    public AjaxResult edit(@RequestBody CarMessage carMessage) {
        return toAjax(carMessageService.updateCarMessage(carMessage));
    }
    /**
     * 删除留言
     */
    @PreAuthorize("@ss.hasPermi('car:message:remove')")
    @Log(title = "留言", businessType = BusinessType.DELETE)
    @DeleteMapping("/{messageIds}")
    public AjaxResult remove(@PathVariable Long[] messageIds) {
        return toAjax(carMessageService.deleteCarMessageByMessageIds(messageIds));
    }
}

五，项目总结

通过社会调查发现，目前市面上的共享车位平台并不多，传统的人力管理模式仍是市场的主流，这样的管理模式存在着许多的问题，例如停车场管理员无法及时知晓车位出现损坏或者车辆出现故障等情况而造成车位资源长时间无法得到有效利用、车主无法及时获取停车场和停车场车位信息、出现故障还需要亲自去寻找停车场管理员反映故障情况。

开发本平台的目的就是解决上述诸多问题，用户只需要借助互联网就可以快速获取附近停车场、车位的综合信息，实现快速寻找空闲车位，解决了到达目的地后还需要盲目地寻找停车位置等问题。用户发现车辆或者设施出现故障后，可以在本平台的在线留言一栏进行留言，大大简化了寻找停车场管理员反映故障情况的过程。

共享车位|基于SpringBoot+vue+node共享车位平台的设计与实现

项目编号：BS-PT-075

前言：

一，项目简介

二，环境介绍

三，系统展示

5.1 用户停放车辆实现

四，核心代码展示

五，项目总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

共享车位|基于SpringBoot+vue+node共享车位平台的设计与实现

项目编号：BS-PT-075

前言：

一，项目简介

二，环境介绍

三，系统展示

5.1 用户停放车辆实现

四，核心代码展示

五，项目总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景