nodejs는 포스트잇 게시판을 구현합니다.
- 王林원래의
- 2023-05-08 11:53:07622검색
포스트잇은 사람들이 일상 업무, 메모, 알림을 기록하는 효과적인 방법이며, 현대 기술은 이를 디지털 영역으로 마이그레이션했습니다. 이 기사에서는 Node.js를 사용하여 사용자가 스티커 메모를 생성, 편집 및 삭제할 수 있는 간단한 스티커 메모 게시판을 만드는 방법을 소개합니다.
먼저 Node.js와 Express 프레임워크를 설치해야 합니다. 다음 명령을 사용하여 프로젝트를 생성합니다.
mkdir notepad cd notepad npm init npm install express --save
다음으로 index.js라는 파일을 생성하고 다음 콘텐츠를 추가합니다. 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
node index.js이 코드 조각에서는 먼저 Express 프레임워크를 가져와서 생성했습니다.
app이라는 애플리케이션입니다. 다음으로 애플리케이션의 뷰 템플릿 엔진을 ejs로 설정하고 express.static 미들웨어를 사용하여 public 디렉토리에 정적 리소스를 게시했습니다. 스타일시트, JavaScript 파일, 이미지 등 그런 다음 / 경로 값을 정의하고 반환된 응답에서 res.render 메서드를 호출하여 index.ejs 뷰 템플릿을 렌더링합니다. 마지막으로 포트 3000에서 서버를 시작하고 서버가 실행 중임을 나타내는 메시지를 콘솔에 인쇄합니다. 다음으로 index.ejs라는 템플릿을 만들고 다음 콘텐츠를 추가하세요. rrreee
이 템플릿은 두 부분으로 구성된 페이지를 정의합니다. 하나는 새 스티커 메모 양식을 입력하기 위한 부분이고 다른 하나는 목록입니다. 기존 스티커 메모 중scripts.js 파일은 양식 제출 및 스티커 메모 삭제를 처리하는 <script> 태그에 도입되었습니다. 다음으로 notes.js라는 파일을 만들고 다음 콘텐츠를 추가하세요. 🎜rrreee🎜이 파일은 세 가지 정적 메서드가 있는 Note 클래스를 정의합니다. all , 추가 및 제거. Note.all 메서드는 현재 스티커 메모 배열을 반환하는 반면, Note.add 메서드는 배열에 새 스티커 메모를 추가합니다. Note.remove 메소드는 주어진 ID로 식별된 스티커 메모를 배열에서 제거합니다. 🎜🎜다음으로 controllers.js라는 파일을 만들고 다음 콘텐츠를 추가합니다. 🎜rrreee🎜이 파일은 home, save 세 가지 컨트롤러 메서드를 정의합니다. 홈페이지에 대한 요청을 처리하고, 스티커 메모를 저장하고, 스티커 메모를 삭제하려면 remove를 사용하세요. home 메소드는 모든 스티커 메모를 매개변수로 사용하여 index.ejs 템플릿을 렌더링합니다. save 메소드는 요청 본문에서 스티커 메모 내용을 가져오고 Note.add 메소드를 사용하여 새 스티커 메모 개체를 생성합니다. remove 메소드는 요청 매개변수에서 삭제할 스티커 메모 ID를 얻고 Note.remove를 사용합니다. 메서드는 스티커 메모 배열에서 스티커 메모를 제거합니다. 🎜🎜마지막으로 클라이언트 측에서 양식 제출 및 삭제 요청을 처리하기 위해 scripts.js라는 파일을 만듭니다. 다음 콘텐츠를 추가하세요. 🎜rrreee🎜이 파일은 새 스티커 메모의 콘텐츠가 포함된 HTML 조각을 생성하고 이를 스티커 메모 목록에 추가하는 addNoteToList 함수를 정의합니다. 그런 다음 EventTarget.addEventListener 메서드를 사용하여 양식 제출을 수신하고 POST 요청을 보냅니다. 또한 동일한 리스너를 사용하여 삭제 버튼 클릭을 감지하고, DELETE 요청을 보내고, 목록에서 해당 스티커 메모를 제거합니다. 🎜🎜이제 애플리케이션을 실행하고 다음 명령을 실행할 수 있습니다. 🎜rrreee🎜이제 브라우저에서 http://localhost:3000을 방문하여 양식과 기존 스티커 메모가 포함된 페이지를 볼 수 있습니다. 새 스티커 메모를 입력하고 저장을 클릭하면 스티커 메모가 목록에 추가됩니다. 삭제 버튼을 클릭하면 스티커 메모가 삭제됩니다. 🎜🎜이 문서에서는 Node.js, Express 및 EJS 보기 템플릿을 사용하여 사용자가 스티커 메모를 생성, 편집 및 삭제할 수 있는 스티커 메모 게시판을 만드는 방법을 설명합니다. 이는 단순한 예일 뿐이지만 이러한 기술을 사용하여 실제 애플리케이션을 구현하는 방법을 보여줍니다. 🎜위 내용은 nodejs는 포스트잇 게시판을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!