更新记录

1.3.0.（2026-07-27） 下载此版本

版本更新记录

v1.0.0

• 初始版本发布
• 基础表白功能（发布、浏览、点赞、评论）
• 管理后台（用户管理、帖子管理）

v1.1.0

• 新增圈子功能（圈子列表、加入圈子、圈子帖子）
• 新增话题功能（话题列表、话题帖子）
• 新增弹幕功能
• 新增收藏功能

v1.2.0

• 优化用户体验
• 统一 URL 配置管理（前端/后端）
• 点赞收藏状态颜色统一（粉红色 #ff2d78 / 黄色 #ffc107）
• 粒子效果动画（表情扩散）
• 帖子卡片长按操作（举报、拉黑、删除）
• 系统通知分类（系统公告/活动通知/版本更新）
• 举报工单处理（自动发送系统通知）
• 圈子名称唯一校验

v1.3.0

• 新增个人主页统计区域（紫色半透明背景）
• 编辑资料页左右布局优化
• 消息红点自动更新（切换 Tab 时刷新）
• 管理员权限优化（帖子置顶、评论置顶）
• 图片审核（腾讯云内容安全）
• 邮箱找回密码功能

平台兼容性

uni-app(4.76)

一、项目介绍

校园表白墙 是一个基于 uni-app + Vue 3 + Node.js 的微信小程序社交平台，专为校园场景打造。用户可以匿名发布表白、浏览帖子、互动交流，支持圈子、话题、弹幕等丰富功能。

核心特色

• 🎭 匿名表白：支持匿名发布，保护用户隐私
• 💖 互动社交：点赞、收藏、评论、关注、私信，带精美粒子效果
• 🔔 消息通知：系统公告、活动通知、版本更新，支持置顶功能
• 🎯 圈子话题：兴趣圈子、热门话题、精准推荐
• ⚡ 粒子效果：点赞收藏精美动画效果（表情扩散）
• 🎨 浪漫主题：粉色浪漫主题设计，深色模式适配
• 📱 多端支持：微信小程序、H5、App 多端发布
• 🎬 视频发布：支持视频上传（50MB以内）和播放，支持多种格式（MP4、MOV、AVI等）

适用场景

• 校园表白墙、校园论坛、校园社交
• 企业内部社交平台、兴趣社区
• 活动报名、话题讨论、投票互动

一、更新日志

v2.1.0（2026-07-18）

• ✅ 视频上传功能：新增视频上传接口，支持50MB以内视频文件上传
• ✅ 视频格式支持：支持 MP4、MPEG、MOV、AVI、FLV、3GP、WEBM、MKV 等格式
• ✅ 视频播放：帖子详情页支持视频播放，显示封面和时长
• ✅ 资料页优化：保存按钮改为右下角悬浮按钮，避免被胶囊遮挡
• ✅ 导航栏优化：所有子页面标题居中显示，统一样式
• ✅ 评论输入优化：表情只能追加到文字末尾，不能插入中间
• ✅ 表情选择框：调整布局，支持把输入框顶起来
• ✅ 文件上传修复：使用 uni.uploadFile 替代 FormData，解决微信小程序兼容性问题
• ✅ 主包优化：将大图片资源迁移到云存储，减少主包体积约10MB

v2.0.0（2026-07-17）

• ✅ 基础功能完善：表白发布、评论互动、点赞收藏、私信消息
• ✅ 圈子话题：兴趣圈子、热门话题、精准推荐
• ✅ 粒子效果：点赞收藏精美动画效果（表情扩散）
• ✅ 消息通知：系统公告、活动通知、版本更新
• ✅ 管理后台：用户管理、帖子审核、圈子管理、话题管理、举报管理

二、快速开始

2.1 环境要求

2.2 一键启动（开发环境）

# 1. 克隆项目
git clone  ################
cd loveapp-new

# 2. 安装后端依赖
cd loveapp-admin
npm install

# 3. 配置环境变量（复制模板并修改）
cp .env.example .env
# 编辑 .env 文件，配置数据库和微信小程序信息

# 4. 启动后端服务（开发模式）
npm run dev

# 5. 前端开发（打开 HBuilderX）
# 文件 → 打开目录 → 选择 love 目录
# 运行 → 运行到小程序模拟器 → 微信开发者工具

三、技术栈

3.1 前端技术栈

3.2 后端技术栈

3.3 开发工具

四、项目结构

loveapp-new/
├── love/                              # 前端 uni-app 项目
│   ├── components/                    # 公共组件
│   │   ├── EmojiPicker.vue            # 表情选择器
│   │   ├── FriendSelector.vue         # 好友选择器
│   │   ├── MusicPlayer.vue            # 音乐播放器
│   │   ├── ParticleEffect.vue         # 粒子效果组件（点赞/收藏动画）
│   │   └── SharePoster.vue            # 分享海报
│   ├── custom-tabbar/                 # 自定义底部导航栏
│   │   └── index.vue                  # TabBar组件（带消息红点）
│   ├── pages/                         # 页面目录
│   │   ├── index/                     # 首页（表白墙瀑布流）
│   │   ├── detail/                    # 帖子详情（含评论区）
│   │   ├── publish/                   # 发表白（匿名、图片、话题）
│   │   ├── circle/                    # 圈子列表
│   │   ├── circle-posts/              # 圈子帖子列表
│   │   ├── messages/                  # 消息中心（私信/通知）
│   │   ├── profile/                   # 个人中心
│   │   ├── my-posts/                  # 我的帖子
│   │   ├── my-likes/                  # 我的点赞
│   │   ├── my-collects/               # 我的收藏
│   │   ├── my-circles/                # 我的圈子
│   │   ├── my-follows/                # 我的关注
│   │   ├── my-followers/              # 我的粉丝
│   │   ├── blacklist/                 # 黑名单
│   │   ├── chat/                      # 聊天页面（私信）
│   │   ├── edit-profile/              # 编辑资料（左右布局）
│   │   ├── user-profile/              # 用户主页
│   │   ├── topic-posts/               # 话题帖子列表
│   │   ├── system-notices/            # 系统通知（分类tab）
│   │   ├── login/                     # 登录页面
│   │   ├── agreement/                 # 用户协议
│   │   ├── privacy/                   # 隐私设置
│   │   └── maintenance/               # 维护页面
│   ├── static/                        # 静态资源
│   │   ├── fonts/                     # 字体图标（iconfont）
│   │   ├── tabs/                      # TabBar图标
│   │   ├── banner-bg.png              # Banner背景
│   │   ├── logo.png                   # Logo
│   │   └── love.png                   # 应用图标
│   ├── utils/                         # 工具函数
│   │   ├── api.js                     # API接口封装
│   │   ├── config.js                  # 全局配置（URL统一管理）
│   │   ├── format.js                  # 格式化工具（日期、数字）
│   │   └── request.js                 # 请求封装（统一拦截、错误处理）
│   ├── App.vue                        # 应用入口（全局样式、生命周期）
│   ├── main.js                        # 主入口（Vue配置）
│   ├── pages.json                     # 页面路由配置（tabBar、pages）
│   ├── manifest.json                  # 应用配置（AppID、权限）
│   ├── project.config.json            # HBuilderX项目配置
│   └── uni.scss                       # 全局样式变量（主题色、字体）
│
├── loveapp-admin/                     # 后端管理系统
│   ├── config/                        # 配置文件
│   │   ├── config.js                  # 应用配置（整合.env）
│   │   ├── database.js                # 数据库配置（Sequelize）
│   │   └── audit.js                   # 审核配置（图片审核开关）
│   ├── controllers/                   # 控制器（业务逻辑）
│   │   ├── adminController.js         # 管理员认证（登录、修改密码）
│   │   ├── wxController.js            # 微信用户（登录、注册、资料）
│   │   ├── postController.js          # 帖子管理（审核、置顶、删除）
│   │   ├── postWxController.js        # 帖子微信接口（列表、详情、互动）
│   │   ├── commentController.js       # 评论管理
│   │   ├── commentWxController.js     # 评论微信接口
│   │   ├── userController.js          # 用户管理（封禁、管理员）
│   │   ├── messageController.js       # 消息管理
│   │   ├── messageWxController.js     # 消息微信接口
│   │   ├── circleController.js        # 圈子管理（CRUD、名称唯一校验）
│   │   ├── circleWxController.js      # 圈子微信接口
│   │   ├── topicController.js         # 话题管理
│   │   ├── bannerController.js        # Banner管理
│   │   ├── noticeController.js        # 通知管理（分类、置顶、发布）
│   │   ├── ticketController.js        # 举报工单（处理、通知）
│   │   ├── uploadController.js        # 上传控制器（图片审核）
│   │   ├── configController.js        # 配置管理
│   │   ├── subscribeController.js     # 订阅消息
│   │   ├── subscribeTemplateController.js
│   │   ├── danmakuController.js       # 弹幕管理
│   │   ├── danmakuWxController.js     # 弹幕微信接口
│   │   ├── followWxController.js      # 关注微信接口
│   │   └── qrcodeController.js        # 二维码生成
│   ├── services/                      # 服务层
│   │   ├── auditService.js            # 审核服务
│   │   ├── imageAuditService.js       # 图片审核服务（本地规则）
│   │   ├── tencentImageAuditService.js # 腾讯云图片审核
│   │   └── wechatService.js           # 微信服务（登录、模板消息）
│   ├── models/                        # 数据模型（Sequelize）
│   │   ├── User.js                    # 用户模型
│   │   ├── Post.js                    # 帖子模型
│   │   ├── Comment.js                 # 评论模型
│   │   ├── Like.js                    # 点赞模型
│   │   ├── Collect.js                 # 收藏模型
│   │   ├── Follow.js                  # 关注模型
│   │   ├── Circle.js                  # 圈子模型
│   │   ├── CircleMember.js            # 圈子成员模型
│   │   ├── Message.js                 # 消息模型
│   │   ├── Danmaku.js                 # 弹幕模型
│   │   ├── Blacklist.js               # 黑名单模型
│   │   ├── Admin.js                   # 管理员模型
│   │   ├── Topic.js                   # 话题模型
│   │   ├── Banner.js                  # Banner模型
│   │   ├── Notice.js                  # 通知模型
│   │   ├── Ticket.js                  # 举报工单模型
│   │   ├── Config.js                  # 配置模型
│   │   ├── SubscribeTemplate.js       # 订阅消息模板模型
│   │   ├── SubscribeMessage.js        # 订阅消息记录模型
│   │   └── index.js                   # 模型导出
│   ├── middlewares/                   # 中间件
│   │   └── auth.js                    # JWT认证中间件
│   ├── routes/                        # 路由配置
│   │   └── index.js                   # 路由入口（所有API路由）
│   ├── views/                         # 管理后台页面（HTML）
│   │   ├── login.html                 # 管理员登录页
│   │   ├── index.html                 # 仪表盘
│   │   └── admin/                     # 管理模块页面
│   │       ├── users.html             # 用户管理
│   │       ├── posts.html             # 帖子管理
│   │       ├── circles.html           # 圈子管理
│   │       ├── topics.html            # 话题管理
│   │       ├── banners.html           # Banner管理
│   │       ├── notices.html           # 通知管理
│   │       ├── tickets.html           # 举报管理
│   │       ├── configs.html           # 配置管理
│   │       └── subscribe-templates.html
│   ├── deploy/                        # 部署配置
│   │   ├── nginx.conf                 # Nginx配置模板
│   │   └── pm2.json                   # PM2配置模板
│   ├── utils/                         # 工具函数
│   │   ├── notification.js            # 通知工具（系统通知发送）
│   │   └── notifyChecker.js           # 通知检查器
│   ├── migrations/                    # 数据库迁移脚本
│   ├── uploads/                       # 上传文件目录
│   ├── app.js                         # 应用入口（Express启动）
│   ├── package.json                   # 依赖配置
│   └── .env                           # 环境变量（数据库、微信等）
│
├── .env.example                       # 环境变量模板
├── .gitignore                         # Git忽略配置
└── README.md                          # 项目文档

五、搭建教程

5.1 服务器环境准备（宝塔面板）

5.1.1 安装 Node.js

# 登录宝塔面板（推荐使用宝塔面板管理服务器）
# 软件商店 → 搜索 Node.js → 安装最新版本（16.x+）

# 验证安装
node -v    # 应显示 v16.x 或更高
npm -v     # 应显示 8.x 或更高

5.1.2 安装 MySQL

# 软件商店 → 搜索 MySQL → 安装 5.7 或 8.0 版本

# 创建数据库
# 数据库 → 添加数据库
# 数据库名: t_lovewall_top
# 用户名: t_lovewall_top
# 密码: 自定义密码（建议使用复杂密码）

# 授权远程访问（如需本地开发连接）
GRANT ALL PRIVILEGES ON t_lovewall_top.* TO 't_lovewall_top'@'%' IDENTIFIED BY '你的密码';
FLUSH PRIVILEGES;

5.1.3 创建站点

# 网站 → 添加站点
# 域名: 你的域名或 IP
# 根目录: /www/wwwroot/loveapp-admin
# PHP版本: 纯静态（不需要PHP）

5.2 前端搭建

5.2.1 下载项目

# 克隆项目到本地
git clone https://gitee.com/xiaoli-888/loveapp.git
cd loveapp-new

5.2.2 安装依赖

cd love
npm install

# 如果安装失败，尝试使用淘宝镜像
npm install --registry=https://registry.npmmirror.com

5.2.3 配置前端 URL

编辑 love/utils/config.js：

export const BASE_URL = 'http://你的服务器IP或域名/'
export const API_BASE_URL = BASE_URL
export const IMAGE_BASE_URL = BASE_URL

说明：项目已实现 URL 统一管理，更换域名只需修改此文件。

5.2.4 运行项目

方式一：使用 HBuilderX（推荐）

1. 打开 HBuilderX
2. 文件 → 打开目录 → 选择 love 目录
3. 运行 → 运行到小程序模拟器 → 微信开发者工具
4. 首次运行需要配置微信小程序 AppID

方式二：使用命令行

# 开发模式（微信小程序）
npm run dev:mp-weixin

# 构建生产版本（微信小程序）
npm run build:mp-weixin

# 开发模式（H5）
npm run dev:h5

# 构建生产版本（H5）
npm run build:h5

5.2.5 微信开发者工具配置

1. 打开微信开发者工具
2. 导入项目 → 选择 love/unpackage/dist/build/mp-weixin 目录（开发模式）或构建后的目录
3. 配置 AppID（测试号或正式号）
4. 开启「不校验合法域名」（开发环境）

5.3 后端搭建

5.3.1 上传后端代码

# 将 loveapp-admin 目录上传到服务器
scp -r loveapp-admin root@你的服务器IP:/www/wwwroot/

# 或者使用 git 克隆到服务器
cd /www/wwwroot
git clone https://gitee.com/xiaoli-888/loveapp.git
mv loveapp/loveapp-admin .

5.3.2 安装依赖

cd /www/wwwroot/loveapp-admin
npm install

# 如果安装失败，尝试使用淘宝镜像
npm install --registry=https://registry.npmmirror.com

5.3.3 配置环境变量

编辑 .env 文件（项目已提供 .env.example 模板）：

# 服务端口
PORT=3000

# 数据库配置
DB_HOST=localhost
DB_PORT=3306
DB_NAME=
DB_USER=
DB_PASSWORD=你的数据库密码

# JWT配置（建议修改为复杂密钥）
JWT_SECRET=loveapp_admin_secret_key_2024
JWT_EXPIRES_IN=7d

# 文件上传路径
UPLOAD_PATH=./uploads

# 微信小程序配置（必填，否则用户登录使用设备ID）
WECHAT_APPID=你的微信小程序AppID
WECHAT_APPSECRET=你的微信小程序AppSecret

# 腾讯云配置（图片审核，可选）
TENCENT_SECRET_ID=你的腾讯云SecretId
TENCENT_SECRET_KEY=你的腾讯云SecretKey
TENCENT_REGION=ap-beijing

# 服务器基础URL（用于生成图片链接、二维码等）
BASE_URL=http://你的服务器IP或域名

重要提示：

• 微信小程序 AppID 和 AppSecret 必须配置，否则用户无法正常登录
• JWT_SECRET 建议修改为随机生成的复杂字符串
• 腾讯云配置为可选，不配置则不进行图片内容安全审核

5.3.4 启动服务

# 安装 PM2（生产环境推荐）
npm install -g pm2

# 启动服务
pm2 start app.js --name loveapp-admin

# 查看状态
pm2 status

# 查看日志
pm2 logs loveapp-admin

# 重启服务
pm2 restart loveapp-admin

5.3.5 设置开机自启

pm2 startup
pm2 save

5.4 配置 Nginx 反向代理

5.4.1 使用项目配置模板

# 复制配置文件
cp loveapp-admin/deploy/nginx.conf /www/server/panel/vhost/nginx/你的域名.conf

5.4.2 修改配置

编辑 Nginx 配置文件：

server {
    listen 80;
    server_name 你的服务器IP或域名;

    root /www/wwwroot/loveapp-admin;

    # 后端 API 代理
    location /api/ {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_connect_timeout 60s;
        proxy_read_timeout 60s;
    }

    # 静态文件服务（上传的图片）
    location /uploads/ {
        alias /www/wwwroot/loveapp-admin/uploads/;
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
    }

    # 管理后台页面
    location /admin/ {
        alias /www/wwwroot/loveapp-admin/views/admin/;
    }

    # 首页重定向到管理后台登录
    location = / {
        rewrite ^ /admin/login.html permanent;
    }
}

5.4.3 重启 Nginx

nginx -t && nginx -s reload

5.5 配置 HTTPS（推荐）

# 在宝塔面板中配置
# 网站 → 站点设置 → SSL → Let's Encrypt（免费证书）
# 开启强制 HTTPS

# 修改后端 .env 文件
BASE_URL=https://你的域名

# 修改前端 love/utils/config.js
export const BASE_URL = 'https://你的域名/'

5.6 数据库初始化

系统启动时会自动执行以下初始化操作：

1. 自动创建数据表：Sequelize 会根据模型自动创建所有数据表
2. 创建默认管理员：用户名 admin，密码 admin123
3. 初始化示例数据：
   • Banner 轮播图（6条）
   • 话题（8条）
   • 圈子（4条）
   • 工单（3条）

首次启动日志：

开始连接数据库...
数据库连接成功
开始同步数据库模型...
数据库模型同步成功
初始化数据...
默认管理员账号已创建: admin / admin123
默认轮播图数据已初始化
默认话题数据已初始化
默认圈子数据已初始化
默认工单数据已初始化
服务器启动成功，端口: 3000
API地址: http://localhost:3000/api

六、模块依赖安装

6.1 后端依赖列表

6.2 开发依赖

6.3 前端依赖

6.4 安装命令汇总

# 前端依赖
cd love
npm install

# 后端依赖
cd ../loveapp-admin
npm install

# 全局安装 PM2（生产环境）
npm install -g pm2

# 全局安装 nodemon（开发环境）
npm install -g nodemon

6.5 依赖版本锁定

项目使用 package-lock.json 锁定依赖版本，确保不同环境安装的依赖版本一致。

七、API 接口文档

7.1 基础地址

http://你的服务器IP或域名/api/

7.2 接口分类总览

7.3 管理后台接口（需登录）

7.3.1 管理员认证

POST /api/admin/login 请求示例：

{
  "username": "admin",
  "password": "admin123"
}

响应示例：

{
  "code": 200,
  "message": "success",
  "data": {
    "id": 1,
    "username": "admin",
    "role": "super",
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
  }
}

7.3.2 用户管理

GET /api/admin/users 请求参数：

7.3.3 帖子管理

PUT /api/admin/posts/:id/audit 请求示例：

{
  "status": 1,
  "audit_note": "审核通过"
}

7.3.4 圈子管理

7.3.5 话题管理

7.3.6 Banner管理

7.3.7 系统通知

通知分类：

• system：系统公告
• activity：活动通知
• version：版本更新

7.3.8 举报管理

举报状态：

• pending：待处理
• processing：处理中
• resolved：已解决
• closed：已关闭

7.3.9 系统配置

配置项：

• wechat.app_id：微信小程序AppID
• wechat.app_secret：微信小程序AppSecret
• contact.wechat：客服微信
• contact.phone：客服电话
• contact.email：客服邮箱
• music.url：背景音乐URL
• audit.enable：是否启用图片审核
• upload.max_size：最大上传大小（MB）
• agreement.user：用户协议内容
• agreement.privacy：隐私政策内容

7.3.10 订阅消息模板

7.3.11 系统统计

响应示例：

{
  "code": 200,
  "message": "success",
  "data": {
    "total_users": 1234,
    "total_posts": 5678,
    "total_comments": 9012,
    "total_likes": 12345,
    "total_collects": 6789,
    "today_users": 23,
    "today_posts": 56,
    "today_comments": 89,
    "pending_audit": 12
  }
}

7.4 微信小程序接口

7.4.1 用户认证

POST /api/wx/login 请求示例：

{
  "code": "微信登录code",
  "encryptedData": "加密数据",
  "iv": "解密向量"
}

7.4.2 个人中心

7.4.3 关注相关

7.4.4 帖子相关

GET /api/posts 请求参数：

7.4.5 评论相关

7.4.6 圈子相关

7.4.7 消息相关

7.4.8 系统通知

GET /api/notices 请求参数：

7.4.9 话题相关

7.4.10 黑名单

7.4.11 弹幕相关

7.4.12 订阅消息

7.4.13 举报功能

POST /api/posts/:id/report 请求示例：

{
  "reason": "内容违规",
  "description": "帖子包含不良内容"
}

7.5 公共接口（无需登录）

7.5.1 首页Banner

7.5.2 系统配置

7.5.3 图片上传

图片上传限制：

• 单张图片最大：10MB
• 支持格式：jpg、jpeg、png、gif、webp
• 自动压缩：超过2MB自动压缩

视频上传限制：

• 单视频最大：50MB
• 支持格式：mp4、mpeg、mov、avi、flv、3gp、webm、mkv
• 存储方式：本地存储或腾讯云COS
• 上传接口：POST /api/upload/video

7.5.4 二维码生成

7.6 错误码说明

八、功能介绍

8.1 前端功能

8.1.1 首页模块

8.1.2 表白发布

8.1.3 帖子详情

8.1.4 圈子模块

8.1.5 消息模块

8.1.6 个人中心

8.1.7 设置模块

8.2 管理后台功能

8.2.1 仪表盘

8.2.2 用户管理

8.2.3 帖子管理

8.2.4 圈子管理

8.2.5 话题管理

8.2.6 Banner管理

8.2.7 系统通知

8.2.8 举报管理

8.2.9 系统配置

8.2.10 订阅消息

九、后台配置

9.1 登录后台

访问地址: http://你的服务器IP或域名/admin/login.html
默认账号: admin
默认密码: admin123

重要提示：首次登录后请立即修改密码！

9.2 微信小程序配置

登录后台后，进入「系统配置」→ 设置微信小程序配置：

获取方式：

1. 登录微信公众平台（mp.weixin.qq.com）
2. 进入「开发」→「开发管理」→「开发设置」
3. 获取 AppID 和 AppSecret（需要管理员扫码验证）

9.3 图片审核配置（可选）

配置腾讯云内容安全服务进行图片审核：

1. 登录腾讯云控制台（console.cloud.tencent.com）
2. 搜索并开通「内容安全 CMS」
3. 进入「访问管理」→「API密钥管理」创建 SecretId 和 SecretKey
4. 在后台「系统配置」中设置审核开关和腾讯云密钥

审核规则：

• 敏感内容检测（色情、暴力、政治敏感）
• 广告内容检测
• 违规图片拦截

9.4 邮箱配置（可选）

配置邮箱用于找回密码功能：

常见邮箱SMTP配置：

9.5 客服配置

设置客服联系方式：

十、URL 配置管理

为方便更换域名，项目实现了 URL 统一配置管理。更换域名时只需修改以下两个文件：

10.1 前端配置

配置文件：love/utils/config.js

export const BASE_URL = 'http://你的服务器IP或域名/'
export const API_BASE_URL = BASE_URL
export const IMAGE_BASE_URL = BASE_URL

使用方式：在需要 URL 的地方引入配置

import { BASE_URL } from '../../utils/config'

10.2 后端配置

配置文件：loveapp-admin/.env

BASE_URL=http://你的服务器IP或域名

使用方式：在 controller 中通过 config 获取

const config = require('../config/config')
const BASE_URL = config.baseUrl

10.3 更换域名步骤

1. 修改前端：love/utils/config.js → 更新 BASE_URL
2. 修改后端：loveapp-admin/.env → 更新 BASE_URL
3. 修改 Nginx：loveapp-admin/deploy/nginx.conf → 更新 server_name
4. 重启服务：pm2 restart loveapp-admin && nginx -s reload

十一、部署指南

11.1 前端部署

11.1.1 构建生产版本

cd love

# 构建微信小程序版本
npm run build:mp-weixin

# 构建H5版本
npm run build:h5

# 构建App版本
npm run build:app-plus

11.1.2 上传到微信小程序后台

1. 打开微信开发者工具
2. 导入构建后的项目（unpackage/dist/build/mp-weixin）
3. 点击「上传」按钮
4. 登录微信公众平台 → 版本管理 → 提交审核

11.1.3 H5部署

# 将构建后的H5文件上传到服务器
scp -r unpackage/dist/build/h5/* root@你的服务器IP:/www/wwwroot/love-h5/

# 配置Nginx
server {
    listen 80;
    server_name h5.你的域名.com;
    root /www/wwwroot/love-h5;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 反向代理API
    location /api/ {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

11.2 后端部署

11.2.1 使用 PM2 部署

# 启动服务
pm2 start app.js --name loveapp-admin

# 查看状态
pm2 status

# 重启服务
pm2 restart loveapp-admin

# 停止服务
pm2 stop loveapp-admin

# 删除服务
pm2 delete loveapp-admin

# 查看日志
pm2 logs loveapp-admin

# 查看实时日志
pm2 logs loveapp-admin --stream

# 设置开机自启
pm2 startup
pm2 save

# 查看进程资源使用
pm2 monit

11.2.2 使用 PM2 配置文件

项目已提供 deploy/pm2.json 配置模板：

{
  "name": "loveapp-admin",
  "script": "app.js",
  "cwd": "/www/wwwroot/loveapp-admin",
  "env": {
    "NODE_ENV": "production"
  },
  "instances": 1,
  "watch": false,
  "max_memory_restart": "1G",
  "error_file": "./logs/err.log",
  "out_file": "./logs/out.log",
  "log_date_format": "YYYY-MM-DD HH:mm:ss"
}

使用方式：

pm2 start deploy/pm2.json

11.2.3 使用 Docker 部署（可选）

创建 Dockerfile：

FROM node:16-alpine

WORKDIR /app

COPY package*.json ./
RUN npm install --production

COPY . .

EXPOSE 3000

CMD ["node", "app.js"]

创建 docker-compose.yml：

version: '3.8'
services:
  loveapp-admin:
    build: .
    ports:
      - "3000:3000"
    environment:
      - PORT=3000
      - DB_HOST=mysql
      - DB_NAME=t_lovewall_top
      - DB_USER=t_lovewall_top
      - DB_PASSWORD=你的密码
      - WECHAT_APPID=你的AppID
      - WECHAT_APPSECRET=你的AppSecret
      - BASE_URL=http://你的域名
    depends_on:
      - mysql
    restart: always

  mysql:
    image: mysql:5.7
    ports:
      - "3306:3306"
    environment:
      - MYSQL_DATABASE=t_lovewall_top
      - MYSQL_USER=t_lovewall_top
      - MYSQL_PASSWORD=你的密码
      - MYSQL_ROOT_PASSWORD=你的密码
    volumes:
      - mysql-data:/var/lib/mysql
    restart: always

volumes:
  mysql-data:

构建并运行：

docker-compose up -d

11.3 Nginx 配置

完整的 Nginx 配置参考 loveapp-admin/deploy/nginx.conf：

server {
    listen 80;
    server_name your-domain.com;

    root /www/wwwroot/loveapp-admin;

    # 后端 API 代理
    location /api/ {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_connect_timeout 60s;
        proxy_read_timeout 60s;
    }

    # 静态文件（上传的图片）
    location /uploads/ {
        alias /www/wwwroot/loveapp-admin/uploads/;
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
    }

    # 管理后台页面
    location /admin/ {
        alias /www/wwwroot/loveapp-admin/views/admin/;
    }

    # 首页重定向到管理后台登录
    location = / {
        rewrite ^ /admin/login.html permanent;
    }

    # 错误页面
    error_page 404 /admin/login.html;
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /www/wwwroot/loveapp-admin/public;
    }
}

11.4 微信小程序审核注意事项

1. 服务器域名配置：

   • 在微信公众平台 → 开发 → 开发设置 → 服务器域名中配置：
     • request合法域名：https://你的域名
     • uploadFile合法域名：https://你的域名
     • downloadFile合法域名：https://你的域名

2. 隐私协议：

   • 在后台配置用户协议和隐私政策内容
   • 在小程序中添加「用户协议」和「隐私政策」页面链接

3. 审核材料：

   • 准备小程序名称、头像、简介
   • 准备功能页面截图（首页、发布页、个人中心等）
   • 准备用户协议和隐私政策文本

十二、数据库表结构

系统启动时会自动创建所有数据表，无需手动创建。

12.1 数据表清单

12.2 核心表结构

users（用户表）

posts（帖子表）

comments（评论表）

likes（点赞表）

collects（收藏表）

follows（关注表）

circles（圈子表）

notices（通知表）

tickets（举报工单表）

十三、开发指南

13.1 开发模式

13.1.1 前端开发

cd love

# 微信小程序开发模式
npm run dev:mp-weixin

# H5开发模式
npm run dev:h5

使用 HBuilderX（推荐）：

1. 打开 HBuilderX
2. 文件 → 打开目录 → 选择 love 目录
3. 运行 → 运行到小程序模拟器 → 微信开发者工具

13.1.2 后端开发

cd loveapp-admin

# 开发模式（使用 nodemon 自动重启）
npm run dev

# 生产模式
npm start

13.2 代码规范

13.2.1 JavaScript 规范

• 使用 ES6+ 语法
• 使用 const/let 代替 var
• 箭头函数优先
• 异步操作使用 async/await
• 使用模板字符串代替字符串拼接

13.2.2 Vue 规范

• 使用组合式 API（Composition API）
• 组件名使用 PascalCase
• 文件名使用 kebab-case
• 模板中使用 2 空格缩进
• 使用 <script setup> 语法

13.2.3 SCSS 规范

• 使用变量定义颜色和字体大小
• 使用嵌套规则
• 使用 mixin 复用样式
• 使用 BEM 命名规范

13.2.4 后端规范

• Controller 层只负责请求处理和响应
• Service 层负责业务逻辑
• Model 层定义数据结构
• 使用统一的错误处理

13.3 调试技巧

13.3.1 前端调试

1. 使用微信开发者工具调试
2. 在 HBuilderX 中设置断点
3. 使用 console.log 输出调试信息
4. 使用 uni.showToast 显示临时提示

13.3.2 后端调试

# 查看 PM2 日志
pm2 logs loveapp-admin

# 查看实时日志
pm2 logs loveapp-admin --stream

# 开发模式下调试
npm run dev

13.3.3 数据库调试

-- 查看最近的帖子
SELECT * FROM posts ORDER BY created_at DESC LIMIT 10;

-- 查看用户信息
SELECT id, nickname, avatar, created_at FROM users LIMIT 20;

-- 查看未处理的工单
SELECT * FROM tickets WHERE status = 'pending';

13.4 添加新功能

13.4.1 添加新页面（前端）

1. 在 love/pages/ 目录下创建新目录
2. 创建 page.vue 文件
3. 在 love/pages.json 中注册页面
4. 在 love/utils/api.js 中添加 API 方法

13.4.2 添加新接口（后端）

1. 在 loveapp-admin/controllers/ 目录下创建新控制器
2. 在 loveapp-admin/routes/index.js 中注册路由
3. 在 loveapp-admin/models/ 目录下创建新模型（如需要）

十四、常见问题

14.1 前端连接后端失败

原因：URL 配置错误或网络不通

解决：

1. 检查 love/utils/config.js 中的 BASE_URL 是否正确
2. 检查服务器防火墙是否开放 3000 端口
3. 检查 Nginx 配置是否正确
4. 使用 curl http://服务器IP:3000/api/banners 测试后端是否正常

14.2 图片上传失败

原因：文件权限不足或路径错误

解决：

1. 检查 uploads 目录权限：chmod -R 755 uploads
2. 检查 .env 中的 UPLOAD_PATH 是否正确
3. 检查 Nginx 是否配置了 /uploads/ 路由
4. 检查文件大小是否超过限制（默认 10MB）

14.3 微信登录失败

原因：AppID 或 AppSecret 配置错误

解决：

1. 检查 .env 中的 WECHAT_APPID 和 WECHAT_APPSECRET
2. 检查微信公众平台的 AppID 和 AppSecret 是否正确
3. 检查微信小程序是否已发布（测试号可直接使用）
4. 检查服务器域名是否在微信公众平台配置

14.4 数据库连接失败

原因：数据库配置错误

解决：

1. 检查 .env 中的数据库配置
2. 检查数据库是否已创建
3. 检查数据库用户权限
4. 使用 mysql -u 用户名 -p 测试数据库连接

14.5 PM2 启动失败

原因：端口被占用或依赖缺失

解决：

1. 检查端口是否被占用：lsof -i :3000
2. 检查依赖是否安装：npm install
3. 查看 PM2 日志：pm2 logs loveapp-admin

14.6 小程序审核被拒

常见原因：

1. 服务器域名未配置：在微信公众平台配置服务器域名
2. 隐私协议缺失：添加用户协议和隐私政策页面
3. 功能描述不符：准备功能页面截图，确保描述准确
4. 敏感内容：检查是否包含敏感内容

14.7 帖子发布后不显示

原因：帖子需要审核

解决：

1. 登录管理后台
2. 进入「帖子管理」→「待审核」
3. 审核通过后帖子即可显示

14.8 圈子名称重复

原因：圈子名称需要唯一

解决：

• 创建或更新圈子时，系统会自动检查名称是否重复
• 选择不同的圈子名称

十五、版本更新记录

v1.0.0

• 初始版本发布
• 基础表白功能（发布、浏览、点赞、评论）
• 管理后台（用户管理、帖子管理）

v1.1.0

• 新增圈子功能（圈子列表、加入圈子、圈子帖子）
• 新增话题功能（话题列表、话题帖子）
• 新增弹幕功能
• 新增收藏功能

v1.2.0

• 优化用户体验
• 统一 URL 配置管理（前端/后端）
• 点赞收藏状态颜色统一（粉红色 #ff2d78 / 黄色 #ffc107）
• 粒子效果动画（表情扩散）
• 帖子卡片长按操作（举报、拉黑、删除）
• 系统通知分类（系统公告/活动通知/版本更新）
• 举报工单处理（自动发送系统通知）
• 圈子名称唯一校验

v1.3.0

• 新增个人主页统计区域（紫色半透明背景）
• 编辑资料页左右布局优化
• 消息红点自动更新（切换 Tab 时刷新）
• 管理员权限优化（帖子置顶、评论置顶）
• 图片审核（腾讯云内容安全）
• 邮箱找回密码功能

十六、许可证

MIT License

MIT License

Copyright (c) 2024 校园表白墙

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

本项目仅供学习交流使用，请勿用于商业用途。