洗车行业通用小程序源码系统分享 带完整的安装代码包以及搭建部署教程

源码程序分享
94 阅读3分钟

2.png

3.png

4.png

5.png

洗车行业通用小程序源码系统全流程部署指南（含完整代码包）

一、系统概述

本开源系统基于HBuilderX+UniApp+PHP+MySQL技术栈开发，支持微信/支付宝小程序双端运行。系统包含用户端、商户管理后台、设备物联网控制三大模块，实现洗车预约、支付、设备控制全流程自动化。代码包已包含完整的前后端源码及SQL初始化脚本，支持快速部署。

源码包结构：

/car-wash-system
├── frontend        # UniApp前端源码
│   ├── pages       # 页面组件
│   ├── static     # 静态资源
│   └── App.vue     # 入口文件
├── backend         # PHP后端源码
│   ├── app         # Laravel框架核心
│   ├── database    # 数据库迁移脚本
│   └── public      # 静态文件
└── sql            # MySQL初始化脚本
    └── car_wash.sql

二、环境准备

2.1 开发环境要求

  • 前端：HBuilderX 3.4.2+（支持UniApp编译）
  • 后端：PHP 8.1+（需开启pdo_mysql扩展）
  • 数据库：MySQL 8.0+
  • 物联网模块：4G DTU模块（如USR-G780）
  • 小程序开发工具：微信开发者工具/支付宝IDE

2.2 依赖安装

bash
# PHP依赖安装（backend目录下）
composer install
 
# 前端依赖安装（frontend目录下）
npm install

三、部署步骤详解

3.1 数据库配置

sql
-- 执行初始化脚本
USE car_wash;
SOURCE /path/to/car_wash.sql;
 
-- 修改数据库配置（backend/.env）
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=car_wash
DB_USERNAME=root
DB_PASSWORD=your_password

3.2 后端部署

php
// 启动PHP内置服务器（测试环境）
cd backend
php artisan serve --host=0.0.0.0 --port=8000
 
// 生产环境建议使用Nginx配置
server {
    listen 80;
    server_name api.carwash.com;
    root /path/to/backend/public;
    
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }
    
    location ~ .php$ {
        fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

3.3 前端编译与部署

javascript
// 编译微信小程序
hbuilderx frontend --compile MP-WEIXIN
 
// 编译支付宝小程序
hbuilderx frontend --compile MP-ALIPAY
 
// 修改小程序配置文件
// frontend/manifest.json
"mp-weixin": {
    "appid": "wx1234567890abcdef",
    "setting": {
        "urlCheck": false
    }
}

3.4 物联网设备对接

python
# 4G模块控制脚本示例（Python）
import serial
import time
 
ser = serial.Serial('/dev/ttyUSB0', 9600, timeout=1)
 
def send_command(cmd):
    ser.write((cmd + '\r\n').encode())
    time.sleep(0.5)
    response = ser.readline().decode().strip()
    return response
 
# 启动洗车机
send_command("AT+START=wash_001")
# 查询设备状态
status = send_command("AT+STATUS?")
print(f"设备状态：{status}")

四、核心功能代码解析

4.1 用户预约接口（PHP）

php
// backend/app/Http/Controllers/OrderController.php
public function createOrder(Request $request)
{
    $validated = $request->validate([
        'user_id' => 'required|integer',
        'device_id' => 'required|string',
        'start_time' => 'required|date_format:Y-m-d H:i:s',
        'duration' => 'required|integer'
    ]);
    
    $order = new Order();
    $order->order_no = 'CW'.date('YmdHis').rand(1000,9999);
    $order->fill($validated);
    $order->status = 'pending';
    $order->save();
    
    return response()->json([
        'code' => 200,
        'data' => $order
    ]);
}

4.2 设备状态监控（MQTT）

javascript
// 物联网网关服务（Node.js）
const mqtt = require('mqtt');
const client = mqtt.connect('mqtt://iot.example.com');
 
client.on('connect', () => {
    client.subscribe('carwash/+/status');
});
 
client.on('message', (topic, message) => {
    const deviceId = topic.split('/')[1];
    const status = message.toString();
    
    // 更新数据库设备状态
    axios.put(`http://api.carwash.com/devices/${deviceId}/status`, {
        status: status,
        last_update: new Date()
    });
});

4.3 小程序端预约页面（UniApp）

vue
<!-- frontend/pages/index/index.vue -->
<template>
    <view class="container">
        <map 
            id="map"
            :latitude="latitude" 
            :longitude="longitude"
            :markers="markers"
            @markertap="onMarkerTap"
        ></map>
        
        <view v-if="selectedDevice" class="device-info">
            <text>设备编号：{{ selectedDevice.device_id }}</text>
            <text>当前状态：{{ deviceStatus[selectedDevice.status] }}</text>
            <button @click="bookDevice">立即预约</button>
        </view>
    </view>
</template>
 
<script>
export default {
    data() {
        return {
            latitude: 31.2304,
            longitude: 121.4737,
            markers: [],
            selectedDevice: null,
            deviceStatus: {
                idle: '空闲',
                working: '使用中',
                offline: '离线'
            }
        }
    },
    onLoad() {
        this.loadDevices();
    },
    methods: {
        async loadDevices() {
            const res = await uni.request({
                url: 'http://api.carwash.com/devices',
                method: 'GET'
            });
            this.markers = res.data.map(device => ({
                id: device.id,
                latitude: device.latitude,
                longitude: device.longitude,
                width: 30,
                height: 30
            }));
        },
        onMarkerTap(e) {
            const deviceId = e.markerId;
            this.selectedDevice = this.markers.find(m => m.id === deviceId);
            // 获取设备实时状态
            uni.request({
                url: `http://api.carwash.com/devices/${deviceId}/status`,
                success: res => {
                    this.selectedDevice.status = res.data.status;
                }
            });
        },
        bookDevice() {
            uni.navigateTo({
                url: `/pages/booking/booking?deviceId=${this.selectedDevice.id}`
            });
        }
    }
}
</script>

五、系统扩展与优化

5.1 性能优化方案

  • 缓存策略：使用Redis缓存热点数据（如设备状态、用户信息），设置TTL为5分钟
  • 负载均衡：通过Nginx实现请求分发，支持横向扩展
  • 数据库分表：订单表按月分表，避免单表过大

5.2 安全加固

  • 支付验证：使用微信支付APIv3签名验证
  • 数据加密：敏感字段（如用户手机号）使用AES-256加密
  • 接口防护：启用JWT令牌验证，防止未授权访问

5.3 物联网扩展

  • 设备直连：支持4G模块直连阿里云IoT平台
  • 协议转换：通过网关实现MQTT/HTTP协议转换
  • 边缘计算：在设备端实现基础数据预处理

六、部署常见问题解决

6.1 跨域问题

nginx
# Nginx配置解决跨域
location / {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}

6.2 支付回调失败

  • 检查微信支付回调地址是否配置正确
  • 验证签名时使用微信官方提供的验签工具
  • 确保服务器可访问公网

6.3 设备离线问题

  • 检查4G模块SIM卡状态及余额
  • 验证物联网平台连接参数（设备ID、密钥）
  • 检查防火墙是否开放1883端口（MQTT默认端口）

七、运维监控体系

7.1 日志监控

bash
# 使用ELK收集系统日志
docker run -d --name elasticsearch -p 9200:9200 -p 9300:9300 elasticsearch:7.14.0
docker run -d --name logstash -v /path/to/logstash.conf:/usr/share/logstash/pipeline/logstash.conf logstash:7.14.0
docker run -d --name kibana -p 5601:5601 kibana:7.14.0

7.2 性能监控

yaml
# Prometheus监控配置
scrape_configs:
  - job_name: 'carwash_backend'
    static_configs:
      - targets: ['api.carwash.com:8000']
    metrics_path: /metrics

7.3 告警规则

yaml
# 告警规则示例
groups:
- name: carwash_alerts
  rules:
  - alert: HighDBConnection
    expr: mysql_global_status_threads_connected > 200
    for: 5m
    labels:
      severity: warning
    annotations:
      summary: "数据库连接数过高"
      description: "当前数据库连接数{{ $value }}，超过阈值200"

结语

本开源系统提供从源码到部署的完整解决方案，支持快速搭建洗车行业小程序。通过模块化设计和详细的部署文档，可快速实现线上预约、支付、设备控制的全流程自动化。系统采用成熟的HBuilderX+UniApp+PHP技术栈，确保稳定性和可扩展性。建议部署后进行压力测试，并根据实际业务需求进行二次开发。

avatar
文章
阅读
粉丝