Nodejs membina pelayan sumber statik-Soal Jawab bahagian hadapan-php.cn

Rumah

hujung hadapan web

Soal Jawab bahagian hadapan

Nodejs membina pelayan sumber statik

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 12, 2023 pm 12:31 PM

Dengan perkembangan Internet, pembangunan Web telah menjadi industri yang sangat popular di seluruh dunia Bagi pembangun, untuk membangunkan dan menerbitkan kod dengan cepat dan berkesan, kami memerlukan pelayan sumber statik untuk membantu kami Mengurus dan memproses sumber statik. , terutamanya dalam model pembangunan di mana hujung depan dan belakang dipisahkan, digunakan dengan lebih kerap Node.js telah menjadi bahasa pembangunan yang sangat popular sejak dikeluarkan, dan modul httpnya sendiri amat sesuai untuk membina sumber statik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Node.js untuk membina pelayan sumber statik ringan.

1. Pasang Node

Mula-mula kita perlu memasang Node.js, iaitu bahasa pengaturcaraan bahagian pelayan berdasarkan JavaScript dan boleh dimuat turun dan dipasang di tapak web rasmi.

2 Mulakan projek

Kami perlu mencipta folder secara setempat dan memulakan projek Node untuknya.

Masukkan arahan berikut dalam baris arahan:

mkdir node-static-server
cd node-static-server
npm init

Selepas memasukkan arahan di atas, kami akan digesa untuk membina parameter permulaan projek ini Anda juga boleh menekan Enter untuk menggunakan lalai nilai.

Buat fail bernama index.html dalam projek dan tambahkan teg html ringkas di dalamnya, seperti yang ditunjukkan di bawah:

<!DOCTYPE html>
<html>
<head></head>
<body>
  <h1 id="Hello-World">Hello, World!</h1>
</body>
</html>

3 Cipta pelayan

dalam Cipta a fail bernama server.js dalam projek dan gunakan modul http terbina dalam Node.js untuk mencipta pelayan web Kodnya adalah seperti berikut:

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

const server = http.createServer((req, res) => {
  // 处理首页请求
  if (req.url === '/') {
    fs.readFile(path.join(__dirname, 'index.html'), (err, data) => {
      if (err) {
        res.writeHead(500);
        return res.end('Error loading index.html');
      }

      res.writeHead(200);
      res.end(data);
    });
  } else {
    // 处理其他静态文件请求
    const filePath = path.join(__dirname, req.url);
    fs.readFile(filePath, (err, data) => {
      if (err) {
        res.writeHead(404);
        return res.end('404 not found');
      }

      res.writeHead(200);
      res.end(data);
    });
  }
});

const port = process.env.PORT || 3000;
server.listen(port, () => console.log(`Server running at http://localhost:${port}`));

4. Jalankan pelayan

. dalam arahan Masukkan arahan berikut dalam baris untuk memulakan pelayan:

node server.js

Buka http://localhost:3000 dalam penyemak imbas, dan anda dapat melihat bahawa pelayan sumber statik kami sedang berjalan.

Jika semuanya baik-baik saja, apabila kami melawati http://localhost:3000/ dalam penyemak imbas, ia akan memaparkan kandungan yang kami tulis dalam index.html.

5. Mengendalikan permintaan fail statik yang berbeza

Selain respons halaman utama, kami juga perlu mengendalikan permintaan untuk fail statik lain, seperti CSS, JS dan fail imej, dll. Ini boleh dilakukan dengan Tambah direktori sumber statik yang sepadan untuk meminta pelbagai jenis fail statik. Di sini, kami mencipta direktori bernama awam untuk menyimpan fail statik Kod berikut akan memetakan kandungan direktori ini ke direktori akar pelayan:

const server = http.createServer((req, res) => {
  if (req.url === '/') {
    // 处理首页请求省略
  } else {
    // 处理其他静态文件请求
    const filePath = path.join(__dirname, 'public', req.url);
    fs.readFile(filePath, (err, data) => {
      if (err) {
        res.writeHead(404);
        return res.end('404 not found');
      }

      if (req.url.endsWith('.css')) {
        res.writeHead(200, { 'content-type': 'text/css' });
      }

      if (req.url.endsWith('.js')) {
        res.writeHead(200, { 'content-type': 'application/javascript' });
      }

      if (req.url.endsWith('.png')) {
        res.writeHead(200, { 'content-type': 'image/png' });
      }

      res.end(data);
    });
  }
});

6 dan mudah untuk membina pelayan sumber statik menggunakan Node.js Dengan menggunakan modul http terbina dalam, anda boleh membuat pelayan asas dengan mudah untuk mengendalikan permintaan untuk sumber statik, seperti HTML, CSS, JS dan imej, dsb. Dalam proses pembangunan akan datang, kita boleh memilih rangka kerja pelayan yang sesuai mengikut keperluan kita sendiri untuk mencapai pelayan yang lebih cekap dan berkuasa.

Atas ialah kandungan terperinci Nodejs membina pelayan sumber statik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Integrasi HTML dan React: Panduan PraktikalApr 21, 2025 am 12:16 AM

HTML dan React boleh diintegrasikan dengan lancar melalui JSX untuk membina antara muka pengguna yang cekap. 1) Benamkan elemen HTML menggunakan JSX, 2) mengoptimumkan prestasi rendering menggunakan DOM maya, 3) mengurus dan menjadikan struktur HTML melalui komponen. Kaedah integrasi ini bukan sahaja intuitif, tetapi juga meningkatkan prestasi aplikasi.

React dan HTML: Memberi data dan acara pengendalianApr 20, 2025 am 12:21 AM

React dengan cekap menjadikan data melalui negeri dan prop, dan mengendalikan peristiwa pengguna melalui sistem peristiwa sintesis. 1) Gunakan UseState untuk menguruskan keadaan, seperti contoh kaunter. 2) Pemprosesan acara dilaksanakan dengan menambahkan fungsi dalam JSX, seperti klik butang. 3) Atribut utama diperlukan untuk membuat senarai, seperti komponen todolist. 4) Untuk pemprosesan borang, useState dan E.PreventDefault (), seperti komponen bentuk.

Sambungan backend: bagaimana reaksi berinteraksi dengan pelayanApr 20, 2025 am 12:19 AM

React berinteraksi dengan pelayan melalui permintaan HTTP untuk mendapatkan, menghantar, mengemas kini dan memadam data. 1) Operasi Pengguna mencetuskan peristiwa, 2) Memulakan permintaan HTTP, 3) Respons Pelayan Proses, 4) Kemas kini Status Komponen dan Re-Render.

React: memberi tumpuan kepada antara muka pengguna (frontend)Apr 20, 2025 am 12:18 AM

React adalah perpustakaan JavaScript untuk membina antara muka pengguna yang meningkatkan kecekapan melalui pembangunan komponen dan DOM maya. 1. Komponen dan JSX: Gunakan sintaks JSX untuk menentukan komponen untuk meningkatkan intuitif dan kualiti kod. 2. 3. Pengurusan dan cangkuk negeri: cangkuk seperti useState dan useeffect memudahkan pengurusan negeri dan pengendalian kesan sampingan. 4. Contoh penggunaan: Dari bentuk asas kepada pengurusan negara global yang maju, gunakan Contextapi. 5. Kesilapan dan penyahpepijatan biasa: Elakkan masalah pengurusan dan komponen yang tidak betul, dan gunakan ReactDevTools untuk debug. 6. Pengoptimuman prestasi dan optimum

Peranan React: frontend atau backend? Menjelaskan perbezaanApr 20, 2025 am 12:15 AM

ReactIsafrontendLibrary, FocusedonBuildingUserInterfaces.itmanagesuistateandupdateseficientlyusingvirtualdom, andinteractswithBackendservicesviaapisfordatahandling, butdoesnotprocessoredataveLF.

Bertindak balas dalam HTML: Membina antara muka pengguna interaktifApr 20, 2025 am 12:05 AM

React boleh tertanam dalam HTML untuk meningkatkan atau menulis semula halaman HTML tradisional. 1) Langkah -langkah asas untuk menggunakan React termasuk menambah div akar dalam HTML dan menjadikan komponen React melalui reactDom.render (). 2) Aplikasi yang lebih maju termasuk menggunakan UseState untuk menguruskan negeri dan melaksanakan interaksi UI yang kompleks seperti kaunter dan senarai tugasan. 3) Pengoptimuman dan amalan terbaik termasuk segmentasi kod, pemuatan malas dan menggunakan React.Memo dan Usememo untuk meningkatkan prestasi. Melalui kaedah ini, pemaju boleh memanfaatkan kuasa bertindak balas untuk membina antara muka pengguna yang dinamik dan responsif.

React: asas untuk pembangunan frontend modenApr 19, 2025 am 12:23 AM

React adalah perpustakaan JavaScript untuk membina aplikasi front-end moden. 1. Ia menggunakan komponen dan maya DOM untuk mengoptimumkan prestasi. 2. Komponen menggunakan JSX untuk menentukan, menyatakan dan atribut untuk menguruskan data. 3. Cangkuk memudahkan pengurusan kitaran hidup. 4. Gunakan Contextapi untuk menguruskan status global. 5. Kesilapan biasa memerlukan kemas kini status debugging dan kitaran hayat. 6. Teknik pengoptimuman termasuk memoisasi, pemisahan kod dan menatal maya.

Masa Depan React: Trend dan Inovasi dalam Pembangunan WebApr 19, 2025 am 12:22 AM

Masa depan React akan memberi tumpuan kepada pembangunan komponen utama, pengoptimuman prestasi dan integrasi yang mendalam dengan susunan teknologi lain. 1) React akan memudahkan penciptaan dan pengurusan komponen dan mempromosikan perkembangan komponen utama. 2) Pengoptimuman prestasi akan menjadi tumpuan, terutamanya dalam aplikasi besar. 3) React akan disepadukan dengan teknologi seperti GraphQL dan TypeScript untuk meningkatkan pengalaman pembangunan.

See all articles