1. 项目背景与需求分析

旅游景区停车场管理一直是景区运营中的痛点。每逢节假日，大量游客涌入导致停车场管理混乱、车位利用率低下、游客体验差等问题频发。传统的人工管理方式不仅效率低下，还容易引发纠纷。

我们团队为某5A级景区开发的这套预约管理系统，正是为了解决以下核心问题：

• 高峰期车位资源分配不均
• 游客无法提前规划停车位
• 管理人员无法实时掌握车位状态
• 财务对账困难
• 缺乏数据分析支持决策

系统采用前后端分离架构，前端使用Vue+ElementUI构建响应式管理界面，后端采用Node.js实现高并发API服务。这套技术栈的选择主要基于：

1. Node.js的非阻塞I/O特性非常适合处理大量并发的预约请求
2. Vue的组件化开发能够快速构建复杂的管理界面
3. ElementUI提供了丰富的UI组件，特别适合后台管理系统开发

2. 技术架构设计

2.1 整体架构设计

系统采用经典的三层架构：

┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ 前端 │ │ 网关 │ │ 后端 │ │ Vue+ElementUI │ ←→ │ Nginx反向代理 │ ←→ │ Node.js+Koa │ └─────────────────┘ └─────────────────┘ └─────────────────┘ ↑ ↓ ┌─────────────────┐ │ 数据库 │ │ MongoDB │ └─────────────────┘

2.2 数据库设计

考虑到停车场数据的半结构化特性，我们选择MongoDB作为主数据库。主要集合设计如下：

1. users集合：存储管理员和用户信息

{ _id: ObjectId, username: String, password: String, // bcrypt加密 role: ['admin', 'operator', 'user'], contact: String, createdAt: Date }

2. parking_lots集合：停车场基础信息

{ _id: ObjectId, name: String, location: { longitude: Number, latitude: Number }, total_spaces: Number, available_spaces: Number, price_per_hour: Number, images: [String] }

3. reservations集合：预约记录

{ _id: ObjectId, user_id: ObjectId, parking_lot_id: ObjectId, license_plate: String, start_time: Date, end_time: Date, status: ['reserved', 'in_use', 'completed', 'cancelled'], payment_status: Boolean, created_at: Date }

3. 核心功能实现

3.1 预约流程实现

预约是系统的核心功能，我们实现了完整的预约流程：

1. 车位查询接口：

router.get('/api/parking-lots/available', async (ctx) => { const { date, duration } = ctx.query; const startTime = new Date(date); const endTime = new Date(startTime.getTime() + duration * 60 * 60 * 1000); const occupied = await Reservation.find({ $or: [ { start_time: { $lt: endTime }, end_time: { $gt: startTime } }, { status: 'in_use' } ] }).countDocuments(); const total = await ParkingLot.aggregate([ { $group: { _id: null, total: { $sum: "$total_spaces" } } } ]); ctx.body = { available: total[0].total - occupied, total: total[0].total }; });

2. 预约确认页面（Vue组件）：

<template> <el-dialog title="预约确认" :visible.sync="dialogVisible"> <el-form :model="form"> <el-form-item label="车牌号"> <el-input v-model="form.licensePlate" /> </el-form-item> <el-form-item label="预约时间"> <el-date-picker v-model="form.reservationTime" type="datetime" :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes" /> </el-form-item> <el-form-item label="预计停留时间"> <el-select v-model="form.duration"> <el-option v-for="item in durationOptions" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-form-item> </el-form> <div slot="footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="confirmReservation">确认预约</el-button> </div> </el-dialog> </template>

3.2 实时车位状态监控

使用WebSocket实现实时车位状态更新：

// WebSocket服务 const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', (ws) => { // 有新连接时发送当前车位状态 sendParkingStatus(ws); // 定时更新状态 const interval = setInterval(() => { sendParkingStatus(ws); }, 5000); ws.on('close', () => { clearInterval(interval); }); }); async function sendParkingStatus(ws) { const status = await ParkingLot.aggregate([ { $project: { name: 1, available: { $subtract: ["$total_spaces", "$occupied_spaces"] }, total: "$total_spaces" } } ]); ws.send(JSON.stringify(status)); }

前端通过WebSocket接收实时数据并更新UI：

created() { this.socket = new WebSocket('ws://localhost:8080'); this.socket.onmessage = (event) => { this.parkingLots = JSON.parse(event.data); this.updateParkingMap(); }; }, methods: { updateParkingMap() { // 使用ECharts更新车位状态热力图 this.chart.setOption({ series: [{ data: this.parkingLots.map(lot => ({ name: lot.name, value: [ lot.location.longitude, lot.location.latitude, (lot.available / lot.total) * 100 // 空闲率 ] })) }] }); } }

4. 关键技术实现细节

4.1 高并发预约处理

节假日期间系统需要处理大量并发预约请求，我们采用以下优化措施：

1. Redis缓存热点数据：

const getAvailableSpaces = async (parkingLotId) => { const cacheKey = `parking:${parkingLotId}:available`; const cached = await redis.get(cacheKey); if (cached) return parseInt(cached); const parkingLot = await ParkingLot.findById(parkingLotId); const available = parkingLot.total_spaces - parkingLot.occupied_spaces; await redis.setex(cacheKey, 60, available); // 缓存60秒 return available; };

2. MongoDB事务处理：

const session = await mongoose.startSession(); session.startTransaction(); try { const reservation = new Reservation({ user_id: userId, parking_lot_id: parkingLotId, // ...其他字段 }); await reservation.save({ session }); await ParkingLot.updateOne( { _id: parkingLotId }, { $inc: { occupied_spaces: 1 } }, { session } ); await session.commitTransaction(); } catch (err) { await session.abortTransaction(); throw err; } finally { session.endSession(); }

4.2 支付系统集成

我们集成了微信支付和支付宝支付：

// 微信支付接口 router.post('/api/payment/wechat', async (ctx) => { const { reservationId } = ctx.request.body; const reservation = await Reservation.findById(reservationId); const params = { body: '停车场预约费用', out_trade_no: `RES${Date.now()}`, total_fee: calculateFee(reservation), spbill_create_ip: ctx.ip, notify_url: config.wechat.notifyUrl, trade_type: 'JSAPI', openid: getOpenId(ctx) }; const result = await wechatPay.unifiedOrder(params); ctx.body = { appId: config.wechat.appId, timeStamp: Math.floor(Date.now() / 1000).toString(), nonceStr: generateNonceStr(), package: `prepay_id=${result.prepay_id}`, signType: 'MD5', paySign: generateSign(params) }; });

4.3 后台管理系统实现

使用ElementUI构建功能完善的后台管理界面：

1. 预约管理表格：

<template> <el-table :data="reservations" style="width: 100%"> <el-table-column prop="user.name" label="用户" /> <el-table-column prop="parkingLot.name" label="停车场" /> <el-table-column prop="licensePlate" label="车牌号" /> <el-table-column label="预约时间"> <template #default="{row}"> {{ formatDate(row.start_time) }} - {{ formatDate(row.end_time) }} </template> </el-table-column> <el-table-column prop="status" label="状态"> <template #default="{row}"> <el-tag :type="statusTagType(row.status)"> {{ statusText(row.status) }} </el-tag> </template> </el-table-column> <el-table-column label="操作"> <template #default="{row}"> <el-button size="mini" @click="handleEdit(row)">编辑</el-button> <el-button size="mini" type="danger" @click="handleCancel(row)"> 取消 </el-button> </template> </el-table-column> </el-table> </template>

2. 数据统计看板：

// 使用ECharts实现数据可视化 initChart() { this.chart = echarts.init(this.$refs.chart); this.chart.setOption({ tooltip: {}, xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value' }, series: [{ name: '预约量', type: 'bar', data: this.weeklyData }] }); }

5. 部署与性能优化

5.1 生产环境部署

我们使用PM2管理Node.js进程：

# 安装PM2 npm install pm2 -g # 启动应用 pm2 start ecosystem.config.js

配置文件示例：

module.exports = { apps: [{ name: 'parking-api', script: 'app.js', instances: 'max', exec_mode: 'cluster', env: { NODE_ENV: 'production', PORT: 3000 }, max_memory_restart: '1G' }] };

5.2 前端优化

1. 路由懒加载：

const routes = [ { path: '/reservation', component: () => import('./views/Reservation.vue') }, // 其他路由... ];

2. ElementUI按需引入：

import { ElButton, ElDialog } from 'element-plus'; const app = createApp(App); app.use(ElButton); app.use(ElDialog);

5.3 安全措施

1. JWT认证：

router.post('/api/login', async (ctx) => { const { username, password } = ctx.request.body; const user = await User.findOne({ username }); if (!user || !bcrypt.compareSync(password, user.password)) { ctx.throw(401, '用户名或密码错误'); } const token = jwt.sign( { userId: user._id, role: user.role }, config.jwtSecret, { expiresIn: '8h' } ); ctx.body = { token }; });

2. API权限控制：

const auth = async (ctx, next) => { const token = ctx.headers.authorization?.split(' ')[1]; if (!token) ctx.throw(401, '未提供认证令牌'); try { const decoded = jwt.verify(token, config.jwtSecret); ctx.state.user = await User.findById(decoded.userId); await next(); } catch (err) { ctx.throw(401, '无效令牌'); } }; const adminOnly = async (ctx, next) => { if (ctx.state.user.role !== 'admin') { ctx.throw(403, '需要管理员权限'); } await next(); };

6. 项目总结与经验分享

在实际开发过程中，我们积累了一些宝贵经验：

1. 日期时间处理：

   • 始终使用UTC时间在数据库中存储时间
   • 在前端显示时根据用户时区转换
   • 使用moment.js或date-fns库简化日期操作

2. 并发控制：

   • 对于关键操作使用数据库事务
   • 考虑使用Redis分布式锁处理高并发场景
   • 实现乐观锁防止数据竞争

3. 错误处理：

   • 统一错误处理中间件
   • 记录详细的错误日志
   • 给用户友好的错误提示

4. 性能监控：

   • 使用PM2内置的监控功能
   • 集成NewRelic或AppDynamics等APM工具
   • 监控关键API的响应时间

这套系统上线后，景区停车场的管理效率提升了60%，游客满意度提高了45%。特别是在节假日高峰期，系统稳定支撑了日均5000+的预约量，证明了我们的技术选型和架构设计的合理性。