Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >nodejs melaksanakan papan mesej post-it
nodejs melaksanakan papan mesej post-it
- 王林asal
- 2023-05-08 11:53:07623semak imbas
Nota post-it ialah cara yang berkesan untuk orang ramai merekodkan urusan harian, memo dan pemberitahuan, dan teknologi moden telah memindahkannya ke alam digital. Artikel ini akan memperkenalkan cara menggunakan Node.js untuk mencipta papan mesej nota melekit ringkas yang membolehkan pengguna mencipta, mengedit dan memadam nota melekit.
Pertama, anda perlu memasang rangka kerja Node.js dan Express. Cipta projek menggunakan arahan berikut:
mkdir notepad cd notepad npm init npm install express --save
Seterusnya, buat fail bernama index.js dan tambah kandungan berikut:
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}`);
});
Dalam coretan ini, kami mula-mula mengimport rangka kerja Express , dan mencipta aplikasi bernama app. Seterusnya, kami menetapkan enjin templat paparan aplikasi kepada ejs dan menggunakan express.static middleware untuk menerbitkan sumber statik dalam direktori public, seperti helaian gaya, fail JavaScript dan imej. Kemudian, kami mentakrifkan nilai laluan / dan memanggil kaedah res.render pada respons yang dikembalikan untuk memaparkan templat paparan index.ejs. Akhir sekali, kami memulakan pelayan pada port 3000 dan mencetak mesej ke konsol untuk menunjukkan bahawa pelayan sedang berjalan.
Seterusnya, cipta templat bernama index.ejs dan tambah kandungan berikut:
<!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>
Templat ini mentakrifkan halaman dengan dua bahagian, satu untuk memasukkan nota melekit kemudahan baharu dan satu lagi ialah senarai nota melekat sedia ada. Memperkenalkan fail <script> dalam teg scripts.js, yang akan mengendalikan penyerahan borang dan pemadaman nota melekit.
Seterusnya, cipta fail bernama notes.js dan tambah kandungan berikut:
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;
Fail ini mentakrifkan kelas Note yang mempunyai tiga kaedah statik: all, add dan remove. Kaedah Note.all mengembalikan tatasusunan nota melekit semasa, manakala kaedah Note.add menambah nota melekit baharu pada tatasusunan. Kaedah Note.remove mengalih keluar nota melekit yang dikenal pasti dengan ID yang diberikan daripada tatasusunan.
Seterusnya, buat fail bernama controllers.js dan tambah kandungan berikut:
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();
};
Fail ini mentakrifkan tiga kaedah pengawal home, save dan remove untuk mengendalikan permintaan untuk Laman Utama Halaman, Simpan Nota dan Padam Nota. Kaedah home menjadikan semua nota melekit sebagai parameter kepada templat index.ejs; kaedah save mendapatkan kandungan nota melekit daripada badan permintaan dan mencipta objek nota melekit baharu menggunakan kaedah Note.add kaedah mendapatkan kandungan nota melekit daripada badan permintaan Dapatkan ID nota melekit untuk dipadamkan daripada parameter dan gunakan kaedah remove untuk memadamkan nota melekit daripada tatasusunan nota melekit. Note.remove
untuk mengendalikan penyerahan borang dan memadamkan permintaan di sisi pelanggan. Tambahkan kandungan berikut: 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();
}
});Fail ini mentakrifkan fungsi yang akan mencipta serpihan HTML yang mengandungi kandungan nota melekit baharu dan menambahkannya pada senarai nota melekit. Ia kemudian menggunakan kaedah addNoteToList untuk mendengar penyerahan borang dan menghantar permintaan POST. Ia juga menggunakan pendengar yang sama untuk mengesan klik butang padam, menghantar permintaan PADAM dan mengalih keluar nota melekit yang sepadan daripada senarai. EventTarget.addEventListener
node index.jsKini kita boleh melawati http://localhost:3000 dalam penyemak imbas dan melihat borang yang mengandungi borang dan nota melekit sedia ada muka surat. Masukkan nota melekit baharu, klik Simpan dan nota melekit akan ditambahkan pada senarai. Klik butang padam dan nota melekit akan dipadamkan. Artikel ini menerangkan cara menggunakan templat paparan Node.js, Express dan EJS untuk mencipta papan mesej nota melekit yang membolehkan pengguna mencipta, mengedit dan memadam nota melekit. Ini hanyalah contoh mudah, tetapi menunjukkan cara teknik ini boleh digunakan untuk melaksanakan aplikasi dunia sebenar.
Atas ialah kandungan terperinci nodejs melaksanakan papan mesej post-it. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!