logo

HuaJiangJia

基于 Express + Vue 前后端分离仿小红书项目

声明
本项目基于 AGPLv3 协议，免费开源，仅供学习交流，禁止转卖，谨防受骗。如需商用请保留版权信息，确保合法合规使用，运营风险自负，与作者无关。

项目来源
express-project/ 与 vue3-project/ 基于 ZTMYO/XiaoShiLiu fork 并二次开发，原作者 ZTMYO 相关版权、作者与项目链接信息予以保留。uniapp-harmonyos-app/ 是单独引入和适配的 HarmonyOS uni-app 项目，不属于 ZTMYO/XiaoShiLiu fork 范围。

📁 项目结构说明：本项目包含完整的前后端代码，前端位于 vue3-project/ 目录，后端位于 express-project/ 目录；uniapp-harmonyos-app/ 为单独的 HarmonyOS uni-app 移动端项目。详细结构请查看项目结构文档。

项目展示

PC端界面

移动端界面

项目文档

文档	说明
部署指南	部署配置和环境搭建说明
项目结构	项目目录结构架构说明
数据库设计	数据库表结构设计文档
API接口文档	后端API接口说明和示例

项目亮点

工程化： 环境配置、代码规范、构建与产物优化的完整流程
业务能力： 鉴权流程、路由守卫、状态管理与接口封装
体验优化： 骨架屏、懒加载、预加载、无障碍与响应式适配
组件与分层： 可复用组件拆分、按领域分组与别名引入
后台管理： 基础CRUD、数据管理与配置面板，支持后续扩展权限与统计
快速部署： 基于 Docker 的一键部署方案，支持多环境配置与自动化部署

技术栈

💡点击可展开查看详细内容

前端技术

Vue.js 3 - 前端框架（Composition API）
Vue Router 4 - 路由管理
Pinia - 状态管理
Vite - 构建工具和开发服务器
Axios - HTTP客户端
VueUse - Vue组合式工具库
CropperJS - 图片裁剪
Vue3 Emoji Picker - 表情选择器
svg-captcha - 验证码生成器

后端技术

Node.js - 运行环境
Express.js - Web框架
MySQL - 数据库
JWT - 身份认证
Multer - 文件上传
bcrypt - 密码加密
CORS - 跨域资源共享

第三方API

图片存储： 灌装的示例图片来自栗次元图床，提供稳定的图片存储服务
图片上传： 用户上传图片使用了夏柔API，确保图片上传的稳定性和速度
属地查询： IP属地查询服务使用保罗API，实现精准的IP属地定位功能

环境要求

组件	版本要求
Node.js	>= 16.0.0
MySQL	>= 5.7
MariaDB	>= 10.3
npm	>= 8.0.0
yarn	>= 1.22.0
浏览器	支持ES6+

提示：上述为传统本地开发的最低版本要求。若使用 Docker 部署，默认镜像版本如下：MySQL 5.7、Node 18-alpine（前后端构建/运行）、Nginx alpine；Docker >= 20、Docker Compose >= 2。详见部署指南文档。

环境配置

项目使用环境变量进行配置管理，前后端分别有独立的 .env 文件：

后端配置 (express-project/.env)

# 服务器配置
PORT=3001
NODE_ENV=development

# 数据库配置
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=123456
DB_NAME=huajiangjia
DB_PORT=3306

# JWT配置
JWT_SECRET=huajiangjia_secret_key_2025
JWT_EXPIRES_IN=7d
REFRESH_TOKEN_EXPIRES_IN=30d

# API配置
API_BASE_URL=http://localhost:3001

# 上传配置
# 单张图片最大文件大小
IMAGE_MAX_SIZE=10mb
# 单个视频最大文件大小
VIDEO_MAX_SIZE=100mb
# 图片上传策略 (local: 本地存储, imagehost: 第三方图床, r2: Cloudflare R2)
IMAGE_UPLOAD_STRATEGY=imagehost
# 视频上传策略 (local: 本地存储, r2: Cloudflare R2)
VIDEO_UPLOAD_STRATEGY=local

# 本地存储配置
LOCAL_UPLOAD_DIR=uploads
LOCAL_BASE_URL=http://localhost:3001
# 视频存储目录
VIDEO_UPLOAD_DIR=uploads/videos
# 视频封面存储目录
VIDEO_COVER_DIR=uploads/covers

# 第三方图床配置（当IMAGE_UPLOAD_STRATEGY=imagehost时使用）
IMAGEHOST_API_URL=https://api.xinyew.cn/api/360tc
IMAGEHOST_TIMEOUT=60000

# Cloudflare R2 配置（当IMAGE_UPLOAD_STRATEGY=r2或VIDEO_UPLOAD_STRATEGY=r2时使用）
R2_ACCESS_KEY_ID=your_r2_access_key_id_here
R2_SECRET_ACCESS_KEY=your_r2_secret_access_key_here
R2_ENDPOINT=https://your_account_id.r2.cloudflarestorage.com
R2_BUCKET_NAME=your_bucket_name_here
R2_ACCOUNT_ID=your_account_id_here
R2_REGION=auto
# 可选：如果有自定义域名，可以设置 R2_PUBLIC_URL
# R2_PUBLIC_URL=https://your-custom-domain.com

# CORS配置
CORS_ORIGIN=http://localhost:5173

# 邮件服务配置
# 是否启用邮件功能 (true/false)，默认不启用
EMAIL_ENABLED=false
# SMTP服务器地址
SMTP_HOST=smtp.qq.com
# SMTP服务器端口
SMTP_PORT=465
# 是否使用SSL/TLS (true/false)
SMTP_SECURE=true
# 邮箱账号
SMTP_USER=your_email@example.com
# 邮箱密码/授权码
SMTP_PASSWORD=your_email_password
# 发件人邮箱
EMAIL_FROM=your_email@example.com
# 发件人名称
EMAIL_FROM_NAME=花匠家图文社区

# IP属地查询配置
# 主API地址
IP_LOCATION_PRIMARY_API=https://api.pearktrue.cn/api/ip/details
# 主API超时时间（毫秒）
IP_LOCATION_PRIMARY_TIMEOUT=10000
# 备用API地址
IP_LOCATION_BACKUP_API=https://api.pearktrue.cn/api/ip/high
# 备用API超时时间（毫秒）
IP_LOCATION_BACKUP_TIMEOUT=5000

前端配置 (vue3-project/.env)

# API基础URL
VITE_API_BASE_URL=http://localhost:3001/api

# 是否使用真实API
VITE_USE_REAL_API=true

# 应用标题
VITE_APP_TITLE=花匠家图文社区

💡 配置说明：

后端支持本地存储、第三方图床和 Cloudflare R2 三种上传策略

图片和视频可以分别配置不同的上传策略

邮件功能默认关闭，启用后支持邮箱验证注册和找回密码

IP属地查询支持主备双API，自动切换保证服务可用性

前端使用 Vite 环境变量，变量名需以 VITE_ 开头

详细配置说明请参考部署指南

1. 安装依赖

# 使用 cnpm或npm
cnpm install
# 或使用 yarn
yarn install

2. 启动开发服务器

# 启动开发服务器
npm run dev

# 或使用 yarn
yarn dev

开发服务器将在 http://localhost:5173 启动

3. 构建生产版本

# 构建生产版本
npm run build

# 预览生产版本
npm run preview

⚠️ 重要提醒：前端项目需要配合后端服务使用，详细配置请查看部署指南