如何在 Web 應用程式中連結 index.html、client.js 和 server.js？

鏈接index.html、client.js和server.js

簡介

構建Web 應用程式時，連接HTML、客戶端JavaScript 和伺服器端程式碼至關重要。本文探討了連結這些元件時遇到的錯誤，並提供了它們之間成功溝通的解決方案。

問題

嘗試使用以下指令執行 Node.js應用程式時發生錯誤下列code:

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

// client.js
// JavaScript code

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

分析

錯誤表示要求的資源與伺服器發送的回應之間不符。瀏覽器正在請求 client.js，但收到的是 index.html，導致語法錯誤。

解決方案

1.使用Express 中間件

考慮使用Express 框架，它簡化了靜態檔案的服務。以下程式碼片段示範了使用Express 服務client.js：

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

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

// ... Server configuration and routing

2.在伺服器程式碼中處理資源請求

或者，直接在伺服器程式碼中處理資源請求：

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

透過正確處理資源請求，伺服器可以在請求時為client.js提供服務並防止錯誤。

以上是如何在 Web 應用程式中連結 index.html、client.js 和 server.js？的詳細內容。更多資訊請關注PHP中文網其他相關文章！