Heim > Artikel > Web-Frontend > nodejs implementiert ein Post-it-Messageboard

nodejs implementiert ein Post-it-Messageboard

王林Original: 2023-05-08 11:53:07561Durchsuche

Post-it-Notizen sind eine effektive Möglichkeit für Menschen, alltägliche Angelegenheiten, Memos und Benachrichtigungen aufzuzeichnen, und moderne Technologie hat sie in die digitale Welt verlagert. In diesem Artikel wird erläutert, wie Sie mit Node.js ein einfaches Message Board für Haftnotizen erstellen, mit dem Benutzer Haftnotizen erstellen, bearbeiten und löschen können.

Zuerst müssen Sie Node.js und das Express-Framework installieren. Erstellen Sie das Projekt mit dem folgenden Befehl:

mkdir notepad
cd notepad
npm init
npm install express --save

Als nächstes erstellen Sie eine Datei mit dem Namen index.js und fügen den folgenden Inhalt hinzu: index.js 的文件，并添加以下内容：

const express = require('express');
const app = express();
const PORT = 3000;

// 配置视图模板引擎
app.set('view engine', 'ejs');

// 配置静态资源
app.use(express.static('public'));

// 路由
app.get('/', (req, res) => {
  res.render('index');
});

// 启动服务器
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

在此代码段中，我们首先导入了 Express 框架，并创建了一个名为 app 的应用程序。接着，我们设置了应用程序的视图模板引擎为 ejs，并使用 express.static 中间件将 public 目录中的静态资源发布，例如样式表、JavaScript 文件和图像等。然后，我们定义了一个路由值为 /，并在返回的响应中调用 res.render 方法来呈现 index.ejs 视图模板。最后，我们在端口 3000 上启动服务器，并在控制台输出消息以指示服务器正在运行。

接下来，创建一个名为 index.ejs 的模板，并添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Node.js Notepad</title>
  <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
  <div class="container">
    <h1>Node.js Notepad</h1>
    <form>
      <textarea id="note" placeholder="Enter your note"></textarea>
      <button type="submit">Save</button>
    </form>
    <div id="notes">
      <% for(let note of notes) { %>
        <div class="note">
          <span class="delete" data-id="<%= note.id %>">x</span>
          <p><%= note.content %></p>
        </div>
      <% } %>
    </div>
  </div>
  <script src="/js/scripts.js"></script>
</body>
</html>

此模板定义了一个包含两个部分的页面，一个是用于输入新便利贴的表单，另一个是现有便利贴的列表。在 <script> 标签中引入了 scripts.js 文件，它将处理表单提交和删除便利贴的操作。

接下来，创建一个名为 notes.js 的文件，并添加以下内容：

class Note {
  static all() {
    return [
      { id: 1, content: 'Buy groceries' },
      { id: 2, content: 'Call John' },
      { id: 3, content: 'Pay rent' }
    ];
  }

  static add(content) {
    const id = Note.all().length + 1;
    const note = { id, content };
    Note.all().push(note);
    return note;
  }

  static remove(id) {
    const notes = Note.all();
    const index = notes.findIndex(note => note.id == id);
    if (index != -1) {
      notes.splice(index, 1);
    }
  }
}

module.exports = Note;

此文件定义了一个 Note 类，它具有三个静态方法：all、add 和 remove。Note.all 方法返回当前的便利贴数组，而 Note.add 方法将新的便利贴添加到数组中。Note.remove 方法将标识为给定 ID 的便利贴从数组中删除。

接下来，创建一个名为 controllers.js 的文件，并添加以下内容：

const Note = require('./notes');

exports.home = (req, res) => {
  const notes = Note.all();
  res.render('index', { notes });
};

exports.save = (req, res) => {
  const content = req.body.note;
  const note = Note.add(content);
  res.status(201).json(note);
};

exports.remove = (req, res) => {
  const id = req.params.id;
  Note.remove(id);
  res.status(204).send();
};

此文件定义了三个控制器方法 home、save 和 remove，以处理主页、保存便利贴和删除便利贴的请求。home 方法将所有便利贴作为参数呈现 index.ejs 模板；save 方法从请求正文中获取便利贴内容，并使用 Note.add 方法创建一个新的便利贴对象；remove 方法从请求的参数中获取要删除的便利贴 ID，并使用 Note.remove 方法从便利贴数组中删除该便利贴。

最后，创建一个名为 scripts.js 的文件，在客户端处理表单提交和删除请求。添加以下内容：

function addNoteToList(note) {
  const notes = document.getElementById('notes');
  const noteTemplate = `
    <div class="note">
      <span class="delete" data-id="${note.id}">x</span>
      <p>${note.content}</p>
    </div>
  `;
  notes.innerHTML += noteTemplate;
}

// 处理表单提交
const form = document.querySelector('form');
form.addEventListener('submit', async event => {
  event.preventDefault();
  const content = document.getElementById('note').value;
  const response = await fetch('/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ note: content })
  });
  const note = await response.json();
  addNoteToList(note);
});

// 处理删除请求
const notes = document.getElementById('notes');
notes.addEventListener('click', async event => {
  if (event.target.classList.contains('delete')) {
    const id = event.target.getAttribute('data-id');
    await fetch(`/${id}`, { method: 'DELETE' });
    event.target.parentElement.remove();
  }
});

此文件定义了一个 addNoteToList 函数，它将创建一个包含新便利贴内容的 HTML 片段，并将其添加到便利贴列表中。然后，它使用 EventTarget.addEventListener

node index.js

In diesem Codeausschnitt importieren wir zunächst das Express-Framework und erstellen es eine Anwendung namens app. Als Nächstes haben wir die Ansichtsvorlagen-Engine der Anwendung auf ejs eingestellt und die Middleware express.static verwendet, um die statischen Ressourcen im Verzeichnis public zu veröffentlichen, z B. Stylesheets, JavaScript-Dateien, Bilder usw. Dann definieren wir einen Routenwert von / und rufen die Methode res.render in der zurückgegebenen Antwort auf, um die Ansichtsvorlage index.ejs zu rendern. Schließlich starten wir den Server auf Port 3000 und geben eine Meldung an die Konsole aus, um anzuzeigen, dass der Server ausgeführt wird.

Als nächstes erstellen Sie eine Vorlage mit dem Namen index.ejs und fügen den folgenden Inhalt hinzu:

rrreee

Diese Vorlage definiert eine Seite mit zwei Teilen, einem für die Eingabe eines neuen Haftnotizformulars und dem anderen einer Liste der vorhandenen Haftnotizen. Die Datei scripts.js wird in das Tag <script> eingeführt, das die Formularübermittlung und das Löschen von Haftnotizen übernimmt.

Als nächstes erstellen Sie eine Datei mit dem Namen notes.js und fügen den folgenden Inhalt hinzu: 🎜rrreee🎜Diese Datei definiert eine Note-Klasse, die drei statische Methoden hat: all , add und remove. Die Methode Note.all gibt das aktuelle Array von Haftnotizen zurück, während die Methode Note.add dem Array eine neue Haftnotiz hinzufügt. Die Methode Note.remove entfernt die mit der angegebenen ID identifizierte Haftnotiz aus dem Array. 🎜🎜Als nächstes erstellen Sie eine Datei mit dem Namen controllers.js und fügen den folgenden Inhalt hinzu: 🎜rrreee🎜Diese Datei definiert drei Controller-Methoden home, save und remove, um Anfragen für die Startseite zu bearbeiten, Haftnotizen zu speichern und Haftnotizen zu löschen. Die home-Methode rendert die index.ejs-Vorlage mit allen Haftnotizen als Parameter; die save-Methode ruft den Haftnotizinhalt aus dem Anforderungstext ab und verwendet die Methode Note.add, um ein neues Haftnotizobjekt zu erstellen. Die Methode remove ruft die zu löschende Haftnotiz-ID aus den Anforderungsparametern ab und verwendet Note.remove Methode entfernt die Haftnotiz aus dem Haftnotiz-Array. 🎜🎜Erstellen Sie abschließend eine Datei mit dem Namen scripts.js, um Formularübermittlungs- und Löschanfragen auf der Clientseite zu verarbeiten. Fügen Sie den folgenden Inhalt hinzu: 🎜rrreee🎜Diese Datei definiert eine addNoteToList-Funktion, die ein HTML-Fragment mit dem Inhalt einer neuen Haftnotiz erstellt und es der Haftnotizliste hinzufügt. Anschließend wird die Methode EventTarget.addEventListener verwendet, um auf Formularübermittlungen zu warten und eine POST-Anfrage zu senden. Außerdem wird derselbe Listener verwendet, um Klicks auf die Löschschaltfläche zu erkennen, eine DELETE-Anfrage zu senden und die entsprechende Haftnotiz aus der Liste zu entfernen. 🎜🎜Jetzt können wir die Anwendung starten und den folgenden Befehl ausführen: 🎜rrreee🎜Jetzt können wir http://localhost:3000 im Browser besuchen und eine Seite sehen, die ein Formular und vorhandene Haftnotizen enthält. Geben Sie eine neue Haftnotiz ein, klicken Sie auf „Speichern“ und die Haftnotiz wird zur Liste hinzugefügt. Klicken Sie auf die Schaltfläche „Löschen“ und die Haftnotiz wird gelöscht. 🎜🎜In diesem Artikel wird beschrieben, wie Sie mithilfe von Node.js-, Express- und EJS-Ansichtsvorlagen ein Message Board für Haftnotizen erstellen, mit dem Benutzer Haftnotizen erstellen, bearbeiten und löschen können. Dies ist nur ein einfaches Beispiel, zeigt aber, wie diese Techniken zur Implementierung einer realen Anwendung verwendet werden können. 🎜

Das obige ist der detaillierte Inhalt vonnodejs implementiert ein Post-it-Messageboard. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript node.js 中间件 html express Static public delete 并发 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：So richten Sie benannte Slots in Vue einNächster Artikel：So richten Sie benannte Slots in Vue ein

In Verbindung stehende Artikel

Mehr sehen