所属分类：web前端开发
便利贴是人们记录日常事务、备忘录和通知的有效方式，而现代技术将其迁移到了数字领域。本文将介绍如何使用 Node.js 创建一个简单的便利贴留言板，让用户可以创建、编辑和删除便利贴。
首先，需要安装 Node.js 和 Express 框架。使用以下命令创建项目：
mkdir notepad cd notepad npm init npm install express --save登录后复制
接下来，创建一个名为 index.js 的文件，并添加以下内容：
微博登录
QQ登录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实现便利贴留言板的详细内容，更多请关注zzsucai.com其它相关文章！
