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

Schritte zum Einrichten und Mounten freigegebener Ordner auf Windows-Host und Docker-Container

Programme in Docker-Containern müssen häufig auf ...

Lösen Sie das Problem verschwindender Docker-Images

1. Spiegelbilder verschwinden in 50 und 93 [root@...

Aggregatabfrage- und Union-Abfragevorgänge für MySQL-Datenbanken

Inhaltsverzeichnis 1. Einfügen der abgefragten Er...

Eine kurze Analyse der LRU-verknüpften Liste von MySQL

1. Beschreiben Sie kurz die traditionelle LRU-ver...

Mysql Sql-Anweisungsübungen (50 Fragen)

Tabellenname und Felder –1. Studentenliste Studen...

Neulinge lernen schnell die Schritte zum Erstellen von Website-Symbolen

<br />Original-URL: http://www.lxdong.com/po...

Detaillierte Erklärung der Standardwerte von Breite und Höhe in CSS: auto und %

abschließend % der Breite: definiert die prozentu...

jQuery realisiert den Effekt der Sitzplatzauswahl und -reservierung im Theater

jQuery realisiert den Effekt der Sitzplatzauswahl...

So implementieren Sie Vue Page Jump

1. dies.$router.push() 1. Ansicht <Vorlage>...

So verwenden Sie JS zum Implementieren des Wasserfalllayouts von Webseiten

Inhaltsverzeichnis Vorwort: Was ist ein Wasserfal...

Beispielcode zur Implementierung eines gestapelten Karusselleffekts mit HTML+CSS+JS

Wirkung: Wenn sich die Diashow in eine Richtung b...

WeChat-Applet + MQTT, ESP8266-Implementierungsmethode zum Ablesen von Temperatur und Luftfeuchtigkeit

Erstens das Prinzip der esp8266 veröffentlicht Na...

WeChat-Applet-Beispiel für die direkte Verwendung von Funktionen in {{ }}

Vorwort Bei der WeChat-Applet-Entwicklung (native...

Was Sie über das Erstellen von MySQL-Indizes wissen müssen

Inhaltsverzeichnis Vorwort: 1. Indexmethode erste...

Erklärung des HTML-Codes der Webseite: geordnete Liste und ungeordnete Liste

In diesem Abschnitt lernen wir Listenelemente in ...