社交媒体应用项目教程

社交媒体应用项目教程

social-media-app Social media application built with the MERN stack 项目地址: https://gitcode.com/gh_mirrors/soc/social-media-app

1. 项目的目录结构及介绍

本项目是一个使用MERN栈（MongoDB, Express, React, Node.js）构建的社交媒体应用。以下是项目的目录结构及各部分的简要介绍：

social-media-app/
├── client/                # React前端代码
│   ├── public/             # 公共文件，如index.html
│   ├── src/                # React源代码
│   └── package.json        # 前端项目依赖
├── server/                # Node.js后端代码
│   ├── controllers/        # 处理请求的控制器
│   ├── middleware/         # 中间件，用于处理如JWT验证等
│   ├── models/             # MongoDB数据模型
│   ├── routes/             # 路由配置
│   ├── util/               # 实用工具函数
│   ├── server.js           # 后端服务器入口文件
│   └── socketServer.js     # Socket.io配置文件
├── .gitignore              # Git忽略文件列表
├── README.md              # 项目说明文件
├── package.json            # 项目依赖及脚本
└── .env                   # 环境变量配置文件

2. 项目的启动文件介绍

项目的启动主要涉及两个文件：server.js 和 package.json。

• server.js：这是后端服务的入口文件。它设置了Express服务器，并连接到MongoDB数据库。此外，它还配置了路由中间件和错误处理中间件。

• package.json：这个文件包含了项目的依赖和启动脚本。在scripts部分，你可以找到以下两个重要的脚本：

  • npm run server：启动后端服务器。
  • npm start：启动React前端开发服务器。

3. 项目的配置文件介绍

项目的配置主要通过.env文件进行，该文件存储了项目的环境变量，如数据库URI、JWT密钥和端口号。以下是一些重要的配置项：

• MONGO_URI：MongoDB数据库的连接字符串。
• TOKEN_KEY：用于JWT认证的密钥。
• PORT：应用运行的端口号。

确保在项目根目录下创建一个.env文件，并填入以下内容：

MONGO_URI=<YOUR_MONGO_URI>
TOKEN_KEY=<YOUR_TOKEN_KEY>
PORT=4000

替换<YOUR_MONGO_URI>和<YOUR_TOKEN_KEY>为实际的数据库连接字符串和JWT密钥。

social-media-app Social media application built with the MERN stack 项目地址: https://gitcode.com/gh_mirrors/soc/social-media-app