一、 项目背景与意义随着全球能源转型和“双碳”目标的推进电动汽车EV产业迎来了爆发式增长。与此同时共享经济模式与出行服务的深度融合催生了电动汽车租赁这一新兴市场。“随电行”项目正是在此背景下旨在构建一个高效、智能、用户友好的电动汽车租赁管理平台。项目意义推动绿色出行通过便捷的租赁服务降低私家车保有量减少城市交通碳排放。优化资源配置平台化运营能够提高车辆利用率解决“车找桩难、桩找车难”的痛点。提升用户体验为用户提供从选车、预约、取还车到支付、售后的一站式数字化服务。赋能运营管理为运营商提供车辆监控、订单管理、财务分析、用户行为洞察等全方位后台支持。二、 技术栈选型本项目采用前后端分离的架构模式后端提供 RESTful API前端负责数据展示与用户交互。2.1 后端技术栈 (Spring Boot)核心框架Spring Boot 2.7安全框架Spring Security JWT (JSON Web Token)数据持久层Spring Data JPA数据库MySQL 8.0缓存Redis (用于会话管理、热点数据缓存)消息队列RabbitMQ (用于异步处理订单状态更新、消息通知等)API文档Swagger/OpenAPI 3 (Knife4j)构建工具Maven其他Lombok, MapStruct, Hibernate Validator2.2 前端技术栈 (Vue.js)核心框架Vue 3 (Composition API)构建工具ViteUI组件库Element Plus状态管理Pinia路由Vue Router 4HTTP客户端Axios地图服务高德地图 JavaScript API (用于车辆位置展示与网点选址)图表ECharts (用于后台数据可视化)2.3 开发与部署版本控制Git容器化Docker, Docker ComposeCI/CDJenkins / GitLab CI部署环境Linux (CentOS/Ubuntu)三、 系统核心功能模块设计系统主要分为用户端小程序/Web和管理后台两部分。用户端核心功能用户注册/登录、车辆浏览与筛选、车辆详情查看、在线预约与支付、订单管理、取还车操作、费用结算、评价与投诉。管理后台核心功能车辆信息管理增删改查、状态监控、网点管理、订单管理、用户管理、财务管理、数据统计与报表、系统配置。四、 核心代码实现示例4.1 后端核心车辆信息查询与预约接口实体类 (Vehicle.java)import lombok.Data; import javax.persistence.*; import java.math.BigDecimal; import java.time.LocalDateTime; Entity Data Table(name vehicle) public class Vehicle { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; private String licensePlate; // 车牌号 private String model; // 车型 private String brand; // 品牌 private BigDecimal batteryLevel; // 电量百分比 private BigDecimal mileage; // 里程 private BigDecimal pricePerHour; // 时租价格 private String status; // 状态AVAILABLE, RENTED, MAINTENANCE, OFFLINE private Long stationId; // 所属网点ID private LocalDateTime createTime; private LocalDateTime updateTime; }数据访问层 (VehicleRepository.java)import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.JpaSpecificationExecutor; import org.springframework.stereotype.Repository; import java.util.List; Repository public interface VehicleRepository extends JpaRepositoryVehicle, Long, JpaSpecificationExecutorVehicle { ListVehicle findByStatus(String status); ListVehicle findByStationId(Long stationId); }服务层 (VehicleService.java)import lombok.RequiredArgsConstructor; import org.springframework.data.domain.Page; import org.springframework.data.domain.Pageable; import org.springframework.data.jpa.domain.Specification; import org.springframework.stereotype.Service; import javax.persistence.criteria.Predicate; import java.util.ArrayList; import java.util.List; Service RequiredArgsConstructor public class VehicleService { private final VehicleRepository vehicleRepository; public PageVehicle queryVehicles(String model, String brand, String status, Long stationId, Pageable pageable) { SpecificationVehicle spec (root, query, cb) - { ListPredicate predicates new ArrayList(); if (model ! null !model.isEmpty()) { predicates.add(cb.like(root.get(model), % model %)); } if (brand ! null !brand.isEmpty()) { predicates.add(cb.like(root.get(brand), % brand %)); } if (status ! null !status.isEmpty()) { predicates.add(cb.equal(root.get(status), status)); } if (stationId ! null) { predicates.add(cb.equal(root.get(stationId), stationId)); } return cb.and(predicates.toArray(new Predicate[0])); }; return vehicleRepository.findAll(spec, pageable); } // 其他业务方法更新车辆状态、获取车辆详情等 }控制器 (VehicleController.java)import lombok.RequiredArgsConstructor; import org.springframework.data.domain.Page; import org.springframework.data.domain.PageRequest; import org.springframework.data.domain.Pageable; import org.springframework.data.domain.Sort; import org.springframework.web.bind.annotation.*; import io.swagger.v3.oas.annotations.Operation; RestController RequestMapping(/api/vehicles) RequiredArgsConstructor public class VehicleController { private final VehicleService vehicleService; GetMapping Operation(summary 分页查询可用车辆) public PageVehicle getVehicles( RequestParam(required false) String model, RequestParam(required false) String brand, RequestParam(required false) String status, RequestParam(required false) Long stationId, RequestParam(defaultValue 0) int page, RequestParam(defaultValue 10) int size) { Pageable pageable PageRequest.of(page, size, Sort.by(Sort.Direction.DESC, updateTime)); return vehicleService.queryVehicles(model, brand, status, stationId, pageable); } }4.2 前端核心车辆列表与预约组件 (Vue 3 Element Plus)车辆列表组件 (VehicleList.vue)template div classvehicle-list el-row :gutter20 el-col :span6 v-forvehicle in vehicleList :keyvehicle.id el-card classvehicle-card shadowhover img :srcvehicle.imageUrl classvehicle-image / div classvehicle-info h3{{ vehicle.brand }} {{ vehicle.model }}/h3 p车牌{{ vehicle.licensePlate }}/p p电量el-progress :percentagevehicle.batteryLevel :colorbatteryColor(vehicle.batteryLevel)/el-progress/p p时租span classprice¥{{ vehicle.pricePerHour }}/span/小时/p p状态el-tag :typestatusTagType(vehicle.status){{ vehicle.statusText }}/el-tag/p /div div classcard-footer el-button typeprimary sizesmall clickshowDetail(vehicle) :disabledvehicle.status ! AVAILABLE 查看详情 /el-button el-button typesuccess sizesmall clickhandleReserve(vehicle) :disabledvehicle.status ! AVAILABLE 立即预约 /el-button /div /el-card /el-col /el-row el-pagination current-changehandlePageChange :current-pagepagination.current :page-sizepagination.size :totalpagination.total layoutprev, pager, next /el-pagination /div /template script setup import { ref, onMounted } from vue import { ElMessage } from element-plus import { getVehicleList } from /api/vehicle const vehicleList ref([]) const pagination ref({ current: 1, size: 12, total: 0 }) const loadVehicles async () { try { const params { page: pagination.value.current - 1, size: pagination.value.size, status: AVAILABLE } const res await getVehicleList(params) vehicleList.value res.data.content pagination.value.total res.data.totalElements } catch (error) { ElMessage.error(加载车辆列表失败) } } const batteryColor (percentage) { if (percentage 70) return #67c23a if (percentage 30) return #e6a23c return #f56c6c } const statusTagType (status) { const map { AVAILABLE: success, RENTED: warning, MAINTENANCE: info, OFFLINE: danger } return map[status] || info } const handleReserve (vehicle) { // 跳转到预约页面传递车辆ID router.push({ path: /reserve, query: { vehicleId: vehicle.id } }) } const handlePageChange (page) { pagination.value.current page loadVehicles() } onMounted(() { loadVehicles() }) /script style scoped .vehicle-card { margin-bottom: 20px; } .vehicle-image { width: 100%; height: 180px; object-fit: cover; } .price { color: #f56c6c; font-size: 1.2em; font-weight: bold; } /style五、 总结与展望本文介绍了“随电行”电动汽车租赁管理网站的设计与实现涵盖了项目背景、技术栈选型、核心功能模块以及前后端核心代码示例。项目采用 Spring Boot 和 Vue.js 构建了一个现代化、可扩展的租赁平台。未来可扩展方向智能化推荐基于用户历史行为与偏好推荐车辆与套餐。物联网集成深度集成车载 OBD 数据实现远程车况诊断、故障预警。动态定价根据供需关系、时间段、节假日等因素实现动态价格调整。无人化取还结合蓝牙/UWB 技术实现无感解锁与自助取还车。