nodejs ne peut pas restituer le CSS-Questions et réponses frontales-php.cn

nodejs ne peut pas restituer le CSS

WBOY

Libérer： 2023-05-25 13:29:37

original

562 Les gens l'ont consulté

Lors du développement d'applications Web, nous utilisons généralement HTML, CSS et JavaScript pour créer des pages. Pour les développeurs Node.js, il est courant de rencontrer un échec de rendu CSS lors de l'utilisation de Node.js pour rendre des pages.

Dans Node.js, nous pouvons utiliser certains moteurs de modèles tels que EJS, Handles ou Pug pour rendre les pages HTML. De manière générale, nous référencerons les fichiers CSS dans les fichiers HTML, mais lorsque nous utilisons Node.js pour restituer la page côté serveur, il arrive parfois que les fichiers CSS ne soient pas référencés correctement.

Ce problème est généralement dû à la politique de sécurité du navigateur, selon laquelle le navigateur n'autorise pas le chargement de fichiers CSS à partir de différentes sources. Examinons quelques solutions ci-dessous.

Utilisation d'un middleware de fichiers statiques

Lorsque nous utilisons Node.js pour afficher la page, nous devons utiliser un middleware de fichiers statiques pour permettre au serveur de charger correctement les fichiers statiques. Express.js est un framework Node.js très couramment utilisé. Il est livré avec un middleware de service de fichiers statiques express.static. express.static。

下面是一个使用Express.js加载静态文件的示例:

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

app.use(express.static('public'));

Copier après la connexion

在这个例子中，我们在public目录下存放我们的静态文件。在使用express.static后，浏览器能够正确地加载我们的静态文件，包括CSS文件。

修改CSS文件路径

在使用Node.js渲染页面时，我们可能会使用一些路由框架来处理路由。如果我们在路由器中使用了/根路由，那么浏览器可能会出现加载不出CSS文件的情况。

这是由于浏览器会将/解析为服务器根路径，而不是当前页面路径。为了解决这个问题，我们可以使用相对路径来引用CSS文件，或者在路由路径中使用一个相对路径。

下面是一个示例代码，它使用了相对路径来引用CSS文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node.js渲染不出CSS</title>
    <link rel="stylesheet" href="./styles.css" />
</head>
<body>
    <h1>Node.js渲染不出CSS</h1>
</body>
</html>

Copier après la connexion

在这个例子中，我们使用了./来引用同级目录下的styles.css文件。如果我们的CSS文件在上级目录中，我们可以使用../

Voici un exemple de chargement de fichiers statiques à l'aide d'Express.js :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node.js渲染不出CSS</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" />
</head>
<body>
    <div class="jumbotron">
        <h1>Node.js渲染不出CSS</h1>
        <p>解决起来也很简单哦！</p>
    </div>
</body>
</html>

Copier après la connexion

Dans cet exemple, nous stockons nos fichiers statiques dans le répertoire public. Après avoir utilisé express.static, le navigateur peut charger correctement nos fichiers statiques, y compris les fichiers CSS.

Lors de l'utilisation de Node.js pour afficher une page, nous pouvons utiliser un cadre de routage pour gérer le routage. Si nous utilisons la route racine / dans le routeur, le navigateur risque de ne pas pouvoir charger le fichier CSS.

En effet, le navigateur résoudra / comme chemin racine du serveur au lieu du chemin de la page actuelle. Pour résoudre ce problème, nous pouvons utiliser des chemins relatifs pour référencer les fichiers CSS, ou utiliser un chemin relatif dans le chemin de routage.

Ce qui suit est un exemple de code qui utilise des chemins relatifs pour référencer des fichiers CSS :

Dans cet exemple, nous utilisons ./ pour référencer les styles dans le même répertoire. > fichier. Si notre fichier CSS se trouve dans le répertoire de niveau supérieur, nous pouvons utiliser <code>../ pour référencer le fichier.

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!