So erstellen Sie eine einfache Social-Media-Plattform mit Node.js

Social-Media-Plattformen sind zu einer der beliebtesten und beliebtesten Anwendungen der heutigen Zeit geworden, und Node.js ist eine in der Webentwicklung weit verbreitete JavaScript-Laufzeitumgebung. Sie ist äußerst effizient und anpassungsfähig, was die Verwendung von Node .js ermöglicht eine gute Wahl für den Aufbau von Social-Media-Plattformen werden. In diesem Artikel erfahren Sie, wie Sie mit Node.js eine einfache Social-Media-Plattform erstellen.

1. Node.js installieren

Stellen Sie zunächst sicher, dass Node.js auf Ihrem Computer installiert ist. Sie können mit dem folgenden Befehl überprüfen, ob Node.js installiert ist:

node -v

Wenn Sie Node.js installiert haben, wird Ihre aktuell aktivierte Versionsnummer ausgegeben. Wenn Sie Node.js nicht installiert haben, installieren Sie bitte die neueste Version von Node.js basierend auf Ihrem Computertyp, Betriebssystem und Ihrer Betriebsumgebung.

2. Initialisierung des Projekts

Wir beginnen mit der Erstellung unseres Projekts. Erstellen Sie zunächst ein neues Verzeichnis auf Ihrem Computer mit dem folgenden Befehl:

mkdir social-media-app
cd social-media-app

Jetzt müssen wir ein leeres Node.js-Projekt im Ordner initialisieren. Führen Sie den folgenden Befehl aus:

npm init

Dies führt Sie durch einige grundlegende Einstellungen beim Erstellen eines neuen Projekts. Befolgen Sie die Anweisungen (npm init -y kann schnell erledigt werden) und stellen Sie im letzten Schritt sicher, dass der Name der „Hauptdatei“ mit dem Namen der Eintragsdatei übereinstimmt, die Sie in Ihrem Projekt verwenden möchten (normalerweise mit dem Namen „app.js“). .

{
  "name": "social-media-app",
  "version": "1.0.0",
  "description": "A simple social media app built with Node.js",
  "main": "app.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

3. Installieren Sie die erforderlichen Abhängigkeiten

Als nächstes müssen wir einige notwendige Abhängigkeiten installieren, darunter:

• Express: Wir werden dieses leichte Framework verwenden, um HTTP-Routing und -Anfragen zu verarbeiten.
• Body-Parser: In Bei der Verarbeitung von POST Anfragen müssen wir die Daten im Anfragetext durch die Body-Parser-Middleware analysieren. Sie können die folgenden Abhängigkeiten in Ihrer package.json-Datei sehen:

npm install express body-parser ejs --save

Erstellen Sie die Anwendungseintragsdatei

Wir haben die erforderlichen Abhängigkeiten installiert, jetzt erstellen wir die Anwendungseintragsdatei „app .js“. Importieren Sie zunächst die Express- und Body-Parser-Module:

  "dependencies": {
    "body-parser": "^1.18.3",
    "ejs": "^2.6.1",
    "express": "^4.16.4"
  }

Als nächstes erstellen Sie eine Express-Anwendung:

const express = require('express');
const bodyParser = require('body-parser');

4. Aktivieren Sie den Body-Parser, um die Daten im Anfragetext zu analysieren. Wir entscheiden uns dafür, die Daten in JSON zu analysieren, also fügen wir die folgende Zeile zu app.js hinzu:

const app = express();

Verwenden Sie die EJS-Vorlagen-Engine, um die Seite zu rendern. In dieser Anwendung verwenden wir EJS zum Rendern unserer Vorlagen. Um es zu aktivieren, fügen Sie die folgende Zeile in die Datei app.js ein:

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

Zum Schluss starten Sie die Anwendung in der Datei app.js:

app.set('view engine', 'ejs');

Mit dieser einfachen App können wir sicherstellen, dass alles richtig eingerichtet ist, und das können wir jetzt Führen Sie das Programm aus, indem Sie den folgenden Befehl in das Terminal eingeben:

app.listen(3000, () => console.log('Server running on port 3000!'))

Öffnen Sie http://localhost:3000 in Ihrem Browser und Sie sollten die Meldung „Cannot GET“ sehen.

Hinzufügen von Routen und Controllern

Jetzt beginnen wir mit dem Hinzufügen von Routen und entsprechenden Controllern zu unserer Anwendung. Wir erstellen zwei Seiten:

Home (zeigt alle Nachrichten an)
Post-Seite (postet neue Nachrichten)

(1) Home-Route und Controller

• Um die Homepage-Anfrage zu bearbeiten, müssen wir eine Route für erstellen der /-Pfad. Wir benötigen außerdem einen Controller, um alle Nachrichten abzurufen und an die Ansicht weiterzuleiten.
• Erstellen Sie zunächst einen Ordner, nennen Sie die Datei „Controllers“ und erstellen Sie darin eine Datei mit dem Namen „home.js“. Hier ist unser Controller:

node app.js

Dieser Controller übergibt einfach ein Array aus zwei Nachrichten an die home.ejs-Vorlage und rendert es.

Jetzt müssen wir eine Route in der Datei app.js erstellen, um den /-Pfad zu verarbeiten:

// controllers/home.js

let messages = [
  { id: 1, title: 'First Message', body: 'This is the first message' },
  { id: 2, title: 'Second Message', body: 'This is the second message' }
];

exports.getHomePage = (req, res) => {
  res.render('pages/home', { messages });
};

Die Route erstellt eine Route für die „GET“-Anfrage und zeigt auf die getHomePage-Funktion, die wir in den Controllern/Home definiert haben .js-Datei.

(2) Route und Controller der Veröffentlichungsseite

Als nächstes erstellen wir eine Datei für die Veröffentlichungsroute und den entsprechenden Controller. Erstellen Sie im Ordner „Controllers“ eine Datei namens „publish.js“ mit folgendem Inhalt:

const homeController = require('./controllers/home');

app.get('/', homeController.getHomePage);

Dieser Controller definiert zwei Verhaltensweisen:

getPublishPage: Diese Funktion rendert eine Seite mit Titel und Text. Ein Formular, das dies zulässt Benutzer können neue Nachrichten senden.

publishMessage: Diese Funktion empfängt die vom Benutzer übermittelten Daten, fügt die neue Nachricht zum Array „messages“ hinzu und leitet sie dann zurück zur Startseite weiter.

Lassen Sie uns diese Route in der app.js-Datei erstellen:

// controllers/publish.js

let messages = [
  { id: 1, title: 'First Message', body: 'This is the first message' },
  { id: 2, title: 'Second Message', body: 'This is the second message' }
];

exports.getPublishPage = (req, res) => {
  res.render('pages/publish');
};

exports.publishMessage = (req, res) => {
  const { title, body } = req.body;
  const id = messages.length + 1;
  messages.push({ id, title, body });

  res.redirect('/');
};

• Dadurch werden zwei Routen für den /publish-Pfad erstellt: eine GET-Anfrageroute zum Rendern des Formulars und eine POST-Anfrageroute zum Senden von Daten.
Ansichten erstellen

Wir haben zwei Routen und entsprechende Controller erstellt, jetzt müssen wir die entsprechenden Ansichten in Ansichten erstellen.

Wir müssen zwei Ordner erstellen: einen Ordner namens „Layouts“ und einen Ordner namens „Seiten“.

6. Erstellen Sie im Ordner „layouts“ eine Datei mit dem Namen „main.ejs“, die gemeinsame Elemente für alle Website-Seiten enthält, wie z. B. Kopfzeilen, Seitenskripte und Stylesheets. Hier ist der Inhalt dieser Datei:

<!-- layouts/main.ejs -->

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Social Media App</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <header>
    <h1 id="Social-Media-App">Social Media App</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/publish">Publish</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <%- body %>
  </main>

  <footer>
    &copy; 2020 Social Media App
  </footer>
</body>
</html>

在“pages”文件夹中，创建两个名为“home.ejs”和“publish.ejs”的文件。

以下是“home.ejs”文件的内容：

<!-- views/pages/home.ejs -->

<h2 id="Messages">Messages</h2>

<ul>
  <% messages.forEach(message => { %>
    <li><%= message.title %>: <%= message.body %></li>
  <% }) %>
</ul>

这呈现了一个包含所有消息的列表。

以下是“publish.ejs”文件的内容：

<!-- views/pages/publish.ejs -->

<h2 id="Publish-Message">Publish Message</h2>

<form method="POST" action="/publish">
  <label for="title">Title:</label>
  <input type="text" name="title" id="title"><br>

  <label for="body">Body:</label>
  <textarea name="body" id="body"></textarea><br>

  <button type="submit">Publish</button>
</form>

这个文件包含一个表单，用户可以在其中输入新消息的标题和正文。

现在，该应用程序已准备就绪，可以运行。在终端中运行以下命令：

node app.js

在浏览器中输入http://localhost:3000，您应该会看到一个包含所有消息的列表，并能够通过单击链接到发布页面。

7. 完成

如果您想了解更多关于如何使用Node.js开发Web应用程序或其他Node.js开发内容，请用以上代码示例作为参考，并根据您自己的需求和想法进行更改。现在，您已经拥有了一个基于Node.js的简单社交媒体平台，您可以使用类似的技术来扩展功能，构建更大、更复杂的社交媒体平台。

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine einfache Social-Media-Plattform mit Node.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!