{{ tags.important.name }}摩托车赛事组局与摩友社区系统,带商城和出租系统/活动组局功能（Vue3 + Node.js 全栈源码）

优惠前：

已售{{ sales_count }}

原价:

已售{{ sales_count }}

倒计时00分00秒

摩友圈

基于微信公众号的摩托车赛事与活动组局一站式社区系统。提供赛事报名、活动组局、摩友社交、二手闲置、钱包收益等完整业务闭环。

三端架构：用户H5端（Vue3+Vant）｜管理后台（Vue3+Element Plus）｜后端API（Node.js+Express）

一、项目介绍

摩友圈是面向摩托车爱好者打造的微信H5系统，打通全国摩友线上线下需求，覆盖五大核心业务：

赛事管理：可浏览、报名全量摩托车赛事；城市代理拥有本地赛事发布、审核、管理权限；
活动组局：普通用户自主发起/参与骑行、线下聚会；所有赛事/活动内置微信群二维码，一键导流社群；
摩友社区：按地区展示图文/视频动态明信片，支持点赞评论；页面外露VIP、实名认证、车神榜排名三类身份标识；
闲置交易：支持车辆、骑行装备出售/出租，交易收益自动归集钱包；
钱包资产：支持余额充值、提现、好友转账，资金来源包含赛事奖金、闲置售卖收入。

系统深度对接微信公众号OAuth授权、JS-SDK微信分享，搭配QQ邮箱消息推送，适配摩友私域社群运营。

二、功能特性

模块	核心能力清单
首页·民间车神榜	车神排名（赛事获奖次数排序）、热度排名（近一周明信片点赞）、多城市榜单筛选
活动/赛事	用户报名赛事、自主创建骑行组局；城市代理管控本地赛事；活动内置微信群二维码
摩友明信片社区	按地区分发图文/视频动态；点赞评论互动；VIP、实名、车神排名标识；闲置发布入口
个人中心	钱包充值/提现/转账；名片自定义；VIP开通、实名认证；闲置管理、密码修改；邮箱通知配置
底层运营能力	定时榜单自动刷新、每日赛事提醒、QQ邮件全量通知、分级城市代理运营体系

三、软件架构

┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│  用户H5端    │    │ 管理后台     │    │ 后端API     │
│ Vue3+Vant   │───▶│Element Plus │───▶│ Express     │
│ (frontend)  │    │ (admin)     │    │ (backend)   │
└─────────────┘    └─────────────┘    └──────┬──────┘
                                            ┌─┴─┐
                                      ┌─────┤MySQL│
                                      │     └─────┘
                                      │     ┌─────┐
                                      └─────┤Redis│
                                            └─────┘

用户H5端（frontend/）：移动端专属UI，Vant组件库；支持整页滚动、底部固定导航；PC浏览器访问自动页面居中自适应，不改动移动端交互逻辑。
管理后台（admin/）：PC端管理平台，Element Plus搭建，搭配ECharts数据可视化；用于内容审核、赛事运维、用户权限、订单资产管理。
后端API（backend/）：Express提供REST接口，JWT接口鉴权，Redis热点数据缓存；PM2托管进程，保障线上稳定运行。

四、技术栈明细

4.1 前端+管理后台

编程语言：JavaScript（ESM模块化）
核心框架：Vue3 + Vue Router4 + Pinia状态管理
构建工具：Vite4
UI组件：H5端Vant4、PC管理端Element Plus
工具依赖：Axios网络请求、dayjs时间处理、html2canvas/html-to-image/qrcode海报二维码生成、weixin-js-sdk微信能力、ECharts数据图表

4.2 后端服务

运行环境：Node.js ≥ 16
服务框架：Express4
数据存储：MySQL（mysql2驱动）、Redis（ioredis客户端）
安全鉴权：jsonwebtoken(JWT)、bcryptjs密码加盐加密
常用中间件：cors跨域、helmet安全防护、morgan日志、express-validator参数校验、multer文件上传
第三方能力：nodemailer邮件推送、node-cron定时任务、puppeteer页面海报截图、svg-captcha图形验证码、qrcode二维码生成
对象存储：兼容腾讯云COS、阿里云OSS，可一键切换，存储图片、短视频资源
进程托管：PM2，配套ecosystem.config.js配置文件

4.3 数据库

数据库：MySQL
12张核心数据表：
users、postcards、races、race_registrations、activities、activity_participants、likes、comments、idle_items、wallet_transactions、notifications、city_agents
初始化文件：database/schema.sql，一键执行完成建表。

五、目录结构

moyou/
├── frontend/                # 用户H5前端（Vue3+Vant）
│   └── src/
│       ├── views/           # 所有页面组件（首页/活动/明信片/个人中心等）
│       ├── router/          # 前端路由配置
│       ├── utils/           # 公共工具函数
│       └── styles/          # 全局样式文件
├── backend/                 # Node后端API服务
│   ├── controllers/         # 业务控制器
│   ├── models/              # 数据模型
│   ├── routes/              # 接口路由
│   ├── middleware/          # 通用中间件（鉴权、上传、错误捕获）
│   ├── tasks/               # 定时任务脚本
│   ├── scripts/             # 初始化脚本
│   ├── config/              # 全局配置
│   └── app.js               # 后端入口文件
├── admin/                   # PC管理后台（Vue3+Element Plus）
├── database/                # 数据库初始化脚本schema.sql
├── docs/                    # 全套部署文档
├── .env.example             # 环境变量配置模板
└── README.md                # 项目说明文档

六、安装部署

6.1 前置环境要求

Node.js ≥ 16.0.0
MySQL ≥ 5.7
Redis ≥ 6.0
微信服务号（支持OAuth网页授权、JS-SDK调用）

6.2 后端部署命令

# 进入后端目录
cd backend
# 安装依赖
npm install
# 复制环境变量模板，自行填写配置
cp .env.example .env
# 执行数据库初始化建表
npm run db:init
# 本地开发启动
npm run dev
# 生产环境推荐：npm start（PM2托管）

后端默认本地地址：http://localhost:3000

6.3 用户H5前端部署

cd frontend
npm install
# 本地开发运行
npm run dev # 访问地址 http://localhost:8080
# 生产打包，产物输出dist文件夹
npm run build

6.4 管理后台部署

cd admin
npm install
# 本地开发
npm run dev
# 打包部署
npm run build

后台初始管理员账号密码查阅部署指南.md，首次上线必须修改账号密码。

6.5 生产Nginx反向代理配置

server {
    listen 80;
    server_name yourdomain.com;

    location /api {
        proxy_pass http://localhost:3000;
    }
    location / {
        root /path/to/frontend/dist;
        try_files $uri $uri/ /index.html;
    }
}

线上环境强制配置HTTPS SSL证书。

七、配置说明

复制backend/.env.example并重命名为backend/.env，核心配置项分类：

数据库：DB_HOST、DB_PORT、DB_USER、DB_PASSWORD、DB_NAME
微信生态：WECHAT_APPID、WECHAT_SECRET（网页授权、JS-SDK必填）
邮件推送：EMAIL_USER、EMAIL_PASS（QQ邮箱SMTP授权码，用于消息通知）
云存储：腾讯云COS/阿里云OSS密钥，管控图片视频上传
支付渠道：微信支付、易支付商户密钥，支撑钱包充值、提现流程

八、使用说明

账号登录：微信内打开H5页面，自动跳转公众号OAuth授权，授权完成自动登录；
榜单查看：首页切换车神榜、热度榜、城市榜单，查看摩友排名；
赛事活动：浏览赛事报名，发起骑行组局；赛事详情页扫码加入官方微信群；
社区动态：明信片板块发布图文/短视频，可点赞评论；支持顺手发布闲置；
个人管理：个人中心操作钱包收支、开通VIP、实名认证、修改密码；可绑定QQ邮箱接收全平台消息。

九、API概览

接口模块	典型接口地址
账号认证	`GET /api/auth/login`、`GET /api/auth/callback`
用户信息	`GET /api/users/profile`、`POST /api/users/vip`、`POST /api/users/verify`
赛事相关	`GET /api/races`、`POST /api/races/:id/register`、`POST /api/races/:id/award`
活动组局	`GET /api/activities`、`POST /api/activities/:id/join`
明信片社区	`GET /api/postcards`、`POST /api/postcards/:id/like`、`POST /api/postcards/:id/comments`
排行榜	`GET /api/rankings/champion`、`GET /api/rankings/heat`、`GET /api/rankings/city`
钱包资金	`GET /api/wallet/balance`、`POST /api/wallet/recharge`、`POST /api/wallet/withdraw`
消息通知	`GET /api/notifications`、`GET /api/notifications/unread-count`

十、定时任务

全部任务由node-cron定时调度执行：

每日凌晨1点：重新统计更新车神榜（按赛事获奖次数）
每周一凌晨2点：刷新热度榜（统计近7天国明信片点赞数据）
每日上午9点：批量推送次日赛事提醒邮件