Maison > Article > interface Web > Comment définir l'image d'arrière-plan dans nodejs

Comment définir l'image d'arrière-plan dans nodejs

WBOYoriginal: 2023-05-23 21:47:36715parcourir

Node.js est un environnement d'exécution JavaScript côté serveur populaire, souvent utilisé pour écrire des applications Web efficaces. Bien que Node.js soit principalement utilisé pour le développement back-end, il peut également gérer certaines tâches de développement front-end, telles que l'ajout d'images d'arrière-plan aux éléments DOM.

Dans cet article, nous expliquerons comment définir une image d'arrière-plan à l'aide de Node.js et fournirons un exemple de code pour vous aider à démarrer avec.

Tout d'abord, vous devez installer Node.js. Vous pouvez télécharger et installer la dernière version depuis le site officiel de Node.js.

Une fois que vous avez installé Node.js, créez un nouveau dossier et ouvrez une fenêtre de terminal dans ce dossier.

Dans cette fenêtre de terminal, entrez la commande suivante pour initialiser un nouveau projet npm :

npm init

Cette commande vous demandera de saisir certaines informations sur le projet, telles que le nom du projet, la version numéro et description. Vous pouvez remplir les informations selon les invites.

Après avoir terminé cette étape, vous devez installer Express.js. Express.js est un framework de développement Web pour Node.js qui facilite la création d'applications Web.

Dans votre terminal, exécutez la commande suivante pour installer Express.js :

npm install express

Ensuite, créez un nouveau fichier JavaScript et nommez-le app.js . Ce fichier sera l'endroit où vous écrirez le code pour définir l'image d'arrière-plan.

Dans le fichier app.js, nous utiliserons le code suivant pour définir l'image de fond de la page :

const express = require('express');
const path = require('path');

const app = express();

app.use(express.static('public'));
app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, '/index.html'));
});

app.listen(3000, function () {
    console.log('App listening on port 3000!');
});

Dans ce code, nous créons un Web en utilisant Express. js et définissez le dossier public comme dossier statique, qui contient notre image d'arrière-plan.

Nous avons également mis en place une route pour que lorsque l'utilisateur accède au répertoire racine, un fichier HTML soit envoyé au client. Ce fichier HTML, nous allons le créer à l'étape suivante. Dans ce fichier HTML, nous définirons l'image d'arrière-plan dans la balise 6c04bd5ca3fcae76e30b72ad730ca86d

Ensuite, nous devons créer un fichier HTML appelé index.html. Dans ce fichier, nous définirons l'image d'arrière-plan. Voici le code pour un exemple simple :

<!DOCTYPE html>
<html>
    <head>
        <title>使用Node.js设置背景图片</title>
        <style>
            body {
                background-image: url("/background.jpg");
                background-size: cover;
            }
        </style>
    </head>
    <body>
        <h1>使用Node.js设置背景图片</h1>
    </body>
</html>

Dans ce code, nous définissons l'image d'arrière-plan sur background.jpg (dans le dossier public). Nous avons également ajouté quelques styles pour ajuster la taille de l'image d'arrière-plan et le titre de la page.

Maintenant que nous avons terminé toutes les étapes nécessaires, vous pouvez essayer d'ouvrir localhost:3000 dans le navigateur pour afficher l'image d'arrière-plan que vous avez définie.

Résumé

Dans cet article, nous avons appris comment définir une image d'arrière-plan à l'aide de Node.js. À l'aide du framework Express.js, nous avons créé une application Web et défini le dossier public comme dossier statique, qui contient notre image d'arrière-plan. Ensuite, nous utilisons HTML et CSS pour définir l'image d'arrière-plan.

Bien qu'il ne s'agisse que d'un exemple simple, il peut vous aider à commencer à configurer des images d'arrière-plan dans Node.js et à développer davantage vos compétences en développement Web.

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!

JavaScript node.js css html npm express public JS dom background

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：nodejs plusieurs requêtes maintiennent l'ordreArticle suivant：nodejs plusieurs requêtes maintiennent l'ordre

Articles Liés

Voir plus