ホームページ >ウェブフロントエンド >フロントエンドQ&A >nodejsはポストイットのメッセージボードを実装します

nodejsはポストイットのメッセージボードを実装します

王林オリジナル: 2023-05-08 11:53:07621ブラウズ

ポストイットは、人々が日々の出来事、メモ、通知を記録する効果的な方法ですが、現代のテクノロジーにより、ポストイットはデジタル領域に移行しました。この記事では、Node.js を使用して、ユーザーが付箋を作成、編集、削除できるシンプルな付箋掲示板を作成する方法を紹介します。

まず、Node.js と Express フレームワークをインストールする必要があります。次のコマンドを使用してプロジェクトを作成します:

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

次に、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>

このテンプレートは 2 つの部分からなるページを定義します。1 つは新規を入力するためのフォームです。もう 1 つは既存の付箋のリストです。 scripts.js ファイルは <script> タグで導入され、フォームの送信と付箋の削除を処理します。

次に、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;

このファイルは、3 つの 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();
};

このファイルは、3 つのコントローラーメソッドを定義します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();
  }
});

このファイルは、新しい付箋の内容を含む HTML フラグメントを作成し、それを付箋リストに追加する

addNoteToList 関数を定義します。次に、EventTarget.addEventListener メソッドを使用してフォームの送信をリッスンし、POST リクエストを送信します。また、同じリスナーを使用して、削除ボタンのクリックを検出し、DELETE リクエストを送信し、対応する付箋をリストから削除します。

これで、アプリケーションを起動して次のコマンドを実行できます:

node index.js

これで、ブラウザで http://localhost:3000 にアクセスし、フォームと既存の付箋を含むフォームを確認できるようになります。ページ。新しい付箋を入力し、[保存] をクリックすると、付箋がリストに追加されます。削除ボタンをクリックすると付箋が削除されます。

この記事では、Node.js、Express、および EJS ビューテンプレートを使用して、ユーザーが付箋を作成、編集、削除できる付箋メッセージボードを作成する方法について説明します。これは単なる単純な例ですが、これらのテクニックを実際のアプリケーションの実装にどのように使用できるかを示しています。

以上がnodejsはポストイットのメッセージボードを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Vue で名前付きスロットを設定する方法次の記事：Vue で名前付きスロットを設定する方法

続きを見る