Nodejs crée un site Web

Avec le développement continu de la technologie Web, Node.js est devenu l'un des langages de développement les plus utilisés par les gens. Node.js est un environnement d'exécution JavaScript basé sur le moteur Chrome V8, adapté à la création d'applications Web rapides et évolutives. Dans cet article, nous présenterons le processus de création d'un site Web à l'aide de Node.js.

1. Configuration de l'environnement

Avant de commencer, vous devez d'abord configurer l'environnement. Il est recommandé d'utiliser la version LTS de Node.js, de télécharger le package d'installation du système correspondant sur le site officiel (https://nodejs.org/en/) et de l'installer.

Une fois l'installation terminée, vous devez confirmer si les variables d'environnement de Node.js sont configurées avec succès. Ouvrez la fenêtre de ligne de commande et entrez node -v. Si le numéro de version apparaît, l'installation est réussie.

2. Créer un serveur HTTP

Node.js fournit le module http, grâce auquel vous pouvez créer un serveur Web. Parmi eux, la méthode createServer() crée un serveur HTTP et la méthode Listen() écoute le port et l'adresse IP spécifiés.

Le code est le suivant :

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello World!
');
});

server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

Le code ci-dessus crée un simple serveur HTTP qui écoute le port local 3000. Saisissez http://127.0.0.1:3000/ dans le navigateur pour accéder à la page sur le serveur. Le contenu de la page est Hello World !.

3. Routage des processus

Si vous envoyez simplement Hello World au client ! message, l'utilisation d'un serveur HTTP suffit. Cependant, dans le développement réel, vous rencontrerez des scénarios de réponse aux demandes plus complexes et devrez gérer le routage.

Dans cet exemple, supposons qu'il y ait deux pages : /home et /about. Lors de la demande d’accès à ces deux pages, un traitement différent est nécessaire. Par conséquent, le traitement du routage peut être ajouté au serveur HTTP.

Le code est le suivant :

const http = require('http');
const url = require('url');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    const uri = url.parse(req.url).pathname;
    if (uri === '/home') {
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/plain');
        res.end('Welcome to the homepage!
');
    } else if (uri === '/about') {
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/plain');
        res.end('About the website!
');
    } else {
        res.statusCode = 404;
        res.setHeader('Content-Type', 'text/plain');
        res.end('404 Not Found
');
    }
});

server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

Dans le code ci-dessus, le module d'URL intégré de Node.js est utilisé pour analyser l'adresse URL demandée en nom de chemin pour le traitement du routage. Lorsque le chemin demandé est /home, le serveur renvoie « Bienvenue sur la page d'accueil ! » ; lorsque le chemin demandé est /about, le serveur renvoie « À propos du site Web ! » lorsque le chemin demandé n'existe pas, le serveur renvoie 404 Not. Trouvé .

4. Utiliser le moteur de modèles

Dans le processus de développement réel, l'utilisation de moteurs de modèles peut considérablement améliorer l'efficacité du développement. Les moteurs de modèles couramment utilisés incluent ejs, handlebars, jade, etc. Dans cet exemple, le moteur de modèles ejs est utilisé pour le rendu des pages.

Tout d'abord, installez le module ejs via npm :

npm install ejs --save

Apportez des modifications au serveur HTTP et utilisez le moteur de modèle pour afficher la page HTML :

const http = require('http');
const url = require('url');
const ejs = require('ejs');
const fs = require('fs');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    const uri = url.parse(req.url).pathname;

    if (uri === '/home') {
        fs.readFile('./views/home.ejs', 'utf8', (err, data) => {
            if (err) {
                console.log(err);
                res.statusCode = 404;
                res.setHeader('Content-Type', 'text/plain');
                res.end('File not found!
');
            } else {
                res.statusCode = 200;
                res.setHeader('Content-Type', 'text/html');
                const template = ejs.compile(data);
                const html = template({title: 'Home Page', message: 'Welcome to the homepage!'});
                res.end(html);
            }
        });
    } else if (uri === '/about') {
        fs.readFile('./views/about.ejs', 'utf8', (err, data) => {
            if (err) {
                console.log(err);
                res.statusCode = 404;
                res.setHeader('Content-Type', 'text/plain');
                res.end('File not found!
');
            } else {
                res.statusCode = 200;
                res.setHeader('Content-Type', 'text/html');
                const template = ejs.compile(data);
                const html = template({title: 'About Page', message: 'About the website!'});
                res.end(html);
            }
        });
    } else {
        res.statusCode = 404;
        res.setHeader('Content-Type', 'text/plain');
        res.end('404 Not Found
');
    }
});

server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

Dans le code ci-dessus, le module fs est utilisé pour lire le fichier modèle, et le module ejs est utilisé pour restituer le fichier modèle. Renvoie la page HTML générée au client.

5. Utiliser des fichiers statiques

Dans le développement réel, des fichiers statiques sont généralement utilisés, tels que des images, des fichiers CSS, des fichiers JavaScript, etc. Node.js fournit un service de fichiers statiques qui peut être utilisé pour gérer les demandes de fichiers statiques.

Le code est le suivant :

const http = require('http');
const url = require('url');
const ejs = require('ejs');
const fs = require('fs');
const path = require('path');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    const uri = url.parse(req.url).pathname;
    const filename = path.join(process.cwd(), uri);

    fs.exists(filename, (exists) => {
        if (!exists) {
            res.statusCode = 404;
            res.setHeader('Content-Type', 'text/plain');
            res.end('404 Not Found
');
            return;
        }

        if (fs.statSync(filename).isDirectory()) {
            filename += '/index.html';
        }

        fs.readFile(filename, 'binary', (err, file) => {
            if (err) {
                res.statusCode = 500;
                res.setHeader('Content-Type', 'text/plain');
                res.end(err + '
');
                return;
            }

            res.statusCode = 200;
            const extname = path.extname(filename);
            res.setHeader('Content-Type', mimeTypes[extname] || 'text/plain');
            res.write(file, 'binary');
            res.end();
        });
    });
});

server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

Dans le code ci-dessus, le module fs est utilisé pour déterminer si le fichier demandé existe, le module path est utilisé pour traiter le chemin et mimeTypes est utilisé pour définir le type de fichier. Si le fichier demandé n'existe pas, 404 Not Found est renvoyé ; si la requête est un dossier, le fichier index.html du dossier est demandé par défaut si le fichier est lu avec succès, 200 est renvoyé et le Content-Type ; l'en-tête et la réponse sont définis en même temps.

Grâce aux opérations ci-dessus, nous avons réussi à créer un site Web à l'aide de Node.js et à implémenter un traitement de routage de base et des services de fichiers statiques. Grâce à des études et à une pratique plus approfondies, nous pouvons créer des sites Web plus complexes et implémenter davantage de fonctions, telles que des opérations de base de données, des agents de requête, etc.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!