Implementierungsbeispiel für die Message Board-Funktion von Node.js+Express

Implementierungsbeispiel für die Message Board-Funktion von Node.js+Express

Nachrichtenbrett

Message Board-Funktion basierend auf Node.js+Express+Art-Template. Enthält eine Listenschnittstelle, eine Hinzufügungsschnittstelle und eine Nachrichtensendefunktion.

Erforderliche Bibliotheken

Kopieren Sie einfach die folgende package.json und npm install oder yarn install .

Der erforderliche Inhalt von package.json ist wie folgt.

{
  "Name": "nodejs_message_board",
  "version": "2021.09",
  "privat": wahr,
  "Skripte": {
    "Start": "Knoten-App"
  },
  "Abhängigkeiten": {
    "Kunstvorlage": "^4.13.2",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "express-art-vorlage": "^1.0.1"
  }
}

Open Source Projekte

Dieses Projekt ist im express_message_board im Open-Source-Lernprojekt [Node.js-Studie] node.js enthalten. Alle sind herzlich eingeladen, es zu studieren und herunterzuladen.

Ausführen von „localhost“-Effekt, Meldung an die Homepage

Bildbeschreibung hier einfügen lokaler Host/Post,

Seite „Nachricht hinzufügen“

Bildbeschreibung hier einfügen localhost/sagen wir?

name=xxx&message=xxx, senden Sie eine Nachricht und leiten Sie zur Startseite weiter

Bildbeschreibung hier einfügen

Projektstruktur

Hauptseite

Dies ist die Nachrichtenliste und gleichzeitig die Homepage. Rendert eine Liste basierend auf den übergebenen Werten.

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Nachrichtenbrett</title>
  <link rel="stylesheet" href="/public/css/bootstrap4.css" rel="externes nofollow" rel="externes nofollow" >
</Kopf>
<Text>
<div Klasse="Header-Container">
  <div Klasse="Seitenkopfzeile">
    <h1>Message Board<small>Nachrichtenliste</small></h1>
    <a class="btn btn-success" href="/post" rel="external nofollow" >Hinterlasse eine Nachricht</a>
  </div>
</div>
<div Klasse="Kommentare-Container">
  <ul Klasse="Listengruppe">
    {{jeder Kommentar}}
    <li Klasse="Listengruppenelement">
      {{$value.name}} sagt: {{$value.message}}
      {{$value.datetime}}
    </li>
    {{/jede}}
  </ul>
</div>
</body>
</html>

Beitrag.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Nachrichtenbrett</title>
    <link rel="stylesheet" href="/public/css/bootstrap4.css" rel="externes nofollow" rel="externes nofollow" >
</Kopf>
<Text>
<div Klasse="Header-Container">
    <div Klasse="Seitenkopfzeile">
        <h1><a href="/" rel="external nofollow" >Message Board<small>Eine Nachricht hinzufügen</small></a></h1>
    </div>
</div>
<div Klasse="Kommentarcontainer">
    <form action="/say" method="GET">
        <div Klasse="Formulargruppe">
            <label for="name">Ihr Name</label>
            <input type="text" id="name" name="name" class="form-control" placeholder="Bitte geben Sie Ihren Namen ein" required minlength="2" maxlength="10">
        </div>
        <div Klasse="Formulargruppe">
            <label for="message">Nachrichteninhalt</label>
            <textarea id="message" name="message" class="form-control" placeholder="Bitte geben Sie Ihre Nachricht ein" cols='30' rows='10' required minlength="5" maxlength="20"></textarea>
        </div>
        <button type="submit" class="btn btn-default">Veröffentlichen</button>
    </form>
</div>
</body>
</html>

route/index.js

Hier ist der Router

const express = erfordern('express');
const router = express.Router();


//Daten der Nachrichtenliste der Homepage simulieren var comments= {"comments":[
    {name:"AAA",message:"Welchen Editor verwenden Sie? WebStorem oder VSCODE",datetime:"2021-1-1"},
    {name:"BBB",message:"Was für ein schönes Wetter heute? Angeln oder Code",datetime:"2021-1-1"},
    {name:"Moshow",message:"zhengkai.blog.csdn.net",datetime:"2021-1-1"},
    {name:"DDD",message:"Der Unterschied zwischen ha, haha ​​​​und hahaha",datetime:"2021-1-1"},
    {name:"EEE",message:"Wang Shouyi Thirteen Spices oder iPhone Thirteen Spices",datetime:"2021-1-1"}
]}

/* von zhengkai.blog.csdn.net – Hosting mit statischem Routing*/
router.get('/', Funktion(req, res, nächstes) {
    res.render('index', Kommentare);
});
router.get('/post', Funktion(req, res, next) {
    res.render('posten', Kommentare);
});
router.get('/say', Funktion(req, res, next) {
    Konsole.log(Anforderung.Abfrage)
    Konsole.log(erforderliche URL)
    const Kommentar = req.query;
    Kommentar.datetime='2021-10-01';
    Kommentare.Kommentare.unshift(Kommentar);
    // Weiterleitung zur Startseite, ohne das URL-Suffix localhost
    res.redirect('/');
    // Rendern Sie die Homepage direkt mit dem URL-Suffix localhost/say?xxxx=xxx
    //res.render('index', Kommentare);
});

modul.exporte = Router;

app.js

Hier als Gesamtsteuerung

//Modul laden const http=require('http');
const fs = erfordern('fs');
const url = erfordern('url');
const Vorlage = erforderlich('Kunstvorlage');
const path = require('Pfad');
const express = erfordern('express');
const router = express.Router();
const app = express();


//Engine-Setup anzeigen
app.set('Ansichten', Pfad.join(__dirname, 'Ansichten'));
app.set('Ansichts-Engine', 'html');
app.engine('html',erfordert('express-art-template'));

app.use('/public',express.static(Pfad.join(__dirname, 'public')));

const indexRouter = erfordern('./routes/index');
app.use('/', indexRouter);


//Erstellen Sie ein Überwachungsobjekt app.listen(80,function(){
  console.log('zhengkai.blog.csdn.net-Projekt erfolgreich gestartet http://localhost')
})

Dies ist das Ende dieses Artikels über das Implementierungsbeispiel der node.js + Express-Message-Board-Funktion. Weitere verwandte node.js Express-Message-Board-Inhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • JS realisiert Message Board-Funktion
  • Quellcode des JSP-Message Boards drei: für JSP-Anfänger.
  • Faltbares Message Board, implementiert durch js (mit Quellcode-Download)
  • Codebeispiel zum Schreiben eines Message Boards mit ReactJS und dem Flask-Framework von Python
  • JS implementiert ein einfaches Message Board (Knotenbetrieb)
  • JavaScript zum Implementieren der Web-Message-Board-Funktion
  • JavaScript zum Erreichen der Message Board-Funktion

<<:  Docker Compose Idea CreateProcess-Fehler = 2 Das System kann die angegebene Datei nicht finden

>>:  Verwendung des Linux-Stat-Befehls

Artikel empfehlen

Beispiele für personalisiertes und kreatives Website-Design (30)

Aus diesem Grund haben wir eine Auswahl von 30 Kom...

Ein Beispiel für das elegante Schreiben von Urteilen in JavaScript

Inhaltsverzeichnis Vorwort 1. Monadisches Urteil ...

Einführung in das Beispiel zur Erstellung eines einfachen HTML-Webformulars

<input> wird zum Sammeln von Benutzerinforma...

Tutorial zu HTML-Tabellen-Tags (34): Zeilenspannen-Attribut ROWSPAN

In einer komplexen Tabellenstruktur erstrecken si...

Zwei Möglichkeiten zur Visualisierung von ClickHouse-Daten mit Apache Superset

Apache Superset ist ein leistungsstarkes BI-Tool,...

Dateisicherungslösung zwischen Servern: Wie sichere ich Serverdateien automatisch auf einem anderen Server?

Viele Organisationen müssen Dateiserver sichern u...

So erstellen Sie einen Trigger in MySQL

In diesem Artikelbeispiel wird der spezifische Co...

Alibaba Cloud Server Ubuntu Konfigurations-Tutorial

Da für den Import benutzerdefinierter Ubuntu-Imag...

Schneller Einstieg in die Teleport-Komponenten und Verwendungssyntax von VUE 3

Inhaltsverzeichnis 1. Einführung in das Teleporti...

Lösung für den 1045-Fehler in der MySQL-Datenbank

Wie löst man das Problem 1045, wenn die lokale Da...

Verwenden Sie die Renderfunktion, um hoch skalierbare Komponenten zu kapseln

brauchen: In der Hintergrundverwaltung gibt es hä...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.18 unter Win10 (Windows-Version)

In diesem Artikel wird das grafische Tutorial zur...

Das WeChat-Applet implementiert eine einfache Taschenrechnerfunktion

WeChat-Applet: Einfacher Rechner. Zu Ihrer Inform...

mysql löst zeitzonenbezogene Probleme

Vorwort: Bei der Verwendung von MySQL können Prob...

Detaillierte Erläuterung der MySQL sql_mode-Abfrage und -Einstellung

1. Führen Sie SQL aus, um anzuzeigen wählen Sie @...