nodejs实现便利贴留言板

王林原创: 2023-05-08 11:53:0733浏览

便利贴是人们记录日常事务、备忘录和通知的有效方式，而现代技术将其迁移到了数字领域。本文将介绍如何使用 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('//m.sbmmt.com/m/', (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('//m.sbmmt.com/m/', {
    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 请求，并从列表中删除对应的便利贴。

现在我们可以启动应用程序，运行以下命令：