Bagaimana untuk menyambungkan html ke nodejs

Dengan perkembangan pesat aplikasi web dalam beberapa tahun kebelakangan ini, Node.js (persekitaran masa jalan JavaScript yang ringan) juga telah digunakan secara meluas untuk membangunkan pelbagai aplikasi bahagian pelayan. HTML ialah bahasa teras di web, jadi bagaimana untuk menyambungkan HTML ke bahagian belakang Node.js? Artikel ini akan menjawabnya satu persatu untuk anda.

Untuk lebih memahami hubungan antara HTML dan Node.js, anda perlu terlebih dahulu memahami cara HTML berfungsi. HTML ialah bahasa asas untuk reka bentuk halaman Web Ia menerangkan struktur dan susun atur halaman melalui sejumlah besar tag (tag), dan memaparkan kandungan melalui pelbagai fail media (seperti imej, bunyi dan video). Node.js ialah teknologi pelayan belakang berdasarkan bahasa JavaScript, yang boleh mengendalikan permintaan web dan mengembalikan halaman web kepada klien. Apabila pelanggan meminta halaman web, Node.js mendapatkan semula data yang diperlukan daripada pangkalan data bahagian belakang dan kemudian memasukkannya secara dinamik ke dalam kod HTML untuk menjana halaman web dinamik.

Untuk merealisasikan hubungan antara HTML dan Node.js, beberapa rangka kerja dan perpustakaan perlu digunakan untuk mengurangkan beban kerja. Berikut ialah beberapa rangka kerja dan perpustakaan yang biasa digunakan:

1.Express.js

Express.js ialah rangka kerja aplikasi web berdasarkan Node.js, yang boleh membantu pembangun membina aplikasi web berskala dengan cepat . Ia menyediakan satu siri API untuk menjadikan pembangunan aplikasi lebih mudah.

Berikut ialah contoh mudah menggunakan Express.js untuk menyambungkan HTML dan Node.js:

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

app.use(express.static('public'));
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});

app.listen(3000, () => {
  console.log('App listening on port 3000!');
});

Dalam kod di atas, fungsi express() mencipta contoh aplikasi Express dan menetapkannya kepada appPembolehubah. Fungsi app.use() menentukan bahawa pelayan web mengehos fail statik (seperti fail CSS dan JavaScript) dalam direktori public. Fungsi app.get() menentukan bahawa apabila laluan URL ialah /, hantar fail index.html daripada pelayan. app.listen()Fungsi mengikat aplikasi ke port 3000.

2. Handlebars.js

Handlebars.js ialah enjin templat popular yang boleh menjana HTML berdasarkan halaman dan data. Ia disepadukan dengan baik dengan rangka kerja Express.js untuk Node.js, dengan bantuan anda boleh menyambungkan HTML dan Node.js dengan lebih mudah.

Berikut ialah contoh mudah menggunakan Handlebars.js untuk menyambung HTML dan Node.js:

const express = require('express');
const exphbs  = require('express-handlebars');

const app = express();

app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

app.get('/', (req, res) => {
  res.render('home', {
    name: 'World'
  });
});

app.listen(3000, () => {
  console.log('App listening on port 3000!');
});

Dalam kod di atas, fungsi exphbs() mengembalikan tika Handlebars.js dan menetapkan ia kepada app.engine()Parameter pertama fungsi. app.set()Fungsi menentukan enjin templat sebagai Handlebars.js. Fungsi app.get() memaparkan templat home.handlebars apabila mengakses laluan akar dan menghantar pembolehubah nama kepada "Dunia".

3.Socket.IO

Socket.IO ialah perpustakaan untuk komunikasi masa nyata antara Node.js dan penyemak imbas. Ia membenarkan komunikasi dua hala antara pelayan dan pelanggan, membolehkan komunikasi masa nyata antara HTML dan Node.js.

Berikut ialah contoh mudah menggunakan Socket.IO untuk menyambung HTML dan Node.js:

Kod pelayan:

const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

io.on('connection', (socket) => {
  console.log('a user connected');

  socket.on('disconnect', () => {
    console.log('user disconnected');
  });

  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
});

server.listen(3000, () => {
  console.log('App listening on port 3000!');
});

Kod pelanggan:

<!DOCTYPE html>
<html>
<head>
  <title>Socket.IO Example</title>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <ul id="messages"></ul>
  <form id="message-form">
    <input type="text" id="message-input">
    <button type="submit">Send</button>
  </form>
  <script>
    var socket = io();

    var form = document.getElementById('message-form');
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      var msgInput = document.getElementById('message-input');
      socket.emit('chat message', msgInput.value);
      msgInput.value = '';
    });

    socket.on('chat message', function(msg) {
      var messages = document.getElementById('messages');
      var message = document.createElement('li');
      message.innerHTML = msg;
      messages.appendChild(message);
    });
  </script>
</body>
</html>

Dalam kod di atas, kod pelayan menggunakan modul socket.io untuk mencipta pelayan Socket.IO dan merekodkan log apabila sambungan diwujudkan antara klien dan pelayan. Apabila menerima mesej chat message daripada pelanggan, pelayan menyiarkan mesej itu kepada semua pelanggan yang sedang bersambung. Pelanggan menggunakan perpustakaan socket.io.js untuk menyambung ke pelayan Socket.IO, data penyerahan borang dihantar ke pelayan Socket.IO dan mesej siaran diterima secara automatik melalui klien Socket.IO.

Ringkasnya, sambungan antara HTML dan Node.js boleh mencapai fleksibiliti dan pembangunan masa nyata aplikasi web. Walaupun menggunakan rangka kerja dan perpustakaan boleh memudahkan penyambungan, adalah penting untuk mempunyai pemahaman yang mendalam tentang HTML, Node.js dan pembangunan web.

Atas ialah kandungan terperinci Bagaimana untuk menyambungkan html ke nodejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!