Integration von Javascript mit Backend-Frameworks wie Node.js und Express

Einrichten eines produktionsbereiten Servers

Beginnen Sie mit der Installation von Node.js aus nodejs.org Nach der Installation erstellen Sie ein Projektverzeichnis und initialisieren Sie ein package.json:

mkdir my-backend
cd my-backend
npm init -y

Installieren Sie Express als Abhängigkeit:

npm install express

Für die Entwicklung installieren Sie auch , um den Server bei Dateiänderungen automatisch neu zu starten:

npm install -D nodemon

Erstellen Sie nun eine Datei mit einem minimalen Server:

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;

app.get('/', (req, res) => {
 res.send('Hello, world!');
});

app.listen(PORT, () => {
 console.log(`Server running on port ${PORT}`);
});

Beachten Sie die Verwendung von , was die Anwendung in verschiedenen Umgebungen portabel macht – eine bewährte Vorgehensweise für die Bereitstellung.

Hinzufügen von Umweltvariablen

Verwenden Sie das -Paket, um Umgebungsvariablen aus einer -Datei zu laden:

npm install dotenv

Erstellen Sie eine Datei:

PORT=5000
DB_CONNECTION_STRING=mongodb://localhost:27017/myapp

In laden Sie die Konfiguration oben:

require('dotenv').config();

Dieses Muster hält sensible Daten aus Ihrer Codebasis fern und vereinfacht das Konfigurationsmanagement.

Middleware: Das Herz von Express

Middleware-Funktionen sind die Bausteine der Express-Anwendungslogik. Sie haben Zugriff auf das Anforderungsobjekt, das Antwortobjekt und die Funktion ; sie können Code ausführen, die Anforderung/Antwort ändern, den Zyklus beenden oder die nächste Middleware aufrufen.

Häufige Anwendungsfälle umfassen Protokollierung, Authentifizierung, Parsing Request Bodys und Handhabungsfehler.

Eingebaute Middleware

Express bietet mehrere integrierte Middleware-Funktionen:

• - Parses eingehende JSON Nutzlasten.
• – Parses URL-kodierte Körper (aus HTML-Formularen).
• – Serviert statische Dateien wie Bilder, CSS und clientseitiges JavaScript.

Beispiel mit JSON Parsing:

app.use(express.json());

app.post('/api/users', (req, res) => {
 console.log(req.body); // Access parsed JSON
 res.json({ success: true });
});

Custom Middleware

Erstellen Sie wiederverwendbare Logik, indem Sie Ihre eigene Middleware schreiben, z. B. einen Request Logger:

const logger = (req, res, next) => {
 console.log(`${req.method} ${req.url} - ${new Date().toISOString()}`);
 next();
};

app.use(logger);

Die Reihenfolge ist wichtig: Middleware wird in der Reihenfolge ausgeführt, in der sie definiert ist.

app.use((err, req, res, next) => {
 console.error(err.stack);
 res.status(500).json({ error: 'Something broke!' });
});

Routing und RESTful APIs

Express-Routing bildet HTTP-Methoden und Pfade zu Handler-Funktionen ab. Eine saubere Routing-Struktur verbessert die Wartbarkeit und Skalierbarkeit.

Grundlegende Routings

app.get('/api/items', (req, res) => {
 // return list of items
});

app.post('/api/items', (req, res) => {
 // create new item
});

app.put('/api/items/:id', (req, res) => {
 const { id } = req.params;
 // update item with given id
});

app.delete('/api/items/:id', (req, res) => {
 // delete item
});

Verwendung von Express Router für Modularität

Für größere Anwendungen teilen Sie Routen in separate Dateien mit und erstellen Sie einen Ordner und eine Datei :

const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
 res.json([{ id: 1, name: 'Sample Item' }]);
});

router.post('/', (req, res) => {
 // create logic
});

module.exports = router;

Dann in :

const itemsRouter = require('./routes/items');
app.use('/api/items', itemsRouter);

Dieser Ansatz hält Ihren Einstiegspunkt sauber und Routen logisch gruppiert.

Verbindung zu einer Datenbank

Die meisten Backends müssen Daten persistent halten. Populäre NoSQL- und SQL-Datenbanken integrieren sich gut in Node.js.

MongoDB mit Mongoose

Installieren Sie Mongoose, ein ODM für MongoDB:

npm install mongoose

Verbinden Sie sich in Ihrer Serverdatei:

const mongoose = require('mongoose');

mongoose.connect(process.env.DB_CONNECTION_STRING)
 .then(() => console.log('Connected to MongoDB'))
 .catch(err => console.error('Connection error', err));

Definieren Sie ein Schema und Modell (z. B. ):

const mongoose = require('mongoose');

const itemSchema = new mongoose.Schema({
 name: { type: String, required: true },
 price: Number,
 created_at: { type: Date, default: Date.now }
});

module.exports = mongoose.model('Item', itemSchema);

Verwenden Sie das Modell in Ihren Routen:

const Item = require('./models/Item');

app.post('/api/items', async (req, res) => {
 try {
 const item = new Item(req.body);
 await item.save();
 res.status(201).json(item);
 } catch (err) {
 res.status(400).json({ error: err.message });
 }
});

PostgreSQL mit node-postgres

Für relationale Datenbanken verwenden Sie das -Paket:

npm install pg

Erstellen Sie einen Pool und eine Abfrage:

const { Pool } = require('pg');
const pool = new Pool({
 connectionString: process.env.DATABASE_URL
});

app.get('/api/users', async (req, res) => {
 const result = await pool.query('SELECT * FROM users');
 res.json(result.rows);
});

Erwägen Sie, ein ORM wie Sequelize oder Knex für mehr abstrahierte Interaktionen zu verwenden.

Frontend-Backend-Integration

Sobald das Backend Daten über API-Endpunkte bedient, kann Ihr Frontend-Javascript sie mit der -API oder Bibliotheken wie Axios konsumieren.

Abrufen von Express

Angenommen, Ihre Express-API läuft auf . Ein clientseitiges Skript (z. B. React, Vue oder einfaches HTML) kann Daten abrufen:

fetch('http://localhost:3000/api/items')
 .then(response => {
 if (!response.ok) throw new Error('Network response error');
 return response.json();
 })
 .then(data => {
 console.log('Items:', data);
 // render data on page
 })
 .catch(err => console.error('Fetch error:', err));

Handhabung von CORS

Wenn sich Frontend und Backend auf verschiedenen Ports oder Domains befinden, müssen Sie Cross-Origin Resource Sharing (CORS) aktivieren.

npm install cors

Verwenden Sie es als Middleware:

const cors = require('cors');
app.use(cors()); // Allows all origins – restrict in production

Für die Produktion konfigurieren Sie bestimmte Ursprünge:

app.use(cors({
 origin: 'https://your-frontend-domain.com',
 methods: ['GET', 'POST']
}));

Best Practices für Sicherheit

Die Backend-Integration bringt Sicherheitsbedenken mit sich.

• Helmet: Setzt verschiedene HTTP-Header zum Schutz vor gängigen Angriffen.
• Ratenbegrenzung: Verwenden Sie , um Missbrauch zu verhindern.
• Input-Validierung: Sanieren und validieren Sie Benutzereingaben mithilfe von Bibliotheken wie oder .
• HTTPS: Dient immer über HTTPS in der Produktion.
• Authentizität: Verwenden Sie JSON Web Tokens (JWT) oder Session-basierte Authen mit .

Beispiel mit Helm:

const helmet = require('helmet');
app.use(helmet());

Beispiel mit Rate Limiting:

const rateLimit = require('express-rate-limit');

const limiter = rateLimit({
 windowMs: 15 * 60 * 1000, // 15 minutes
 max: 100
});
app.use('/api', limiter);

Fehlerbehandlung und Protokollierung

Produktionsanwendungen benötigen eine robuste Fehlerbehandlung. Erstellen Sie eine zentralisierte Fehlerbehandlungs-Middleware, die Fehler protokolliert und konsistente Antworten zurückgibt.

// Custom error handler
const errorHandler = (err, req, res, next) => {
 console.error('Error:', err.message);
 const statusCode = err.statusCode || 500;
 res.status(statusCode).json({
 error: err.message,
 stack: process.env.NODE_ENV === 'development' ? err.stack : undefined
 });
};

app.use(errorHandler);

Verwenden Sie zum Loggen in der Entwicklung und einen strukturierteren Logger wie in der Produktion:

npm install morgan winston

const morgan = require('morgan');
app.use(morgan('dev'));

Testen der Integration

Testen Sie Tests, um zu überprüfen, ob sich Ihr Backend wie erwartet verhält. Beliebte Test-Frameworks sind Jest und Mocha. Verwenden Sie für HTTP-Integrationstests supertest.

Beispiel mit Jest und Supertest

Dev-Abhängigkeiten installieren:

npm install -D jest supertest

Erstellen Sie eine Testdatei :

const request = require('supertest');
const app = require('./index'); // export app from index.js

describe('GET /api/items', () => {
 it('responds with JSON array', async () => {
 const res = await request(app)
 .get('/api/items')
 .expect('Content-Type', /json/)
 .expect(200);
 expect(Array.isArray(res.body)).toBe(true);
 });
});

Hinweis: Trennen Sie die App-Definition vom Server-Hören, um Port-Konflikte während der Tests zu vermeiden.Exportieren Sie die App und hören Sie nur, wenn die Datei direkt ausgeführt wird:

if (require.main === module) {
 app.listen(PORT, () => {
 console.log(`Server running on port ${PORT}`);
 });
}
module.exports = app;

Einsatzüberlegungen

Wenn Sie Ihr Node.js+Express-Backend bereitstellen, befolgen Sie diese Richtlinien:

• Verwenden Sie einen Prozessmanager wie PM2, um die Anwendung am Leben zu erhalten und das Clustering zu bewältigen.
• Set-Umgebungsvariablen auf der Hosting-Plattform (z.B. Heroku, DigitalOcean, AWS Elastic Beanstalk).
• Ermöglichen Sie das Protokollieren und Überwachen mit Diensten wie Logtail oder Datadog.
• Verwenden Sie einen Reverse Proxy (Nginx, Caddy) für SSL-Terminierung, Caching und Sicherheits-Header.

Ein gemeinsames Bereitstellungsmuster besteht darin, das Backend und Frontend als separate Projekte zu halten und über API über HTTPS zu kommunizieren. Alternativ können Sie die Frontend-Build-Dateien über Express mit [[FLT: 59]] bedienen und alle Catch-Routes verwalten, um das clientseitige Routing zu unterstützen (z. B. React Router).

Leistungsoptimierung

Node.js ist Single-Threaded, aber Sie können mit den richtigen Strategien immer noch einen hohen Durchsatz erreichen:

• Verwende async/await für alle E/A-Operationen, um zu vermeiden, dass die Ereignisschleife blockiert wird.
• Komprimieren Sie Antworten mit Middleware.
• Cache-Häufige Antworten mit In-Memory-Stores wie Redis.
• Cluster die Anwendung über mehrere CPU-Kerne mit dem eingebauten Modul oder PM2-Cluster-Modus.

Beispiel mit Kompression:

const compression = require('compression');
app.use(compression());

Echtzeit-Kommunikation mit WebSockets

Express integriert sich reibungslos in , um bidirektionale, ereignisgesteuerte Kommunikation zu ermöglichen.

npm install socket.io

Erstellen Sie den Server mit HTTP- und WebSocket-Unterstützung:

const http = require('http');
const socketIo = require('socket.io');

const server = http.createServer(app);
const io = socketIo(server, { cors: { origin: '*' } });

io.on('connection', (socket) => {
 console.log('New client connected');
 socket.on('disconnect', () => console.log('Client disconnected'));
});

server.listen(PORT, () => console.log(`Server with WebSocket on port ${PORT}`));

Das Frontend kann sich mit diesem WebSocket-Server verbinden und Ereignisse mit der Bibliothek emittieren/hören.

Full-Stack Frameworks und Patterns

Neben der grundlegenden Integration übernehmen viele Teams Frameworks, die Node.js, Express und ein Frontend-Framework zu einem zusammenhängenden Stack kombinieren. Am häufigsten ist der MERN Stack (MongoDB, Express, React, Node.js).

Mit diesen Stacks können Entwickler vollständige Anwendungen von der Datenbank bis zur Benutzeroberfläche erstellen, oft mit gemeinsam genutzten Modellen und Typen. Beispielsweise können Sie Mongoose-Schemata im Backend definieren und die gleiche Validierungslogik im Frontend nach der Konvertierung in eine Formularbibliothek wiederverwenden.

Schlussfolgerung

Bei der Integration von JavaScript mit Node.js und Express geht es nicht nur darum, auf beiden Seiten ähnlich aussehenden Code auszuführen – es geht darum, die volle Leistungsfähigkeit des JavaScript-Ökosystems zu nutzen, um zusammenhängende, wartbare und leistungsstarke Webanwendungen zu erstellen. Von der Grundeinstellung bis hin zu fortschrittlichen Mustern wie Middleware, Datenbankintegration, Authentifizierung und Echtzeitfunktionen bietet Express die Flexibilität, die erforderlich ist, um sich an verschiedene Projektanforderungen anzupassen.

Durch die Beherrschung dieser Techniken kann man die Impedanz-Unstimmigkeit zwischen Backend und Frontend beseitigen, Entwicklungszyklen beschleunigen und skalierbare Anwendungen bereitstellen. Jetzt ist es an der Zeit, die Theorie in die Praxis umzusetzen: ein neues Projekt starten, mit Middleware experimentieren, eine Datenbank verbinden und die Integration zum Leben erwecken.