Nodejs crée le chemin des ressources du site Web

WBOY
Libérer: 2023-05-18 10:38:07
original
600 Les gens l'ont consulté

Node.js est un langage de développement back-end qui peut être utilisé pour créer rapidement des applications Web efficaces et stables. Dans Node.js, créer des chemins de ressources pour un site Web est l'une des compétences qui doivent être maîtrisées. Cet article explique comment utiliser Node.js pour créer des chemins de ressources de sites Web.

1. Construire un serveur HTTP de base
Avant de commencer à créer notre chemin de ressources Node.js, nous devons d'abord créer un serveur HTTP de base. Les développeurs peuvent utiliser le module http intégré de Node.js pour construire ce serveur HTTP. Le code est le suivant :

const http = require('http');

const server = http.createServer((req, res) => {
  res.end('Hello World!');
});

server.listen(3000, () => {
  console.log('Server is listening on port 3000');
});
Copier après la connexion

Dans le code, nous créons un serveur HTTP via http.createServer() et pass res. La méthode end() renvoie le texte "Hello World!" Parmi eux, req est l'objet de requête et res est l'objet de réponse. De plus, nous écoutons également le port 3000 via la méthode server.listen() afin que le serveur puisse démarrer sur ce port.

Si vous souhaitez vérifier si le serveur HTTP a été configuré avec succès, vous pouvez saisir node app.js dans la ligne de commande (en supposant que votre fichier s'appelle app.js ), puis parcourez Entrez http://localhost:3000 dans le navigateur et vous pourrez voir « Hello World ! » affiché sur la page. node app.js(假设你的文件名为app.js),然后在浏览器中输入http://localhost:3000,便可以看到页面上显示了“Hello World!”。

二、配置静态资源路径
当我们搭建一个网站时,一般会包含很多静态资源,例如图片、CSS、JavaScript等,这些资源的路径也需要配置。在Node.js中,静态资源路径可以通过express框架来实现,代码如下:

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

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

app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});
Copier après la connexion

在代码中,我们首先导入了express框架,并通过app.use()方法来告诉express框架我们需要向用户提供静态资源。其中,public为静态资源的文件夹名字,也就是存放静态资源的本地路径。

当然,这个文件夹名字开发者可以根据自己的需求来修改,只需要将代码中的public修改为你自己定义的文件夹名字即可。在这个例子中,我们将静态资源存储在public文件夹中。

三、测试静态资源路径
搭建好静态资源路径后,我们可以在public文件夹中放置一些文件进行测试。例如,在public文件夹中放置一张图片myimage.jpg,然后在代码中使用它,代码如下:

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

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

app.get('/', function(req, res) {
  res.send(`
  <html>
    <head>
      <title>Node.js Resource Path Test</title>
    </head>
    <body>
      <h1>Welcome to the Node.js Resource Path Test</h1>
      <img src="images/myimage.jpg" alt="My Image">
    </body>
  </html>
  `);
});

app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});
Copier après la connexion

在代码中我们通过<img src="images/myimage.jpg" alt="My Image">

2. Configurer les chemins de ressources statiques

Lorsque nous construisons un site Web, il contient généralement de nombreuses ressources statiques, telles que des images, CSS, JavaScript, etc. Les chemins de ces ressources doivent également être configuré. Dans Node.js, les chemins de ressources statiques peuvent être implémentés via le framework express. Le code est le suivant :

rrreee

Dans le code, nous avons d'abord importé le framework express et indiqué express via app.use( ) méthode Framework dont nous avons besoin pour fournir des ressources statiques aux utilisateurs. Parmi eux, public est le nom du dossier des ressources statiques, qui est le chemin local où les ressources statiques sont stockées.

Bien sûr, les développeurs peuvent modifier ce nom de dossier en fonction de leurs propres besoins. Il leur suffit de remplacer le public dans le code par le nom de dossier que vous définissez. Dans cet exemple, nous stockons les ressources statiques dans le dossier public. #🎜🎜##🎜🎜#3. Testez le chemin des ressources statiques #🎜🎜#Après avoir configuré le chemin des ressources statiques, nous pouvons placer certains fichiers dans le dossier public pour les tester. Par exemple, placez une image myimage.jpg dans le dossier public, puis utilisez-la dans le code. Le code est le suivant : #🎜🎜#rrreee#🎜🎜#Dans le code nous passons <img src=. "images/ myimage.jpg" alt="My Image"> pour référencer l'image myimage.jpg Ce qui doit être noté ici, c'est parce que nous utilisons le framework express pour gérer nos chemins de ressources statiques, lorsque nous. référencer l'image dans le code Vous devez conserver le chemin du dossier public, c'est-à-dire utiliser le chemin relatif "images/myimage.jpg" pour référencer l'image. #🎜🎜##🎜🎜#Si vous souhaitez vérifier si l'image est référencée avec succès, vous pouvez visiter "http://localhost:3000/" dans le navigateur, et vous verrez que notre image "myimage.jpg" est affiché sur la page. #🎜🎜##🎜🎜# 4. Conclusion #🎜🎜# Grâce aux étapes ci-dessus, nous pouvons rapidement créer un site Web Node.js capable de fournir des services de ressources statiques. Dans le même temps, au cours de ce processus, j'ai également appris à utiliser le module http intégré de Node.js pour créer un serveur HTTP de base et à utiliser le framework express pour configurer les chemins de fichiers statiques. Enfin, nous avons également testé les étapes de configuration du chemin de ressource statique et cité une image pour vérifier si notre configuration a produit l'effet attendu. #🎜🎜#

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!

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!