MERN 堆栈 CRUD 项目教程
1. 项目的目录结构及介绍
mern-stack-crud/
├── client/
│ ├── public/
│ ├── src/
│ │ ├── components/
│ │ ├── App.js
│ │ ├── index.js
│ ├── package.json
├── server/
│ ├── config/
│ ├── models/
│ ├── routes/
│ ├── controllers/
│ ├── server.js
│ ├── package.json
├── package.json
目录结构介绍
-
client/: 前端 React 应用的根目录。
- public/: 包含静态文件,如
index.html
。 - src/: 包含 React 应用的源代码。
- components/: 包含 React 组件。
- App.js: 主应用组件。
- index.js: 入口文件。
- package.json: 前端项目的依赖和脚本。
- public/: 包含静态文件,如
-
server/: 后端 Node.js 应用的根目录。
- config/: 包含配置文件。
- models/: 包含数据库模型。
- routes/: 包含 API 路由。
- controllers/: 包含控制器逻辑。
- server.js: 后端入口文件。
- package.json: 后端项目的依赖和脚本。
-
package.json: 根目录的
package.json
文件,用于管理整个项目的依赖和脚本。
2. 项目的启动文件介绍
前端启动文件
- client/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
- client/package.json
{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}
后端启动文件
- server/server.js
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(bodyParser.json());
mongoose.connect('mongodb://localhost:27017/mern-crud', {
useNewUrlParser: true,
useUnifiedTopology: true
});
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', () => {
console.log('Connected to MongoDB');
});
app.use('/api', require('./routes/api'));
app.listen(5000, () => {
console.log('Server is running on port 5000');
});
- server/package.json
{
"scripts": {
"start": "node server.js"
}
}
3. 项目的配置文件介绍
前端配置文件
- client/package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.21.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}
后端配置文件
- server/config/db.js
module.exports = {
url: 'mongodb://localhost:27017