Bagaimana untuk Memautkan index.html, client.js dan server.js dalam Aplikasi Web?

Memautkan index.html, client.js dan server.js

Pengenalan

Apabila membina aplikasi web, menyambungkan HTML, JavaScript sisi klien dan kod sisi pelayan adalah penting. Artikel ini meneroka ralat yang dihadapi semasa memautkan komponen ini dan menyediakan penyelesaian untuk komunikasi yang berjaya antara mereka.

Masalah

Ralat berlaku semasa cuba menjalankan aplikasi Node.js dengan kod berikut:

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

// client.js
// JavaScript code

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

Analisis

Ralat mencadangkan ketidakpadanan antara sumber yang diminta dan respons yang dihantar oleh pelayan. Penyemak imbas meminta client.js tetapi sebaliknya menerima index.html, menyebabkan ralat sintaks.

Penyelesaian

1. Menggunakan Express Middleware

Pertimbangkan untuk menggunakan rangka kerja Express, yang memudahkan penyajian fail statik. Coretan kod berikut menunjukkan perkhidmatan client.js menggunakan 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. Mengendalikan Permintaan Sumber dalam Kod Pelayan

Sebagai alternatif, kendalikan permintaan sumber secara terus dalam kod pelayan:

// 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);

Dengan mengendalikan permintaan sumber dengan betul, pelayan boleh melayani client.js apabila diminta dan mengelakkan ralat.

Atas ialah kandungan terperinci Bagaimana untuk Memautkan index.html, client.js dan server.js dalam Aplikasi Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!