So erstellen und implementieren Sie eine Full-Stack-MERN-Anwendung

Der MERN-Stack ist ein beliebter Technologie-Stack zum Erstellen von Full-Stack-Webanwendungen. Es besteht aus MongoDB, Express, React und Node.js, die jeweils eine wichtige Rolle bei der Erstellung einer modernen Web-App spielen. In diesem Artikel werden wir den Prozess der Erstellung einer Full-Stack-MERN-Anwendung und deren Bereitstellung auf einem Live-Server durchlaufen.

Was ist der MERN-Stack?

• MongoDB: Eine NoSQL-Datenbank, die zum Speichern von Daten in einem flexiblen, JSON-ähnlichen Format verwendet wird.
• Express: Ein leichtes Webanwendungs-Framework für Node.js, das bei der Verwaltung serverseitiger Logik hilft.
• Reagieren: Eine Frontend-JavaScript-Bibliothek, die zum Erstellen von Benutzeroberflächen mit wiederverwendbaren Komponenten verwendet wird.
• Node.js: Eine JavaScript-Laufzeitumgebung, die zum Erstellen der serverseitigen Back-End-Logik und APIs verwendet wird.

Schritte zum Erstellen einer Full-Stack-MERN-Anwendung

1. Einrichten des Backends (Node.js Express MongoDB):

• Initialisieren Sie ein Node.js-Projekt und installieren Sie erforderliche Abhängigkeiten wie Express, Mongoose und Cors.
• Richten Sie Routen in Express ein, um API-Anfragen zu verarbeiten (z. B. GET, POST, PUT, DELETE).
• Verwenden Sie Mongoose, um eine Verbindung zu MongoDB herzustellen und Datenmodelle zu definieren.
• Richten Sie einen Server mit Express ein und konfigurieren Sie ihn für die Verarbeitung von Anfragen.
• Implementieren Sie CRUD-Vorgänge (Erstellen, Lesen, Aktualisieren, Löschen), um mit MongoDB zu interagieren. Beispiel-Backend-Code:

const express = require('express');
const mongoose = require('mongoose');
const app = express();

// Middleware
app.use(express.json());

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/mernApp', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB connected'))
  .catch(err => console.log(err));

// Define a simple model
const User = mongoose.model('User', { name: String, email: String });

// API route to get all users
app.get('/api/users', async (req, res) => {
  const users = await User.find();
  res.json(users);
});

app.listen(5000, () => console.log('Server running on port 5000'));

2. Aufbau des Frontends (Reagieren):

• Richten Sie ein React-Projekt mit der Create-React-App oder Ihrem bevorzugten Tool ein.
• Erstellen Sie React-Komponenten, die verschiedenen Ansichten in Ihrer App entsprechen (z. B. Home, UserList, UserForm).
• Verwenden Sie axios oder fetch, um API-Anfragen an den Express-Server zu stellen und die Daten in Ihren Komponenten anzuzeigen.
• Verwalten Sie den Status mithilfe von useState oder useContext von React für die globale Statusverwaltung. Beispiel-Frontend-Code:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/api/users')
      .then(response => {
        setUsers(response.data);
      })
      .catch(err => {
        console.error(err);
      });
  }, []);

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map(user => (
          <li key={user._id}>{user.name} - {user.email}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

3. Frontend und Backend verbinden:

• Stellen Sie sicher, dass das Backend auf einem anderen Port läuft (z. B. 5000) und das Frontend (React) auf Port 3000 läuft.
• Verwenden Sie CORS (Cross-Origin Resource Sharing), um dem Frontend die Kommunikation mit dem Backend zu ermöglichen.
• Konfigurieren Sie Proxy-Einstellungen in Reacts package.json, um API-Anfragen während der Entwicklung zu vereinfachen.

Beispiel:

"proxy": "http://localhost:5000"

4. Bereitstellen der MERN-Anwendung:

• Stellen Sie den Backend-Server auf einer Plattform wie Heroku oder DigitalOcean bereit.
• Für das Frontend können Sie Dienste wie Netlify oder Vercel verwenden, um Ihre React-App bereitzustellen.
• Aktualisieren Sie nach der Bereitstellung die API-URLs so, dass sie auf den Live-Server statt auf localhost verweisen.

Beispielhafte Bereitstellungsschritte:

• Für die Backend-Bereitstellung können Sie die Heroku-CLI verwenden:

const express = require('express');
const mongoose = require('mongoose');
const app = express();

// Middleware
app.use(express.json());

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/mernApp', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB connected'))
  .catch(err => console.log(err));

// Define a simple model
const User = mongoose.model('User', { name: String, email: String });

// API route to get all users
app.get('/api/users', async (req, res) => {
  const users = await User.find();
  res.json(users);
});

app.listen(5000, () => console.log('Server running on port 5000'));

• Für die Frontend-Bereitstellung auf Netlify pushen Sie einfach Ihre React-App auf GitHub und verbinden Sie sie mit Netlify.

Fazit
Das Erstellen und Bereitstellen einer Full-Stack-MERN-Anwendung umfasst die Einrichtung des Backends mit Node.js, Express und MongoDB und des Frontends mit React. Wenn Sie diese Schritte befolgen, können Sie eine vollständige Webanwendung erstellen, die sowohl die clientseitige als auch die serverseitige Logik verwaltet. Nach der Entwicklung stellt die Bereitstellung der App auf Plattformen wie Heroku und Netlify sicher, dass Ihre Anwendung live und für Benutzer zugänglich ist.

Das obige ist der detaillierte Inhalt vonSo erstellen und implementieren Sie eine Full-Stack-MERN-Anwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!