Comment définir l'image d'arrière-plan dans nodejs-Questions et réponses frontales-php.cn

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

WBOY

Libérer： 2023-05-23 21:47:36

original

772 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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!');
});

Copier après la connexion

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

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>

Copier après la connexion

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!