Rumah  >  Artikel  >  hujung hadapan web  >  Nodejs membina tapak web

Nodejs membina tapak web

WBOY
WBOYasal
2023-05-11 22:18:351834semak imbas

Dengan pembangunan berterusan teknologi Web, Node.js telah menjadi salah satu bahasa pembangunan yang digunakan secara meluas. Node.js ialah persekitaran masa jalan JavaScript berdasarkan enjin Chrome V8, sesuai untuk membina aplikasi web yang pantas dan berskala. Dalam artikel ini, kami akan memperkenalkan proses membina tapak web menggunakan Node.js.

1. Persediaan persekitaran

Sebelum bermula, anda perlu menyediakan persekitaran terlebih dahulu. Adalah disyorkan untuk menggunakan versi LTS Node.js, muat turun pakej pemasangan untuk sistem yang sepadan dari tapak web rasmi (https://nodejs.org/en/), dan pasangkannya.

Selepas pemasangan selesai, anda perlu mengesahkan sama ada pembolehubah persekitaran Node.js berjaya dikonfigurasikan. Buka tetingkap baris arahan dan masukkan nod -v Jika nombor versi muncul, pemasangan berjaya.

2. Bina pelayan HTTP

Node.js menyediakan modul http, yang melaluinya anda boleh mencipta pelayan Web. Antaranya, kaedah createServer() mencipta pelayan HTTP, dan kaedah listen() mendengar port dan alamat IP yang ditentukan.

Kod adalah seperti berikut:

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello World!
');
});

server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

Kod di atas mencipta pelayan HTTP mudah yang mendengar port tempatan 3000. Masukkan http://127.0.0.1:3000/ dalam pelayar untuk mengakses halaman pada pelayan. Kandungan halaman adalah Hello World!.

3. Proses penghalaan

Jika anda hanya menghantar Hello World kepada pelanggan! mesej, maka menggunakan pelayan HTTP sudah memadai. Walau bagaimanapun, dalam pembangunan sebenar, anda akan menghadapi senario respons permintaan yang lebih kompleks dan perlu mengendalikan penghalaan.

Dalam contoh ini, andaikan terdapat dua halaman: /home dan /about. Apabila meminta akses kepada dua halaman ini, pengendalian yang berbeza diperlukan. Oleh itu, pemprosesan penghalaan boleh ditambah dalam pelayan HTTP.

Kod adalah seperti berikut:

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

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    const uri = url.parse(req.url).pathname;
    if (uri === '/home') {
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/plain');
        res.end('Welcome to the homepage!
');
    } else if (uri === '/about') {
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/plain');
        res.end('About the website!
');
    } else {
        res.statusCode = 404;
        res.setHeader('Content-Type', 'text/plain');
        res.end('404 Not Found
');
    }
});

server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

Dalam kod di atas, modul url terbina dalam Node.js digunakan untuk menghuraikan alamat url yang diminta kepada nama laluan untuk pemprosesan penghalaan. Apabila nama laluan yang diminta ialah /home, pelayan mengembalikan "Selamat datang ke halaman utama!"; apabila nama laluan yang diminta ialah /tentang, pelayan mengembalikan "Perihal tapak web!"; Dijumpai.

4. Gunakan enjin templat

Dalam proses pembangunan sebenar, menggunakan enjin templat boleh meningkatkan kecekapan pembangunan. Enjin templat yang biasa digunakan termasuk ejs, hendal, jed, dsb. Dalam contoh ini, enjin templat ejs digunakan untuk pemaparan halaman.

Mula-mula, pasang modul ejs melalui npm:

npm install ejs --save

Ubah suai dalam pelayan HTTP dan gunakan enjin templat untuk memaparkan halaman HTML:

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

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    const uri = url.parse(req.url).pathname;

    if (uri === '/home') {
        fs.readFile('./views/home.ejs', 'utf8', (err, data) => {
            if (err) {
                console.log(err);
                res.statusCode = 404;
                res.setHeader('Content-Type', 'text/plain');
                res.end('File not found!
');
            } else {
                res.statusCode = 200;
                res.setHeader('Content-Type', 'text/html');
                const template = ejs.compile(data);
                const html = template({title: 'Home Page', message: 'Welcome to the homepage!'});
                res.end(html);
            }
        });
    } else if (uri === '/about') {
        fs.readFile('./views/about.ejs', 'utf8', (err, data) => {
            if (err) {
                console.log(err);
                res.statusCode = 404;
                res.setHeader('Content-Type', 'text/plain');
                res.end('File not found!
');
            } else {
                res.statusCode = 200;
                res.setHeader('Content-Type', 'text/html');
                const template = ejs.compile(data);
                const html = template({title: 'About Page', message: 'About the website!'});
                res.end(html);
            }
        });
    } else {
        res.statusCode = 404;
        res.setHeader('Content-Type', 'text/plain');
        res.end('404 Not Found
');
    }
});

server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

Dalam kod di atas , modul fs digunakan Baca fail templat, gunakan modul ejs untuk memaparkan fail templat dan kembalikan halaman HTML yang dijana kepada klien.

5. Gunakan fail statik

Dalam pembangunan sebenar, fail statik biasanya digunakan, seperti imej, fail CSS, fail JavaScript, dsb. Node.js menyediakan perkhidmatan fail statik yang boleh digunakan untuk mengendalikan permintaan untuk fail statik.

Kod adalah seperti berikut:

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

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    const uri = url.parse(req.url).pathname;
    const filename = path.join(process.cwd(), uri);

    fs.exists(filename, (exists) => {
        if (!exists) {
            res.statusCode = 404;
            res.setHeader('Content-Type', 'text/plain');
            res.end('404 Not Found
');
            return;
        }

        if (fs.statSync(filename).isDirectory()) {
            filename += '/index.html';
        }

        fs.readFile(filename, 'binary', (err, file) => {
            if (err) {
                res.statusCode = 500;
                res.setHeader('Content-Type', 'text/plain');
                res.end(err + '
');
                return;
            }

            res.statusCode = 200;
            const extname = path.extname(filename);
            res.setHeader('Content-Type', mimeTypes[extname] || 'text/plain');
            res.write(file, 'binary');
            res.end();
        });
    });
});

server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

Dalam kod di atas, modul fs digunakan untuk menentukan sama ada fail yang diminta wujud, modul laluan digunakan untuk memproses laluan dan mimeTypes ialah digunakan untuk menentukan jenis fail. Jika fail yang diminta tidak wujud, 404 Not Found dikembalikan jika permintaan adalah folder, fail index.html dalam folder diminta secara lalai jika fail berjaya dibaca, 200 dikembalikan dan Jenis Kandungan pengepala dan respons ditetapkan pada masa yang sama.

Melalui operasi di atas, kami berjaya membina tapak web Web menggunakan Node.js dan melaksanakan pemprosesan penghalaan asas dan perkhidmatan fail statik. Melalui kajian dan amalan lanjut, kami boleh membuat laman web yang lebih kompleks dan melaksanakan lebih banyak fungsi, seperti operasi pangkalan data, ejen permintaan, dsb.

Atas ialah kandungan terperinci Nodejs membina tapak web. 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