Maison > Article > interface Web > nodejs implémente un forum de messages post-it

nodejs implémente un forum de messages post-it

王林original: 2023-05-08 11:53:07561parcourir

Les Post-it sont un moyen efficace pour enregistrer les affaires quotidiennes, les mémos et les notifications, et la technologie moderne les a migrés vers le domaine numérique. Cet article explique comment utiliser Node.js pour créer un simple tableau de messages de notes autocollantes qui permet aux utilisateurs de créer, de modifier et de supprimer des notes autocollantes.

Tout d'abord, vous devez installer Node.js et le framework Express. Créez le projet à l'aide de la commande suivante :

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

Ensuite, créez un fichier appelé index.js et ajoutez le contenu suivant : 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

Dans cet extrait de code, nous importons d'abord le framework Express, et créons une application appelée app. Ensuite, nous avons défini le moteur de modèle de vue de l'application sur ejs et utilisé le middleware express.static pour publier les ressources statiques dans le répertoire public, comme sous forme de feuilles de style, de fichiers JavaScript, d'images, etc. Ensuite, nous définissons une valeur de route de / et appelons la méthode res.render dans la réponse renvoyée pour restituer le modèle de vue index.ejs. Enfin, nous démarrons le serveur sur le port 3000 et imprimons un message sur la console pour indiquer que le serveur est en cours d'exécution.

Ensuite, créez un modèle appelé index.ejs et ajoutez le contenu suivant :

rrreee

Ce modèle définit une page en deux parties, l'une pour saisir un nouveau formulaire de notes autocollantes et l'autre est une liste. des notes autocollantes existantes. Le fichier scripts.js est introduit dans la balise <script>, qui gérera la soumission du formulaire et la suppression des pense-bêtes.

Ensuite, créez un fichier appelé notes.js et ajoutez le contenu suivant : 🎜rrreee🎜Ce fichier définit une classe Note qui a trois méthodes statiques : all , ajouter et supprimer. La méthode Note.all renvoie le tableau actuel de pense-bêtes, tandis que la méthode Note.add ajoute un nouveau pense-bête au tableau. La méthode Note.remove supprime du tableau le pense-bête identifié avec l'ID donné. 🎜🎜Ensuite, créez un fichier appelé controllers.js et ajoutez le contenu suivant : 🎜rrreee🎜Ce fichier définit trois méthodes de contrôleur home, save et remove pour gérer les demandes de page d'accueil, enregistrer les notes autocollantes et supprimer les notes autocollantes. La méthode home restitue le modèle index.ejs avec toutes les notes autocollantes comme paramètres ; la méthode save récupère le contenu des notes autocollantes à partir du corps de la requête et utilise Note.add crée un nouvel objet pense-bête ; la méthode remove obtient l'ID du pense-bête à supprimer des paramètres de la requête et utilise Note.remove La méthode supprime le pense-bête du tableau de pense-bêtes. 🎜🎜Enfin, créez un fichier appelé scripts.js pour gérer la soumission du formulaire et les demandes de suppression côté client. Ajoutez le contenu suivant : 🎜rrreee🎜Ce fichier définit une fonction addNoteToList qui créera un fragment HTML contenant le contenu d'un nouveau pense-bête et l'ajoutera à la liste des pense-bêtes. Il utilise ensuite la méthode EventTarget.addEventListener pour écouter les soumissions de formulaire et envoyer une requête POST. Il utilise également le même écouteur pour détecter les clics sur le bouton de suppression, envoyer une demande DELETE et supprimer le pense-bête correspondant de la liste. 🎜🎜Maintenant, nous pouvons lancer l'application et exécuter la commande suivante : 🎜rrreee🎜Maintenant, nous pouvons visiter http://localhost:3000 dans le navigateur et voir une page contenant un formulaire et des notes autocollantes existantes. Entrez un nouveau pense-bête, cliquez sur Enregistrer et le pense-bête sera ajouté à la liste. Cliquez sur le bouton Supprimer et le pense-bête sera supprimé. 🎜🎜Cet article décrit comment utiliser les modèles de vue Node.js, Express et EJS pour créer un tableau de messages de notes autocollantes qui permet aux utilisateurs de créer, de modifier et de supprimer des notes autocollantes. Ceci n'est qu'un exemple simple, mais il montre comment ces techniques peuvent être utilisées pour implémenter une application réelle. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript node.js 中间件 html express Static public delete 并发 JS 对象样式表 http

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment configurer des emplacements nommés dans vueArticle suivant：Comment configurer des emplacements nommés dans vue

Articles Liés

Voir plus