Comment lier index.html, client.js et server.js dans une application Web ?

Lien index.html, client.js et server.js

Introduction

Lors de la création d’une application Web, la connexion du code HTML, du code JavaScript côté client et du code côté serveur est cruciale. Cet article explore les erreurs rencontrées lors de la liaison de ces composants et propose des solutions pour une communication réussie entre eux.

Problème

Des erreurs se produisent lors de la tentative d'exécution d'une application Node.js avec ce qui suit code :

<!-- index.html -->
<!-- Script referencing client.js -->

// client.js
// JavaScript code

// server.js
// Server code
// Reading index.html contents

Analyse

Les erreurs suggèrent une inadéquation entre la ressource demandée et la réponse envoyée par le serveur. Le navigateur demande client.js mais reçoit index.html à la place, provoquant une erreur de syntaxe.

Solution

1. Utilisation d'Express Middleware

Envisagez d'utiliser le framework Express, qui simplifie la diffusion de fichiers statiques. L'extrait de code suivant illustre le service client.js à l'aide d'Express :

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

// Serve static files from the 'public' directory
app.use(express.static('public'));

// ... Server configuration and routing

2. Gestion des demandes de ressources dans le code du serveur

Vous pouvez également gérer les demandes de ressources directement dans le code du serveur :

// server.js

const http = require('http');
const fs = require('fs');

const server = http.createServer((req, res) => {
  if (req.url === '/client.js') {
    fs.readFile('client.js', (err, data) => {
      if (!err) {
        res.writeHead(200, { 'Content-Type': 'text/javascript' });
        res.end(data);
      } else {
        res.writeHead(404);
        res.end('File Not Found');
      }
    });
  } else if (req.url === '/index.html') {
    // Serve index.html using similar logic
  }
});

server.listen(8080);

En gérant correctement les demandes de ressources, le serveur peut servir client.js lorsque cela est demandé et éviter les erreurs.

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!