Comment utiliser Nodejs pour créer un serveur permettant d'accéder à des fichiers de ressources statiques tels que HTML, CSS et JS-js tutoriel-php.cn

Comment utiliser Nodejs pour créer un serveur permettant d'accéder à des fichiers de ressources statiques tels que HTML, CSS et JS

不言

Libérer： 2018-06-12 14:08:26

original

3904 Les gens l'ont consulté

Cet article présente principalement les connaissances pertinentes sur l'utilisation de Nodejs pour créer un serveur permettant d'accéder aux fichiers de ressources statiques tels que HTML, CSS et JS. A une très bonne valeur de référence. Jetons un coup d'œil avec l'éditeur ci-dessous

Afin de tester le fonctionnement d'un magasin à proximité, vous devez configurer le serveur pour les tests. J'avais initialement prévu d'utiliser Apache, mais j'ai ensuite pensé que je faisais du travail front-end. Je n'avais pas utilisé Nodejs depuis longtemps, alors pourquoi ne pas utiliser les connaissances que j'ai acquises pour le configurer moi-même ?

La première étape, comme dit le proverbe, si un travailleur veut bien faire son travail, il doit d'abord affûter ses outils. Puisque vous souhaitez utiliser node+express pour configurer le serveur, si vous ne l'avez pas sur votre ordinateur, vous devez naturellement d'abord installer ces deux gros trésors.

1. Installer le nœud. Allez simplement sur le site officiel de Node pour le télécharger et l'installer, passez simplement à l'étape suivante et vous avez terminé.

2.npm initialise le projet. Ouvrez le terminal et entrez npm init -y. Remarque : Si vous ne saisissez pas -y, vous devez écrire vous-même certaines configurations. Si -y est saisi, un fichier package.json sera directement généré par défaut.

3. Installez Express. Saisissez npm i S express dans le terminal et appuyez sur Entrée

La deuxième étape consiste à écrire le fichier de configuration Express. Créez un nouveau fichier app.js (le nom du fichier peut être arbitraire, mais n'utilisez pas de mots-clés)

var express = require(&#39;express&#39;);
var path = require(&#39;path&#39;);
var app = express();

[color=#ff0000]app.use(express.static(path.join(__dirname, &#39;public&#39;)));[/color]

app.listen(4444, function() {
 console.log(&#39;App listening at port 8080;&#39;);
});

Copier après la connexion

La partie la plus importante est app.use(express.static(path.join(__dirname, 'public'))) , cette ligne de code consiste à ajouter un middleware dans Express, à définir le chemin de la ressource statique sur public et à placer tous les fichiers HTML, CSS, JS et autres sous public

La troisième étape est en public Ajoutez une page de test au dossier. Ce que j'écris ici est une page nommée changeColor.html. Lorsqu'il est affiché sur le téléphone mobile, l'écran du téléphone mobile change horizontalement et verticalement et le corps affiche différentes couleurs d'arrière-plan.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>testExpress</title>
 <style type="text/css">
 body{background-color: yellow;}
 @media screen and (orientation:landscape){
  body{background-color: orange;}
 }
 </style>
</head>
<body>
</body>
</html>

Copier après la connexion

La quatrième étape, après l'avoir ajouté, démarrez le service.

J'utilise sublime ici. Appuyez sur deux ctrl+r. Si la console affiche App listening sur le port 4444 ;, cela signifie que le service a démarré avec succès. Ouvrez le navigateur et saisissez : http://localhost/4444/changeColor.html

dans la barre d'adresse pour afficher la page Web de test. Si localhost est remplacé par l'adresse IP de la machine locale, l'adresse remplacée peut être affichée sur le téléphone mobile.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Code JS et CSS pour implémenter des effets de fond dégradé

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!