Heim > Artikel > Web-Frontend > So implementieren Sie mehrere Seitensprünge in NodeJS

So implementieren Sie mehrere Seitensprünge in NodeJS

PHPzOriginal: 2023-04-26 09:14:58929Durchsuche

Node.js hat sich in den letzten Jahren mit seiner effizienten Leistung, seinen umfangreichen Funktionen und seinem leistungsstarken Ökosystem zu einem leistungsstarken Tool für Front-End-Entwickler entwickelt. Als serverseitige Laufumgebung kann Node.js zur Umsetzung komplexer Webanwendungen genutzt werden und ist auch eine ideale Wahl für die Umsetzung mehrseitiger Sprünge.

In diesem Artikel wird ausführlich erläutert, wie Sie mit Node.js mehrseitige Sprünge erzielen, einschließlich Anforderungsweiterleitung, Seitenrendering, Routing-Verwaltung usw.

1. Anforderungsweiterleitung

Im Zeitalter der Trennung von Front-End und Back-End entwickeln wir normalerweise Front-End-Code und Back-End-Code getrennt, um den Zweck der Entkopplung zu erreichen. In diesem Fall wird der Front-End-Code normalerweise in einem separaten Ordner gespeichert und der Back-End-Code ist auf mehrere Dateien verteilt. Dies erfordert, dass wir die Front-End-Anfrage zur Verarbeitung an das Back-End weiterleiten.

Node.js bietet leistungsstarke Webanwendungsentwicklungsfunktionen über Kernmodule wie http und fs. Wir müssen lediglich HTTP-Anfragen in der Back-End-Anwendung von Node.js überwachen und die Anfragen an die entsprechende Verarbeitungslogik weiterleiten. Auf diese Weise können Anforderungen intern zwischen dem Front-End und dem Back-End weitergeleitet werden, sodass der Front-End-Code die Back-End-API aufrufen kann, um den Effekt eines mehrseitigen Sprungs zu erzielen.

Sehen wir uns ein einfaches Beispiel für die Weiterleitung von Front-End-Anfragen in Node.js an:

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');
});

In diesem Beispiel erstellen wir eine HTTP-Serverinstanz über die createServer-Methode des http-Moduls und überwachen Port 3000. Bei der Verarbeitung der Anfrage stellen wir fest, ob die angeforderte URL /login ist. Andernfalls wird „Hallo Welt!“ ausgegeben.

2. Seiten rendern

Unsere Webanwendungen haben normalerweise viele Seiten. Um die Entwicklungseffizienz zu verbessern, verwenden wir normalerweise eine Template-Engine zum Rendern der Seiten. Node.js bietet zahlreiche Template-Engines wie EJS, Jade, Handlebars usw. Nehmen wir EJS als Beispiel, um vorzustellen, wie die Seite gerendert wird.

ejs ist eine einfache Template-Engine, die schnell HTML-Code generieren kann. Mit ejs müssen wir nur HTML-Seiten und Datenquellen schreiben, um die Seite schnell zu rendern.

Werfen wir zunächst einen Blick auf den folgenden Code, der eine einfache HTML-Seite definiert und die Vorlagensyntax von ejs verwendet:

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

Auf dieser Seite verwenden wir die Vorlagensyntax von ejs. Verwenden Sie beispielsweise <%= %>, um Variablen in der Datenquelle auszugeben, damit die Seite gerendert werden kann.

Sehen wir uns unten ein vollständiges Beispiel an, bei dem ejs zum Rendern der Seite verwendet wird:

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');
});

In diesem Beispiel lesen wir zwei ejs-Vorlagendateien über das fs-Modul und verwenden dann die Methode ejs.render, um den Inhalt zu rendern Die Datenquelle wird auf der Seite gerendert. Abschließend geben wir den gerenderten HTML-Code an den Browser aus.

3. Routing-Management

In der tatsächlichen Entwicklung müssen wir das Routing für mehrere Seiten verwalten, damit wir die entsprechende Seite schnell finden können. Node.js bietet Web-Frameworks wie Express, mit denen wir das Routing-Management bequemer und schneller implementieren können.

Nehmen wir das Express-Framework als Beispiel, um zu sehen, wie das Routing-Management implementiert wird.

Zuerst müssen wir das Express-Modul installieren:

  npm install express --save

Dann sehen wir uns an, wie Express zum Implementieren der Routenverwaltung verwendet wird:

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');
});

In diesem Beispiel verwenden wir zuerst die Funktion require() um das Express-Modul einzuführen, und ruft dann die Funktion express() auf, um eine neue Express-Instanz zu erstellen. require()函数引入express模块，然后调用express()函数来创建一个新的express实例。

接下来，我们使用app.get()方法，给每个路由定义一个相应的处理方法。例如，当用户请求‘/’时，我们将会向浏览器返回“Hello World!”。当用户请求‘/about’时，我们将会向浏览器返回“About Us!”。

最后，我们使用app.listen()

Als nächstes verwenden wir die Methode app.get(), um für jede Route eine entsprechende Verarbeitungsmethode zu definieren. Wenn der Benutzer beispielsweise „/“ anfordert, geben wir „Hallo Welt!“ an den Browser zurück. Wenn der Benutzer „/about“ anfordert, geben wir „Über uns!“ an den Browser zurück.

Schließlich verwenden wir die Methode app.listen(), um den Port anzugeben, auf dem der Dienst lauschen möchte. In diesem Beispiel legen wir die Nummer des Überwachungsports auf 3000 fest.

4. Mehrseitensprung in der Praxis

Wir haben bereits verstanden, wie Node.js die Weiterleitung von Anforderungen, das Rendern von Seiten und das Routing-Management implementiert. Schauen wir uns ein umfassendes Beispiel an, um uns ein detailliertes Verständnis der Implementierung zu verschaffen Details zum mehrseitigen Sprung.

Dieses Beispiel ist hauptsächlich in zwei Teile unterteilt, nämlich die Front-End-Seite und den Back-End-Node.js-Code.

Auf der Front-End-Seite verwenden wir jQuery, um Anfragen an die Back-End-Node.js-API zu senden. Wenn der Benutzer auf die Schaltfläche „Anmelden“ klickt, senden wir den Kontonamen und das Passwort des Benutzers an die Back-End-API und führen basierend auf den Antwortergebnissen der API verschiedene Sprungvorgänge durch.

Das Folgende ist der Hauptimplementierungsprozess des Front-End-Codes:

<!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>

In Node.js haben wir eine HTTP-Serverinstanz erstellt und Port 3000 abgehört. Wenn eine Anfrage erkannt wird, bestimmen wir zunächst den Typ der Anfrage. Bei POST-Anfragen verwenden wir die EJS-Vorlagen-Engine. Wir verarbeiten die Anmeldelogik und geben die Antwortergebnisse im JSON-Format zurück. Wenn der Benutzer beispielsweise „admin“ und „123456“ eingibt, geben wir { Code: 200, Nachricht: „Anmeldung erfolgreich“ } im JSON-Format zurück. Wenn der Benutzer einen anderen Kontonamen oder ein anderes Passwort eingibt, geben wir { code: 400, message: 'Falscher Benutzername oder Passwort' } im JSON-Format zurück. 🎜🎜Das Folgende ist der Hauptimplementierungsprozess des Back-End-Node.js-Codes: 🎜

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');
});

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

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mehrere Seitensprünge in NodeJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

node.js json jquery html express require JS http

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Lassen Sie uns über exportierte Funktionen, Variablen und Module in Node.js sprechenNächster Artikel：Lassen Sie uns über exportierte Funktionen, Variablen und Module in Node.js sprechen

In Verbindung stehende Artikel

Mehr sehen