项目定位

基于 Vue3 前端 + C++ 后端 + Linux 部署的类微信聊天应用。

技术栈

层级 技术 说明
前端 Vue3 + TypeScript + Pinia SPA 单页应用，WebSocket 实时通信
后端 C++ + WebSocket + MySQL 高性能消息服务，TCP 长连接
部署 Linux (Ubuntu/CentOS) + Nginx + Docker 服务器部署与运维

项目仓库

仓库 地址 说明
前端 github.com/你的用户名/wechat-vue3 Vue3 聊天前端
后端 github.com/你的用户名/wechat-cpp C++ 聊天服务端
部署 随博客记录 Linux 部署脚本与配置

项目分阶段计划

第一阶段：环境搭建与基础框架（1-2周）

  • 前端：Vue3 项目初始化（Vite + Vue Router + Pinia）
  • 前端：基础页面结构（登录页、聊天列表页、聊天窗口页）
  • 后端：C++ 开发环境配置（CMake + g++）
  • 后端：基础 TCP Server 搭建
  • Linux：虚拟机 / WSL 环境准备

对应文章：聊天项目-01-环境搭建.md

第二阶段：用户系统（1-2周）

  • 前端：登录/注册页面 UI
  • 后端：用户注册接口（账号+密码）
  • 后端：用户登录 + Token 认证
  • 数据库：用户表设计（MySQL）

对应文章：聊天项目-02-用户系统.md

第三阶段：好友系统（1-2周）

  • 前端：好友列表页面
  • 前端：添加好友（搜索+发送请求）
  • 后端：好友关系表设计
  • 后端：好友添加/删除/查询接口

对应文章：聊天项目-03-好友系统.md

第四阶段：实时消息（2-3周）

  • 前端：WebSocket 连接管理
  • 前端：聊天窗口消息展示与发送
  • 后端：WebSocket 服务端实现
  • 后端：消息存储与转发
  • 数据库：消息表设计

对应文章：聊天项目-04-实时消息.md

第五阶段：群聊功能（1-2周）

  • 前端：群聊列表与创建群聊
  • 后端：群组管理接口
  • 后端：群消息广播
  • 数据库：群组表 + 群成员表

对应文章：聊天项目-05-群聊功能.md

第六阶段：文件传输与多媒体（1-2周）

  • 前端：图片/文件发送 UI
  • 后端：文件上传接口
  • 后端：文件存储管理
  • 前后端：文件传输协议

对应文章：聊天项目-06-文件传输.md

第七阶段：部署上线（1周）

  • Linux 服务器环境配置
  • Nginx 反向代理配置
  • Docker 容器化部署
  • 域名 + HTTPS 配置

对应文章：聊天项目-07-部署上线.md

目录结构预览

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
wechat-vue3/（前端）
├── src/
│   ├── views/          # 页面：Login, ChatList, ChatWindow
│   ├── components/     # 组件：MessageBubble, ContactItem
│   ├── stores/         # Pinia 状态管理
│   ├── api/            # 接口请求封装
│   └── utils/          # 工具函数（WebSocket 管理等）

wechat-cpp/（后端）
├── src/
│   ├── server/         # TCP/WebSocket 服务
│   ├── handler/        # 业务处理（登录、消息、好友）
│   ├── model/          # 数据模型
│   └── db/             # 数据库操作
├── CMakeLists.txt
└── config/

记录规范

每次推进项目时，创建新文章：

1
2
3
4
---
title: 聊天项目-01-环境搭建
categories: 聊天项目
---

文章内容包含：

  1. 本阶段目标 — 要完成什么
  2. 具体步骤 — 代码/命令/截图
  3. 遇到的问题 — 报错与解决方案
  4. 阶段小结 — 学到了什么