Bagaimana untuk melaksanakan lompatan berbilang halaman dalam nodejs-Soal Jawab bahagian hadapan-php.cn

Dalam beberapa tahun kebelakangan ini, Node.js telah menjadi alat yang berkuasa untuk pembangun bahagian hadapan dengan prestasi yang cekap, fungsi yang kaya dan ekosistem yang berkuasa. Sebagai persekitaran berjalan sebelah pelayan, Node.js boleh digunakan untuk melaksanakan aplikasi web yang kompleks dan juga merupakan pilihan ideal untuk melaksanakan lompatan berbilang halaman.

Artikel ini akan menerangkan secara terperinci cara menggunakan Node.js untuk mencapai lompatan berbilang halaman, termasuk pemajuan permintaan, pemaparan halaman, pengurusan penghalaan, dsb.

1. Minta pemajuan

Dalam era pemisahan bahagian hadapan dan belakang, kami biasanya membangunkan kod hadapan dan kod belakang secara berasingan untuk mencapai tujuan penyahgandingan. Dalam kes ini, kod bahagian hadapan biasanya disimpan dalam folder yang berasingan dan kod bahagian belakang tersebar merentasi berbilang fail. Ini memerlukan kami memajukan permintaan bahagian hadapan ke bahagian belakang untuk diproses.

Node.js menyediakan keupayaan pembangunan aplikasi web yang berkuasa melalui modul teras seperti http dan fs Kami hanya perlu memantau permintaan HTTP dalam aplikasi bahagian belakang Node.js dan memajukan permintaan kepada logik pemprosesan yang sepadan. Pukul saja. Dengan cara ini, permintaan boleh dimajukan secara dalaman antara bahagian hadapan dan bahagian belakang, membenarkan kod bahagian hadapan memanggil API bahagian belakang untuk mencapai kesan lompatan berbilang halaman.

Mari kita lihat contoh mudah untuk memajukan permintaan bahagian hadapan dalam Node.js:

const http = require('http');

http.createServer((req, res) => {
  // 设置跨域
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  
  // 处理请求
  if (req.url === '/login') {
    // 获取参数
    let body = '';
    req.on('data', (chunk) => {
      body += chunk;
    });

    req.on('end', () => {
      const { username, password } = JSON.parse(body);
      // 处理登录逻辑
      if (username === 'admin' && password === '123456') {
        // 登录成功
        res.end(JSON.stringify({ code: 200, message: '登录成功' }));
      } else {
        // 登录失败
        res.end(JSON.stringify({ code: 400, message: '用户名或密码错误' }));
      }
    });
  } else {
    // 处理其他请求
    res.end('Hello World!');
  }
}).listen(3000, () => {
  console.log('Server is running on port 3000');
});

Salin selepas log masuk

Dalam contoh ini, kami mencipta HTTP melalui kaedah createServer bagi contoh Pelayan modul http dan dengar pada port 3000. Semasa memproses permintaan, kami menentukan sama ada URL yang diminta adalah /login Jika ya, logik log masuk diproses sebaliknya, "Hello World!"

2. Halaman pemaparan

Biasanya terdapat banyak halaman dalam aplikasi web kami untuk meningkatkan kecekapan pembangunan, kami biasanya menggunakan enjin templat untuk memaparkan halaman. Node.js menyediakan banyak enjin templat, seperti ejs, jed, bar hendal, dll. Mari kita ambil ejs sebagai contoh untuk memperkenalkan cara membuat halaman.

ejs ialah enjin templat ringkas yang boleh menjana kod HTML dengan cepat. Menggunakan ejs, kami hanya perlu menulis halaman HTML dan sumber data untuk memaparkan halaman dengan cepat.

Mari kita lihat kod berikut dahulu ia mentakrifkan halaman HTML yang ringkas dan menggunakan sintaks templat ejs:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= title %></h1>
    <p><%= content %></p>
  </body>
</html>

Salin selepas log masuk

Dalam halaman ini, kami menggunakan sintaks templat ejs: Sintaks templat. Contohnya, gunakan <%= %> untuk mengeluarkan pembolehubah dalam sumber data supaya halaman boleh dipaparkan.

Mari kita lihat contoh lengkap di bawah, menggunakan ejs untuk memaparkan halaman:

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

http.createServer((req, res) => {
  // 设置跨域
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');

  // 渲染页面
  if (req.url === '/') {
    fs.readFile('./template/index.ejs', (err, data) => {
      if (err) {
        console.log(err);
        res.end('页面不存在');
      } else {
        const template = data.toString();
        const content = { title: '首页', content: '欢迎访问首页' };
        const html = ejs.render(template, content);
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.end(html);
      }
    });
  } else if (req.url === '/about') {
    fs.readFile('./template/about.ejs', (err, data) => {
      if (err) {
        console.log(err);
        res.end('页面不存在');
      } else {
        const template = data.toString();
        const content = { title: '关于我们', content: '我们是一家IT公司' };
        const html = ejs.render(template, content);
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.end(html);
      }
    });
  } else {
    res.end('页面不存在');
  }
}).listen(3000, () => {
  console.log('Server is running on port 3000');
});

Salin selepas log masuk

Dalam contoh ini, kita membaca dua fail templat ejs melalui modul fs, dan kemudian menggunakan The ejs Kaedah .render memaparkan kandungan daripada sumber data ke halaman. Akhir sekali, kami mengeluarkan kod HTML yang diberikan kepada penyemak imbas.

3. Pengurusan penghalaan

Dalam pembangunan sebenar, kami perlu menguruskan penghalaan untuk berbilang halaman supaya kami dapat mencari halaman yang sepadan dengan cepat. Node.js menyediakan rangka kerja web seperti ekspres, yang boleh membantu kami melaksanakan pengurusan penghalaan dengan lebih mudah dan cepat.

Mari kita ambil rangka kerja ekspres sebagai contoh untuk melihat cara melaksanakan pengurusan penghalaan.

Pertama, kita perlu memasang modul ekspres:

  npm install express --save

Salin selepas log masuk

Kemudian, mari lihat cara menggunakan ekspres untuk melaksanakan pengurusan laluan:

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

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.get('/about', (req, res) => {
  res.send('About Us!');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Salin selepas log masuk

Dalam contoh ini , Kami mula-mula menggunakan fungsi require() untuk memperkenalkan modul ekspres, dan kemudian memanggil fungsi express() untuk mencipta contoh ekspres baharu.

Seterusnya, kami menggunakan kaedah app.get() untuk menentukan kaedah pemprosesan yang sepadan untuk setiap laluan. Sebagai contoh, apabila pengguna meminta '/', kami akan mengembalikan "Hello World!" Apabila pengguna meminta '/about', kami akan mengembalikan "About Us!"

Akhir sekali, kami menggunakan kaedah app.listen() untuk menentukan port yang ingin didengari oleh perkhidmatan. Dalam contoh ini, kami menetapkan nombor port pendengaran kepada 3000.

4. Amalan lompat berbilang halaman

Kami telah pun memahami cara Node.js melaksanakan pemajuan permintaan, pemaparan halaman dan pengurusan penghalaan butiran lompatan berbilang halaman.

Contoh ini terbahagi terutamanya kepada dua bahagian, iaitu halaman hujung hadapan dan kod Node.js bahagian belakang.

Di halaman hujung hadapan, kami menggunakan jQuery untuk menghantar permintaan ke API Node.js bahagian belakang. Apabila pengguna mengklik butang 'Log Masuk', kami akan menghantar nama akaun dan kata laluan pengguna ke API bahagian belakang, dan membuat operasi lompatan yang berbeza berdasarkan hasil tindak balas API.

Berikut ialah proses pelaksanaan utama kod bahagian hadapan:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>登录</title>
  </head>
  <body>
    <h1>登录</h1>
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <button id="loginBtn">登录</button>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function() {
      $('#loginBtn').click(function() {
        // 获取用户名和密码
        const username = $('input[name=username]').val();
        const password = $('input[name=password]').val();

        // 发送请求
        $.ajax({
          type: 'POST',
          url: 'http://localhost:3000/login',
          data: JSON.stringify({ username, password }),
          contentType: 'application/json',
          success: function(res) {
            if (res.code === 200) {
              // 登录成功，跳转到首页
              window.location.href = 'http://localhost:3000';
            } else {
              alert(res.message);
            }
          },
          error: function() {
            alert('请求出错');
          }
        });
      });
    });
  </script>
</html>

Salin selepas log masuk

Dalam Node.js, kami mencipta tika pelayan HTTP dan mendengar port 3000. Apabila permintaan dikesan, kami mula-mula menentukan jenis permintaan Untuk permintaan GET, kami menggunakan enjin templat ejs untuk memaparkan halaman untuk permintaan POST, kami memproses logik log masuk dan mengembalikan hasil respons dalam format JSON. Sebagai contoh, apabila pengguna memasukkan 'admin' dan '123456', kami akan mengembalikan { code: 200, message: 'Login successful' } dalam format JSON. Apabila pengguna memasukkan nama akaun atau kata laluan lain, kami akan mengembalikan { kod: 400, mesej: 'Nama pengguna atau kata laluan salah' } dalam format JSON.

Berikut ialah proses pelaksanaan utama kod Node.js bahagian belakang:

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

http.createServer((req, res) => {
  // 设置跨域
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');

  // 渲染页面
  if (req.url === '/') {
    fs.readFile('./template/index.ejs', (err, data) => {
      if (err) {
        console.log(err);
        res.end('页面不存在');
      } else {
        const template = data.toString();
        const content = { title: '首页', content: '欢迎访问首页' };
        const html = ejs.render(template, content);
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.end(html);
      }
    });
  } else if (req.url === '/login') {
    // 获取参数
    let body = '';
    req.on('data', (chunk) => {
      body += chunk;
    });

    req.on('end', () => {
      const { username, password } = JSON.parse(body);
      // 处理登录逻辑
      if (username === 'admin' && password === '123456') {
        // 登录成功
        res.end(JSON.stringify({ code: 200, message: '登录成功' }));
      } else {
        // 登录失败
        res.end(JSON.stringify({ code: 400, message: '用户名或密码错误' }));
      }
    });
  } else {
    res.end('页面不存在');
  }
}).listen(3000, () => {
  console.log('Server is running on port 3000');
});

Salin selepas log masuk

通过以上代码，我们可以在前后端相分离的情况下，使用Node.js来实现多页面跳转的功能。本文只是对于nodejs多页面跳转的简单介绍，还有很多要学习和了解的地方，相信有了这篇文章的帮助，你在学习和实践中也会有所收获。

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan lompatan berbilang halaman dalam nodejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!