XiaoShiLiu
基于 Express + Vue 前后端分离仿小红书项目
一个高仿小红书的图文社区项目，支持图文发布、社交互动等核心功能，旨在提供从前端到后端的完整实践范本
声明
本项目基于 AGPL-3.0 协议，免费开源，仅供学习交流，禁止转卖，谨防受骗。如需商用请保留版权信息，确保合法合规使用，运营风险自负，与作者无关。
📁 前端位于
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属地查询服务使用 百度opendata，免费、无需密钥，实现精准的IP属地定位功能
环境要求
| 组件 | 版本要求 |
|---|---|
| Node.js | >= 18.0.0 |
| MySQL | >= 5.7 |
| MariaDB | >= 10.3 |
| npm | >= 8.0.0 |
| yarn | >= 1.22.0 |
| 浏览器 | 支持 ES6+ |
上述为传统本地开发的最低版本要求；Docker 部署的镜像版本与前置条件见部署指南。
快速开始
1. 环境配置
前后端各有一份 .env，从对应目录的 .env.example 复制。后端 express-project/.env 至少确认以下四项：
DB_PASSWORD=123456 # 数据库密码
JWT_SECRET=xiaoshiliu_secret_key_2025 # JWT 密钥，生产环境务必更换
API_BASE_URL=http://localhost:3001 # 后端对外访问地址
CORS_ORIGIN=http://localhost:5173 # 允许跨域的前端地址
前端 vue3-project/.env 只需确认 VITE_API_BASE_URL 指向后端 API（默认 http://localhost:3001/api）。
上传图片默认使用本地存储且不压缩。注册、上传限制、存储、邮件、图片压缩等业务参数统一在后台「系统配置」（/admin/settings）管理，详见系统配置说明。图片压缩参数保存后刷新页面生效，无需重新构建前端。
推荐列表缓存默认保留 60 分钟、最多 1000 份，可在后台「系统配置」调整。翻页会续期，超过容量后淘汰最久未访问的列表。
个人主页置顶：后端每次启动会检查并自动补齐缺失的置顶字段，已有字段和数据保持不变；所有表的缺失列统一通过 npm run init-db 或后端启动补齐，详见数据库结构补全。每人置顶上限默认 3，可在后台「系统配置」调整，必须为正整数。新建数据库已包含置顶字段。笔记管理的编辑按钮右侧可置顶或取消置顶；只有已发布笔记可新置顶，编辑后待审核的置顶笔记仍占名额且可取消。笔记管理与个人主页按最近置顶优先，发现页、点赞和收藏列表不受影响。调低上限不会自动取消已有置顶，需先取消至低于上限才能新增。
其余变量（上传策略、邮件、IP 属地、违规词检测等）保持默认即可：完整列表见 express-project/.env.example 与 vue3-project/.env.example，各项含义见部署指南。
2. 安装依赖
npm install
3. 启动开发服务器
npm run dev
开发服务器默认运行在 http://localhost:5173。
4. 构建生产版本
npm run build # 构建到 dist/
npm run preview # 本地预览，默认 http://localhost:4173
Star历史
Copyright © 2025 - XiaoShiLiu
By ZTMYO
Made with ❤️ & ⌨️