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

HTML和React：标记与组件之间的关系Apr 12, 2025 am 12:03 AM

HTML和React的关系是前端开发的核心，它们共同构建现代Web应用的用户界面。1)HTML定义内容结构和语义，React通过组件化构建动态界面。2)React组件使用JSX语法嵌入HTML，实现智能渲染。3)组件生命周期管理HTML渲染，根据状态和属性动态更新。4)使用组件优化HTML结构，提高可维护性。5)性能优化包括避免不必要渲染，使用key属性，保持组件单一职责。

反应与前端：建立互动体验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 10, 2025 am 09:34 AM

React是一个用于构建用户界面的JavaScript库，其核心是组件化和状态管理。1)通过组件化和状态管理简化UI开发。2)工作原理包括调和和渲染，优化可通过React.memo和useMemo实现。3)基本用法是创建并渲染组件，高级用法包括使用Hooks和ContextAPI。4)常见错误如状态更新不当，可使用ReactDevTools调试。5)性能优化包括使用React.memo、虚拟化列表和CodeSplitting，保持代码可读性和可维护性是最佳实践。

React在HTML中的作用：增强用户体验Apr 09, 2025 am 12:11 AM

React通过JSX与HTML结合，提升用户体验。1)JSX嵌入HTML，使开发更直观。2)虚拟DOM机制优化性能，减少DOM操作。3)组件化管理UI，提高可维护性。4)状态管理和事件处理增强交互性。

REACT组件：在HTML中创建可重复使用的元素Apr 08, 2025 pm 05:53 PM

React组件可以通过函数或类定义，封装UI逻辑并通过props接受输入数据。1)定义组件：使用函数或类，返回React元素。2)渲染组件：React调用render方法或执行函数组件。3)复用组件：通过props传递数据，构建复杂UI。组件的生命周期方法允许在不同阶段执行逻辑，提升开发效率和代码可维护性。