XiaoShiLiu
基于 Express + Vue 前后端分离仿小红书项目
一个高仿小红书的图文社区项目，支持图文发布、社交互动等核心功能，旨在提供从前端到后端的完整实践范本
声明
本项目基于 GPLv3 协议，免费开源，仅供学习交流，禁止转卖，谨防受骗。如需商用请保留版权信息，确保合法合规使用，运营风险自负，与作者无关。
📁 项目结构说明：本项目包含完整的前后端代码，前端位于
vue3-project/目录，后端位于express-project/目录。详细结构请查看 项目结构文档。
项目展示
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 8.0、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=xiaoshiliu
DB_PORT=3306
# JWT配置
JWT_SECRET=xiaoshiliu_secret_key_2025
JWT_EXPIRES_IN=7d
# 上传配置
UPLOAD_MAX_SIZE=50mb
# 图片上传策略 (local: 本地存储, imagehost: 第三方图床)
UPLOAD_STRATEGY=imagehost
# 本地存储配置
LOCAL_UPLOAD_DIR=uploads
LOCAL_BASE_URL=http://localhost:3001
# 第三方图床配置
IMAGEHOST_API_URL=https://api.xinyew.cn/api/jdtc
IMAGEHOST_TIMEOUT=60000
前端配置 (vue3-project/.env)
# API基础URL配置
VITE_API_BASE_URL=http://localhost:3001/api
# 应用配置
VITE_USE_REAL_API=true
VITE_APP_TITLE=卜卜世界
💡 配置说明：
- 后端支持本地存储和第三方图床两种上传策略
- 前端使用 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
⚠️ 重要提醒：前端项目需要配合后端服务使用，详细配置请查看 部署指南
Star历史
Copyright © 2025 - XiaoShiLiu
By ZTMYO
Made with ❤️ & ⌨️