nodejs實作便利貼留言板-前端問答-PHP中文網

首頁

web前端

前端問答

nodejs實作便利貼留言板

王林

May 08, 2023 am 11:53 AM

便利貼是人們記錄日常事務、備忘錄和通知的有效方式，而現代技術將其遷移到了數位領域。本文將介紹如何使用 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>

登入後複製

此模板定義了一個包含兩個部分的頁面，一個是用於輸入新便利貼的表單，另一個是現有便利貼的清單。在 <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 方法監聽表單提交並發送 POST 請求。它還使用相同的監聽器來偵測刪除按鈕的單擊，發送 DELETE 請求，並從清單中刪除對應的便利貼。

現在我們可以啟動應用程序，運行以下命令：

node index.js

登入後複製

現在可以在瀏覽器中訪問http://localhost:3000，看到一個包含一個表單和現有便利貼的頁面。輸入新的便利貼，點選儲存，便利貼會被加入到清單中。點選刪除按鈕，便利貼就會被刪除。

本文介紹如何使用 Node.js、Express 和 EJS 視圖範本建立一個便利貼留言板，它允許使用者建立、編輯和刪除便利貼。這只是一個簡單的例子，但展示瞭如何使用這些技術來實現實際應用程式。

以上是nodejs實作便利貼留言板的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1657

CakePHP 教程

1415

Laravel 教程

1309

PHP教程

1257

C# 教程

1229

Related knowledge

React在HTML中的作用：增強用戶體驗 Apr 09, 2025 am 12:11 AM

React通過JSX與HTML結合，提升用戶體驗。 1)JSX嵌入HTML，使開發更直觀。 2)虛擬DOM機制優化性能，減少DOM操作。 3)組件化管理UI，提高可維護性。 4)狀態管理和事件處理增強交互性。

反應與前端：建立互動體驗 Apr 11, 2025 am 12:02 AM

React是構建交互式前端體驗的首選工具。 1)React通過組件化和虛擬DOM簡化UI開發。 2)組件分為函數組件和類組件，函數組件更簡潔，類組件提供更多生命週期方法。 3)React的工作原理依賴虛擬DOM和調和算法，提高性能。 4)狀態管理使用useState或this.state，生命週期方法如componentDidMount用於特定邏輯。 5)基本用法包括創建組件和管理狀態，高級用法涉及自定義鉤子和性能優化。 6)常見錯誤包括狀態更新不當和性能問題，調試技巧包括使用ReactDevTools和優

React的前端開發：優勢和技術 Apr 17, 2025 am 12:25 AM

React的優勢在於其靈活性和高效性，具體表現在：1)組件化設計提高了代碼重用性；2)虛擬DOM技術優化了性能，特別是在處理大量數據更新時；3)豐富的生態系統提供了大量第三方庫和工具。通過理解React的工作原理和使用示例，可以掌握其核心概念和最佳實踐，從而構建高效、可維護的用戶界面。

REACT組件：在HTML中創建可重複使用的元素 Apr 08, 2025 pm 05:53 PM

React組件可以通過函數或類定義，封裝UI邏輯並通過props接受輸入數據。 1)定義組件：使用函數或類，返回React元素。 2)渲染組件：React調用render方法或執行函數組件。 3)復用組件：通過props傳遞數據，構建複雜UI。組件的生命週期方法允許在不同階段執行邏輯，提升開發效率和代碼可維護性。

React的生態系統：庫，工具和最佳實踐 Apr 18, 2025 am 12:23 AM

React生態系統包括狀態管理庫（如Redux）、路由庫（如ReactRouter）、UI組件庫（如Material-UI）、測試工具（如Jest）和構建工具（如Webpack）。這些工具協同工作，幫助開發者高效開發和維護應用，提高代碼質量和開發效率。

反應：JavaScript庫用於Web開發的功能 Apr 18, 2025 am 12:25 AM

React是由Meta開發的用於構建用戶界面的JavaScript庫，其核心是組件化開發和虛擬DOM技術。 1.組件與狀態管理：React通過組件（函數或類）和Hooks（如useState）管理狀態，提升代碼重用性和維護性。 2.虛擬DOM與性能優化：通過虛擬DOM，React高效更新真實DOM，提升性能。 3.生命週期與Hooks：Hooks（如useEffect）讓函數組件也能管理生命週期，執行副作用操作。 4.使用示例：從基本的HelloWorld組件到高級的全局狀態管理（useContext和