惠民云平台开发实战：基于 Vue3 + Django 的社区服务系统设计与实现

一、项目背景

惠民云是一个面向用户、商家和管理员的综合服务平台。系统的核心目标是为用户提供活动参与、信息发布、互动交流等服务，同时为管理端提供账号审核、内容管理和平台运营能力。

在原有系统基础上，项目新增并整合了"战友圈"和"聊天"功能，使用户登录惠民云后可以在同一平台内发布动态、浏览内容、互动交流，而不是跳转到独立系统。

二、技术选型

前端采用 Vue3 + Vite + Element Plus，后端使用 Django，并通过 Nginx 进行反向代理部署。

• 前端：Vue3、Vite、Vue Router、Pinia、Element Plus、Axios
• 后端：Django、Django Channels、Daphne
• 数据库：MySQL
• Web 服务器：Nginx
• 实时通信：WebSocket
• 图片处理：Pillow

整体架构如下：

浏览器
   ↓
Nginx（HTTPS、静态资源、反向代理）
   ↓
Django / Daphne（接口、WebSocket、业务逻辑）
   ↓
MySQL（用户、活动、动态、聊天记录等）

三、系统角色设计

惠民云主要包含三类角色：

角色	主要功能
普通用户	登录注册、个人信息、活动参与、战友圈、聊天
商家用户	商家资料维护、活动相关业务
管理员	用户审核、内容管理、平台维护

用户数据保存在 sys_user 表中，关键字段包括手机号、姓名、角色、账号状态、头像等。

sys_user
├── id
├── name
├── phone
├── role
├── password
├── status
└── avatar

四、战友圈功能设计

战友圈不是独立网站，而是惠民云内部的一项业务功能。用户登录后可以进入战友圈，完成动态发布、浏览和互动。

核心功能包括：

1. 发布文字动态
2. 上传动态图片
3. 浏览动态列表
4. 查看其他用户发布内容
5. 点赞、评论等后续扩展能力
6. 个人动态管理

接口统一挂载在 /api/ 下，例如：

POST /api/moment/list
POST /api/moment/publish
POST /api/moment/detail

战友圈列表接口测试成功时会返回：

{
  "success": true,
  "code": 200,
  "msg": "获取成功",
  "data": {
    "list": [],
    "total": 0,
    "page_num": 1,
    "page_size": 10
  }
}

这说明前端可以正常请求 Django 后端，并获得动态分页数据。

五、聊天功能设计

聊天模块同样整合在惠民云内部，避免用户在多个系统之间切换。

聊天模块包含：

• 会话列表
• 创建会话
• 消息发送
• 图片消息上传
• 未读消息统计
• 好友管理
• 黑名单管理
• 消息撤回
• 群成员添加、移除和退出

部分接口如下：

export function listConversations() {
  return request({ url: '/chat/conversation/list', method: 'get' })
}

export function sendMessage(data) {
  return request({ url: '/chat/message/send', method: 'post', data })
}

export function uploadChatImage(file, onUploadProgress) {
  const form = new FormData()
  form.append('file', file)
  return request({
    url: '/chat/message/upload',
    method: 'post',
    data: form,
    headers: { 'Content-Type': 'multipart/form-data' },
    onUploadProgress
  })
}

实时消息部分使用 Django Channels 和 WebSocket 实现。用户建立 WebSocket 连接后，后端通过 Token 校验身份，保证聊天连接与登录用户对应。

六、用户认证与安全处理

系统采用 Bearer Token 方式传递登录凭证：

Authorization: Bearer <token>

后端从请求头中解析 Token，并获取当前登录用户：

authorization = request.META.get('HTTP_AUTHORIZATION', '')

if not authorization.startswith('Bearer '):
    return None

对于 WebSocket 请求，则从查询参数中读取 Token，例如：

ws://域名/ws/chat/?token=xxxx

后端校验 Token 后，将用户 ID 写入 WebSocket 的 scope 中，实现实时聊天身份识别。

七、前端界面优化

项目在原系统基础上进行了界面统一和体验优化：

• 保留惠民云原有功能和页面结构
• 战友圈作为用户端内部功能接入
• 聊天功能作为平台互动能力接入
• 使用浅色蓝绿风格，减少黑色、深色默认组件
• 统一使用惠民云官方 Logo
• 为新注册用户设置默认头像，避免出现黑色空头像
• 优化账号状态标签颜色
• 优化登录过期后的跳转逻辑

特别是在默认头像方面，后端在创建账号时直接写入统一默认头像路径：

avatar = 'static/avatar-default.svg'

这样可避免历史黑色头像或空头像影响用户体验。

八、部署过程

后端通过 Daphne 或 Django Channels 服务运行在本地端口：

nohup env PYTHONPATH=/tmp/chat-deps:/www/wwwroot/djangoActivity \
python manage.py runserver 127.0.0.1:3001 --noreload \
> /tmp/djangoActivity-3001.log 2>&1 &

Nginx 将公网请求代理到 Django 服务：

location / {
    proxy_pass http://127.0.0.1:3001;
    proxy_set_header Host $host:$server_port;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

其中，Upgrade 和 Connection 请求头用于支持 WebSocket 通信。

九、项目总结

惠民云项目的重点不只是完成页面开发，更重要的是将新功能稳定地融入原有系统。

本次开发实现了以下目标：

• 保留原有惠民云系统功能
• 在用户端接入战友圈功能
• 接入用户间实时聊天能力
• 完成 Vue3 与 Django 的前后端联调
• 支持 MySQL 用户、动态和聊天数据存储
• 支持 Nginx HTTPS 部署和 WebSocket 转发
• 统一平台 Logo、默认头像和页面风格

后续可以继续扩展动态点赞评论、聊天消息已读状态、群聊管理、内容审核、消息通知和后台数据统计等能力。

惠民云不只是一个后台管理系统，而是一个集用户服务、活动互动、社区交流和即时聊天于一体的综合服务平台。