Booben 开源项目使用教程
1. 项目的目录结构及介绍
Booben 项目的目录结构如下:
booben/
├── client/
│ ├── public/
│ ├── src/
│ │ ├── assets/
│ │ ├── components/
│ │ ├── pages/
│ │ ├── App.js
│ │ ├── index.js
│ └── package.json
├── server/
│ ├── config/
│ ├── controllers/
│ ├── models/
│ ├── routes/
│ ├── utils/
│ ├── app.js
│ ├── server.js
│ └── package.json
├── .env
├── .gitignore
├── package.json
└── README.md
目录结构介绍
-
client/: 前端代码目录,包含 React 应用的所有文件。
- public/: 存放静态资源文件,如 HTML 模板。
- src/: 前端源代码目录。
- assets/: 存放图片、样式等静态资源。
- components/: 存放 React 组件。
- pages/: 存放页面组件。
- App.js: 前端应用的主组件。
- index.js: 前端应用的入口文件。
- package.json: 前端项目的依赖配置文件。
-
server/: 后端代码目录,包含 Node.js 应用的所有文件。
- config/: 存放配置文件。
- controllers/: 存放控制器文件,处理业务逻辑。
- models/: 存放数据模型文件。
- routes/: 存放路由文件,定义 API 接口。
- utils/: 存放工具函数文件。
- app.js: 后端应用的主文件。
- server.js: 后端应用的启动文件。
- package.json: 后端项目的依赖配置文件。
-
.env: 环境变量配置文件。
-
.gitignore: Git 忽略文件配置。
-
package.json: 项目的依赖配置文件。
-
README.md: 项目说明文档。
2. 项目的启动文件介绍
前端启动文件
前端的启动文件是 client/src/index.js
,该文件是 React 应用的入口文件,负责渲染 App.js
组件到 HTML 模板中。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
后端启动文件
后端的启动文件是 server/server.js
,该文件负责启动 Node.js 服务器,并监听指定端口。
const app = require('./app');
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
3. 项目的配置文件介绍
环境变量配置文件
环境变量配置文件是 .env
,用于存储敏感信息和项目配置。例如:
PORT=5000
MONGO_URI=mongodb://localhost:27017/booben
JWT_SECRET=your_jwt_secret
前端配置文件
前端的配置文件是 client/package.json
,包含项目的依赖和脚本命令。例如:
{
"name": "booben-client",
"version": "1.0.0",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3"
}
}
后端配置文件
后端的配置文件是 server/package.json
,包含项目的依赖和脚本命令。例如:
{
"name": "booben-server",
"version": "1.0.0",
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js"
},
"dependencies": {
"express": "^4.17.1",
"mongoose": "^5.12.3",
"dotenv": "^8.2.0"
}
}
通过以上配置文件,可以轻松启动和管理 Booben 项目的前端和后端服务。