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

Allgemeine DIV-Aufgaben (Teil 1) – Allgemeine Aufgaben (Bildlaufleisten anzeigen/Divs ausblenden/Ereignis-Bubbling deaktivieren usw.)

Als am häufigsten verwendetes Layoutelement spielt...

MySQL kann tatsächlich verteilte Sperren implementieren

Vorwort Im vorherigen Artikel habe ich Ihnen anha...

So zeigen Sie den Nginx-Konfigurationsdateipfad und den Ressourcendateipfad an

Zeigen Sie den Pfad der Nginx-Konfigurationsdatei...

Analyse und Lösung des a.getAttribute(href,2)-Problems in IE6/7

Kurzbeschreibung <br />In IE6 und 7 wird in...

So verwenden Sie & und nohup im Hintergrund von Linux

Wenn wir in einem Terminal oder einer Konsole arb...

Detaillierte Erläuterung der MySQL Master-Slave-Replikation und der Lese-/Schreibtrennung

Artikel-Mindmap Warum Master-Slave-Replikation un...

Beispiel für eine CSS3-Tab-Animation mit dynamischem Hintergrundwechseleffekt

CSS 3-Animationsbeispiel - Dynamischer Effekt des...

Beispielcode zur Implementierung der Großbildanpassung auf dem PC mit vue+px2rem (REM-Anpassung)

Konfiguration Vorwort Projektaufbau: basierend au...

Detaillierte Erklärung zur Installation von PHP7 unter Linux

Wie installiere ich PHP7 unter Linux? 1. Installi...

So generieren Sie die MySQL-Primärschlüssel-ID (selbstinktive, eindeutige und unregelmäßige)

Inhaltsverzeichnis 1. Verwenden Sie die UUID-Funk...

Detailliertes Tutorial zur Installation von Hbase 2.3.5 auf Vmware + Ubuntu18.04

Vorwort Im vorherigen Artikel wurde Hadoop instal...

Analyse der Methoden zur visuellen Strukturierung und Gestaltung von Kinder-Websites

1. Warm und sanft Zugehörige Adresse: http://www.w...

Ein Tutorial für Anfänger zur Installation und Anmeldung bei mysql-8.0.19-winx64 (unbedingt für Anfänger lesen)

Inhaltsverzeichnis 1. Laden Sie das Installations...

Flex-Anordnung in CSS darstellen (Layouttool)

In Bezug auf die Anzeige: flexibles Layout: Manch...

Überlegungen zum Rasterdesign von Webseiten

<br />Ursprüngliche Adresse: http://andymao....