Node.js Server Static File Serving Guide: Menyelesaikan HTML Plain Text Rendering and Sumber Loading Issues

Artikel ini bertujuan untuk menyelesaikan masalah di mana pelayan Node.js menjadikan fail HTML sebagai teks biasa dan menyebabkan sumber statik seperti CSS dan JavaScript gagal memuat dengan betul. Inti adalah bahawa pelayan gagal menetapkan tajuk tindak balas jenis kandungan yang betul mengikut laluan permintaan dan jenis fail, dan gagal mengarahkan sumber yang berbeza. Kami akan mengoptimumkan logik pelayan untuk memastikan semua jenis fail statik boleh dihuraikan dengan betul dan diberikan oleh pelayar.

Memahami mekanisme hidangan statik pelayan pelayan node.js

Apabila membina pelayan web dengan node.js, masalah biasa ialah penyemak imbas memaparkan fail HTML sebagai teks biasa, atau gaya halaman (CSS) dan interaksi (JavaScript) gagal berkuatkuasa. Ini biasanya disebabkan oleh pelayan yang gagal menetapkan jenis kandungan dalam tajuk tindak balas HTTP apabila memberi respons kepada permintaan klien, atau gagal menyediakan fail statik yang sepadan berdasarkan laluan URL yang diminta.

Terdapat beberapa isu utama dalam kod server.js asal:

1. Konflik Penetapan Jenis Kandungan : Di Res.Writead, percubaan dibuat untuk menetapkan beberapa tajuk jenis kandungan ('jenis kandungan': 'teks/html', 'jenis kandungan': 'teks/css', 'jenis kandungan': 'aplikasi/javascript') untuk tindak balas yang sama. Dalam tajuk tindak balas HTTP, kunci yang sama biasanya hanya dibenarkan muncul sekali, dan yang terakhir akan menimpa yang sebelumnya. Ini bermakna jenis kandungan akhir mungkin bukan teks/html yang diharapkan, menyebabkan penyemak imbas gagal menghuraikan HTML dengan betul.
2. Permintaan sumber statik tidak dikendalikan : kod asal hanya membaca dan menghantar kandungan index.html. Apabila pelayar parses index.html, ia akan mendapati gaya/gaya.css dan skrip/main.js dirujuk. Pelayar akan memulakan permintaan ke pelayan sekali lagi, seperti meminta /styles/style.css dan /scripts/main.js. Walau bagaimanapun, pelayan asal tidak memproses permintaan untuk laluan khusus ini, jadi penyemak imbas tidak dapat memperoleh fail CSS dan JavaScript, menyebabkan halaman dipaparkan secara tidak normal.

Untuk menyelesaikan masalah ini, pelayan Node.js perlu dapat:

• Menurut laluan URL yang diminta oleh pelanggan, kenal pasti jenis fail yang diminta (HTML, CSS, JS atau lain -lain).
• Tetapkan tajuk tindak balas jenis kandungan yang betul untuk setiap jenis fail.
• Cecair membaca dan hantar kandungan fail.

Mengoptimumkan logik perkhidmatan fail statik pelayan

Untuk memastikan penyemak imbas boleh menjadikan HTML dengan betul dan memuatkan semua sumber statik, kita perlu refactor server.js supaya ia dapat menyajikan fail yang berbeza berdasarkan url yang diminta dan menetapkan jenis kandungan yang sepadan.

Kami akan memperkenalkan peningkatan berikut:

1. Path Parsing : Gunakan modul laluan untuk membina laluan fail untuk memastikan keserasian merentasi sistem operasi.
2. Permintaan Routing : Tentukan fail mana yang diminta oleh klien berdasarkan req.url (laluan URL yang diminta).
3. Streaming : Gunakan Fs.CreateReadStream untuk menstrim kandungan fail dan paip ke objek tindak balas. Ini sangat cekap untuk fail besar dan dapat mengurangkan penggunaan memori.
4. Tetapkan kandungan-jenis dengan betul : Tetapkan jenis mime yang sepadan untuk setiap jenis fail (HTML, CSS, JavaScript).

Berikut adalah kod server.js yang dioptimumkan:

 const http = memerlukan ('http');
const fs = memerlukan ('fs');
const Path = memerlukan ('jalan');

/**
 * Beban dan aliran fail ke klien * @param {string} filePath - jalan mutlak ke fail * @param {string} mimetype - jenis mime (jenis kandungan) fail
 * @param {http.serverResponse} res - objek respons http */
const loadAndStream = (filePath, mimetype, res) => {
    // Periksa sama ada fail ada fs.Access (filePath, fs.constants.f_ok, (err) => {
        jika (err) {
            // Fail tidak wujud, kembali 404
            res.writeHead (404, {'content-type': 'text/plain'});
            res.end ('404 tidak dijumpai');
            kembali;
        }

        // Buat aliran bacaan fail const fileStream = fs.createReadStream (filePath, "UTF-8");
        // Tetapkan tajuk tindak balas, termasuk kod status 200 dan jenis kandungan yang betul
        res.writead (200, {"kandungan-jenis": mimetype});
        // Paip aliran fail ke aliran respons HTTP filestream.pipe (res);

        // pengendalian ralat untuk mengelakkan kemalangan pelayan kerana masalah semasa fail bacaan fail filestream.on ('error', (streamerr) => {
            console.error (`Fail membaca ralat $ {filePath}:`, streamerr);
            res.writeHead (500, {'content-type': 'text/plain'});
            res.end ('500 ralat pelayan dalaman');
        });
    });
};

http.CreateServer (fungsi (req, res) {
    // Laluan berdasarkan laluan URL yang diminta jika (req.url === '/') {
        // Semasa meminta laluan akar, sediakan index.html
        const filePath = path.join (__ dirname, 'index.html');
        LoadAndStream (filePath, 'teks/html', res);
    } else if (req.url === '/styles/style.css') {
        // Semasa meminta fail CSS, sediakan gaya.css
        const filePath = path.join (__ dirname, 'styles', 'style.css');
        LoadAndStream (filePath, 'teks/css', res);
    } else if (req.url === '/scripts/main.js') {
        // Semasa meminta fail javascript, sediakan main.js
        const filePath = path.join (__ dirname, 'scripts', 'main.js');
        // Nota: Jenis MIME fail JavaScript mestilah 'Aplikasi/JavaScript'
        LOADAndStream (FilePath, 'Aplikasi/JavaScript', res);
    } else {
        // Mengendalikan permintaan lain yang tidak dapat ditandingi dan kembali 404
        res.writeHead (404, {'content-type': 'text/plain'});
        res.end ('404 tidak dijumpai');
    }
}). Dengar (7800, () => {
    Console.log ('Pelayan berjalan di http: // localhost: 7800/');
});

Analisis kod dan langkah berjaga -jaga

1. Penggunaan Modul Laluan :

   • path.join (__ dirname, 'index.html'): __dirName adalah direktori di mana skrip sedang dilaksanakan. path.join akan dengan bijak berselang -seli laluan dan menjana pemisah laluan yang betul tanpa mengira sama ada sistem pengendalian adalah Windows atau Linux, meningkatkan mudah alih kod.

2. Fungsi Pembantu Loadandstream :

   • Fungsi ini merangkumi logik bacaan dan tindak balas fail, menjadikannya lebih boleh diguna semula.
   • fs.Access (filePath, fs.constants.f_ok, ...): Periksa sama ada fail itu wujud sebelum cuba membacanya. Ini adalah amalan yang baik untuk mengelakkan membuang ralat secara langsung jika fail tidak wujud, dan sebaliknya mengembalikan respons 404 yang mesra.
   • Fs.CreateReadStream (FilePath, "UTF-8"): Buat aliran yang boleh dibaca dan baca fail dalam pengekodan UTF-8. Untuk fail teks (HTML, CSS, JS), adalah penting untuk menentukan pengekodan.
   • Res.WriteHead (200, {"Kandungan-Jenis": Mimetype}): Tetapkan kod status HTTP yang betul (200 menunjukkan kejayaan) dan jenis MIME.
     • Teks/HTML digunakan untuk fail HTML.
     • Teks/CSS digunakan untuk fail CSS.
     • Permohonan/JavaScript untuk fail JavaScript (salah tulis sebagai aplikasi/json dalam jawapan asal, diperbetulkan).
   • filestream.pipe (res): Ini adalah kuasa aliran Node.js. Ia mengarahkan data dari aliran bacaan fail ke aliran respons HTTP tanpa memuatkan keseluruhan kandungan fail ke dalam memori, meningkatkan kecekapan dan prestasi.
   • Pengendalian ralat : Menambah pengendalian ralat untuk Fs.Access dan FileStream.on ('Ralat') dalam LoadandStream untuk memastikan bahawa apabila fail tidak wujud atau ralat berlaku semasa membaca, pelayan boleh mengembalikan kod ralat HTTP yang sesuai (seperti 404 atau 500) dan bukannya terhempas.

3. Permintaan Routing :

   • Melalui pernyataan bersyarat seperti jika (req.url === '/'), lain jika (req.url === '/styles/style.css'), pelayan boleh menyediakan fail yang berbeza mengikut URL yang diminta oleh klien.
   • Blok lain digunakan untuk mengendalikan semua permintaan yang tidak dipadankan secara eksplisit, mengembalikan 404 tidak dijumpai, yang merupakan tingkah laku standard untuk pelayan web.

Meringkaskan

Dengan pengoptimuman di atas, pelayan Node.js kami kini dapat:

• Menurut laluan URL yang diminta, fail statik seperti index.html, style.css dan main.js dikenal pasti dengan tepat dan disajikan.
• Tetapkan tajuk tindak balas jenis kandungan yang betul untuk setiap jenis fail untuk memastikan penyemak imbas dapat menghuraikan dan menjadikan kandungan dengan cara yang betul.
• Gunakan mekanisme streaming untuk mengendalikan pemindahan fail dengan cekap.
• Mempunyai keupayaan pengendalian ralat asas, seperti mengembalikan tindak balas 404.

Corak ini adalah asas untuk membina aplikasi web yang lebih kompleks. Untuk persekitaran pengeluaran atau senario yang perlu memproses sejumlah besar fail statik, kerangka web seperti Express.js biasanya digunakan. Mereka menyediakan fungsi penghalaan yang lebih kuat, sokongan middleware, dan kaedah hidangan statik yang lebih mudah (seperti Express.Static ()), dengan itu memudahkan pembangunan. Memahami prinsip -prinsip asas membantu anda memanfaatkan kerangka kerja yang lebih baik.

Atas ialah kandungan terperinci Node.js Server Static File Serving Guide: Menyelesaikan HTML Plain Text Rendering and Sumber Loading Issues. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!