全栈项目：闲置二手交易系统（一）

基于Vue3和Node.js的闲置交易平台设计与实现

一、项目介绍

随着互联网技术的快速发展和共享经济理念的普及，二手物品交易平台已成为人们日常生活中不可或缺的一部分。本文设计并实现了一个功能完善的闲置交易平台，采用前后端分离架构，前端使用Vue 3、TypeScript、Pinia等现代化技术栈，后端基于Node.js、Express、MongoDB构建RESTful API服务。系统实现了用户认证、商品管理、订单处理、即时通讯等核心功能，并通过Socket.IO技术实现了实时聊天系统。

二、项目截图

三、功能模块设计

1. 用户系统模块

1.1 用户注册与登录

功能描述：

用户注册（用户名、密码、邮箱）
用户登录（JWT Token认证）
密码加密存储（bcryptjs）
自动登录（Token持久化）
登出功能

数据模型：

javascript 复制代码

User {
  username: String,      // 用户名（唯一）
  email: String,         // 邮箱
  password: String,      // 加密密码
  phone: String,         // 手机号
  avatar: String,        // 头像URL
  bio: String,           // 个人简介
  role: String,          // 角色（user/admin）
  isVerified: Boolean,   // 是否实名认证
  followers: [ObjectId], // 粉丝列表
  following: [ObjectId], // 关注列表
  favorites: [ObjectId], // 收藏商品
  rating: Number,        // 用户评分
  totalSales: Number,    // 总销售数
  balance: Number,       // 账户余额
  createdAt: Date,       // 注册时间
  updatedAt: Date        // 更新时间
}

API接口：

POST /api/auth/register - 用户注册
POST /api/auth/login - 用户登录
GET /api/auth/me - 获取当前用户信息
POST /api/auth/logout - 用户登出

1.2 个人资料管理

功能描述：

查看个人资料
编辑个人信息
上传头像
修改密码
实名认证

API接口：

GET /api/users/:id - 获取用户信息
PUT /api/users/:id - 更新用户信息
POST /api/users/avatar - 上传头像
PUT /api/users/password - 修改密码

1.3 社交功能

功能描述：

关注/取消关注用户
查看粉丝列表
查看关注列表
用户等级系统

API接口：

POST /api/users/:id/follow - 关注用户
DELETE /api/users/:id/follow - 取消关注
GET /api/users/:id/followers - 获取粉丝列表
GET /api/users/:id/following - 获取关注列表

2. 商品管理模块

2.1 商品发布

功能描述：

填写商品信息（标题、描述、价格等）
上传商品图片（支持多图）
上传商品视频（可选）
选择商品分类
设置商品标签
选择成色等级

数据模型：

javascript 复制代码

Product {
  title: String,           // 商品标题
  description: String,     // 商品描述
  price: Number,           // 售价
  originalPrice: Number,   // 原价
  images: [String],        // 图片URL数组
  video: String,           // 视频URL
  category: String,        // 分类
  condition: String,       // 成色
  seller: ObjectId,        // 卖家ID
  location: String,        // 交易地点
  tags: [String],          // 标签
  status: String,          // 状态（available/sold/reserved）
  views: Number,           // 浏览次数
  likes: Number,           // 点赞数
  favoritesCount: Number,  // 收藏数
  comments: [Comment],     // 评论列表
  negotiable: Boolean,     // 是否可议价
  shippingMethod: String,  // 配送方式
  createdAt: Date,         // 发布时间
  updatedAt: Date          // 更新时间
}

API接口：

POST /api/products - 发布商品
POST /api/products/upload - 上传图片/视频

2.2 商品浏览与搜索

功能描述：

商品列表展示（分页）
商品分类筛选
价格区间筛选
成色筛选
关键词搜索
排序功能（最新、价格、热度）

API接口：

GET /api/products - 获取商品列表
GET /api/products/search - 搜索商品
GET /api/products/category/:category - 按分类获取

2.3 商品详情

功能描述：

查看商品详细信息
图片轮播展示
视频播放
卖家信息展示
相关商品推荐
浏览记录统计

API接口：

GET /api/products/:id - 获取商品详情
PUT /api/products/:id - 更新商品信息
DELETE /api/products/:id - 删除商品

2.4 商品互动

功能描述：

收藏/取消收藏商品
点赞商品
评论商品
回复评论
分享商品

API接口：

POST /api/products/:id/favorite - 收藏商品
DELETE /api/products/:id/favorite - 取消收藏
POST /api/products/:id/like - 点赞
POST /api/products/:id/comments - 发表评论
POST /api/products/:id/comments/:commentId/reply - 回复评论

3. 交易系统模块

3.1 订单管理

功能描述：

创建订单
查看订单列表
订单详情
订单状态跟踪
取消订单

数据模型：

javascript 复制代码

Order {
  orderNumber: String,      // 订单号（唯一）
  buyer: ObjectId,          // 买家ID
  seller: ObjectId,         // 卖家ID
  product: ObjectId,        // 商品ID
  quantity: Number,         // 数量
  totalAmount: Number,      // 总金额
  status: String,           // 状态（pending/confirmed/shipped/completed/cancelled）
  shippingAddress: Object,  // 收货地址
  paymentMethod: String,    // 支付方式
  notes: String,            // 备注
  createdAt: Date,          // 创建时间
  updatedAt: Date           // 更新时间
}

订单状态流转：

复制代码

pending（待确认）
  ↓
confirmed（已确认）
  ↓
shipped（已发货）
  ↓
completed（已完成）

任何状态都可以 → cancelled（已取消）

API接口：

POST /api/orders - 创建订单
GET /api/orders - 获取订单列表
GET /api/orders/:id - 获取订单详情
PUT /api/orders/:id/status - 更新订单状态
DELETE /api/orders/:id - 取消订单

3.2 支付集成

功能描述：

支持多种支付方式（现金、在线支付、微信、支付宝）
支付状态跟踪
支付回调处理

3.3 评价系统

功能描述：

买家评价卖家
卖家评价买家
评分系统（1-5星）
评价内容展示

4. 即时通讯模块

4.1 实时聊天

功能描述：

一对一聊天
实时消息推送
消息已读状态
历史消息记录
在线状态显示

数据模型：

javascript 复制代码

Message {
  sender: ObjectId,      // 发送者ID
  receiver: ObjectId,    // 接收者ID
  content: String,       // 消息内容
  type: String,          // 消息类型（text/image/product）
  isRead: Boolean,       // 是否已读
  productId: ObjectId,   // 关联商品ID（可选）
  createdAt: Date        // 发送时间
}

Socket.IO 事件：

connection - 用户连接
disconnect - 用户断开
join - 加入聊天室
sendMessage - 发送消息
receiveMessage - 接收消息
typing - 正在输入
messageRead - 消息已读

API接口：

GET /api/messages/conversations - 获取会话列表
GET /api/messages/:userId - 获取与某用户的聊天记录
POST /api/messages - 发送消息
PUT /api/messages/:id/read - 标记消息已读

4.2 消息通知

功能描述：

新消息提醒
未读消息数量
系统通知
订单通知

5. 后台管理模块

5.1 用户管理

功能描述：

用户列表查看
用户信息编辑
用户状态管理（启用/禁用）
用户权限管理
用户统计分析

API接口：

GET /api/admin/users - 获取用户列表
PUT /api/admin/users/:id - 更新用户信息
DELETE /api/admin/users/:id - 删除用户
GET /api/admin/users/stats - 用户统计

5.2 商品管理

功能描述：

商品审核
商品下架
违规商品处理
商品统计分析

API接口：

GET /api/admin/products - 获取商品列表
PUT /api/admin/products/:id/status - 更新商品状态
DELETE /api/admin/products/:id - 删除商品
GET /api/admin/products/stats - 商品统计

5.3 订单管理

功能描述：

订单列表查看
订单详情查看
订单状态管理
订单统计分析

5.4 数据统计

功能描述：

用户增长趋势
交易额统计
商品分类统计
活跃度分析
数据可视化（ECharts）

四、系统设计

1. 系统总体架构

1.1 架构模式

本系统采用前后端分离的B/S架构模式，将系统分为三层：

表现层（Presentation Layer）
- 前端应用，基于Vue 3框架
- 负责用户界面展示和交互
- 通过HTTP和WebSocket与后端通信
业务逻辑层（Business Logic Layer）
- 后端应用，基于Node.js和Express框架
- 负责业务逻辑处理和数据验证
- 提供RESTful API接口和Socket.IO服务
数据持久层（Data Persistence Layer）
- MongoDB数据库
- 负责数据的持久化存储
- 通过Mongoose ODM进行数据操作

1.2 系统架构图

markdown 复制代码

┌─────────────────────────────────────────────────────────┐
│                      客户端层                            │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐              │
│  │  浏览器  │  │  移动端  │  │  平板    │              │
│  └──────────┘  └──────────┘  └──────────┘              │
└─────────────────────────────────────────────────────────┘
                        ↓ HTTP/WebSocket
┌─────────────────────────────────────────────────────────┐
│                      前端应用层                          │
│  ┌──────────────────────────────────────────────────┐  │
│  │              Vue 3 + TypeScript                   │  │
│  │  ┌────────┐  ┌────────┐  ┌────────┐  ┌────────┐ │  │
│  │  │ 路由   │  │ 状态   │  │ 组件   │  │ 工具   │ │  │
│  │  │ Router │  │ Pinia  │  │ Views  │  │ Utils  │ │  │
│  │  └────────┘  └────────┘  └────────┘  └────────┘ │  │
│  └──────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────┘
                        ↓ RESTful API / Socket.IO
┌─────────────────────────────────────────────────────────┐
│                      后端应用层                          │
│  ┌──────────────────────────────────────────────────┐  │
│  │              Node.js + Express                    │  │
│  │  ┌────────┐  ┌────────┐  ┌────────┐  ┌────────┐ │  │
│  │  │ 路由   │  │ 中间件 │  │ Socket │  │ 工具   │ │  │
│  │  │ Routes │  │Middleware│ │Handler │  │ Utils  │ │  │
│  │  └────────┘  └────────┘  └────────┘  └────────┘ │  │
│  └──────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────┘
                        ↓ Mongoose ODM
┌─────────────────────────────────────────────────────────┐
│                      数据持久层                          │
│  ┌──────────────────────────────────────────────────┐  │
│  │                   MongoDB                         │  │
│  │  ┌────────┐  ┌────────┐  ┌────────┐  ┌────────┐ │  │
│  │  │ Users  │  │Products│  │ Orders │  │Messages│ │  │
│  │  └────────┘  └────────┘  └────────┘  └────────┘ │  │
│  └──────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────┘

全栈项目：闲置二手交易系统（一）

基于Vue3和Node.js的闲置交易平台设计与实现

一、项目介绍

二、 项目截图

三、功能模块设计

1. 用户系统模块

1.1 用户注册与登录

1.2 个人资料管理

1.3 社交功能

2. 商品管理模块

2.1 商品发布

2.2 商品浏览与搜索

2.3 商品详情

2.4 商品互动

3. 交易系统模块

3.1 订单管理

3.2 支付集成

3.3 评价系统

4. 即时通讯模块

4.1 实时聊天

4.2 消息通知

5. 后台管理模块

5.1 用户管理

5.2 商品管理

5.3 订单管理

5.4 数据统计

四、系统设计

1. 系统总体架构

1.1 架构模式

1.2 系统架构图

二、项目截图