MERN 堆栈 CRUD 项目教程

MERN 堆栈 CRUD 项目教程

mern-stack-crudMERN stack (MongoDB, Express, React and Node.js) create read update and delete (CRUD) web application example项目地址:https://gitcode.com/gh_mirrors/me/mern-stack-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: 前端项目的依赖和脚本。

• 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

mern-stack-crudMERN stack (MongoDB, Express, React and Node.js) create read update and delete (CRUD) web application example项目地址:https://gitcode.com/gh_mirrors/me/mern-stack-crud