nodejs melaksanakan papan mesej post-it
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();
}
}); 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.js
Atas ialah kandungan terperinci nodejs melaksanakan papan mesej post-it. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1393
52
1207
24
Peranan React dalam HTML: Meningkatkan Pengalaman Pengguna
Apr 09, 2025 am 12:11 AM
React menggabungkan JSX dan HTML untuk meningkatkan pengalaman pengguna. 1) JSX membenamkan HTML untuk menjadikan pembangunan lebih intuitif. 2) Mekanisme DOM maya mengoptimumkan prestasi dan mengurangkan operasi DOM. 3) UI pengurusan berasaskan komponen untuk meningkatkan kebolehkerjaan. 4) Pengurusan negeri dan pemprosesan acara meningkatkan interaktiviti.
Komponen React: Membuat unsur -unsur yang boleh diguna semula di HTML
Apr 08, 2025 pm 05:53 PM
Komponen React boleh ditakrifkan oleh fungsi atau kelas, merangkumi logik UI dan menerima data input melalui prop. 1) Tentukan komponen: Gunakan fungsi atau kelas untuk mengembalikan elemen bertindak balas. 2) Rendering Component: React Call Render Kaedah atau Melaksanakan Komponen Fungsi. 3) Komponen multiplexing: Lulus data melalui prop untuk membina UI yang kompleks. Pendekatan kitaran hayat komponen membolehkan logik dilaksanakan pada peringkat yang berbeza, meningkatkan kecekapan pembangunan dan pemeliharaan kod.
Apakah batasan sistem kereaktifan Vue 2 berkenaan dengan perubahan array dan objek?
Mar 25, 2025 pm 02:07 PM
Sistem Reaktiviti Vue 2 bergelut dengan tetapan indeks array langsung, pengubahsuaian panjang, dan penambahan/penghapusan harta benda objek. Pemaju boleh menggunakan kaedah mutasi Vue dan vue.set () untuk memastikan kereaktifan.
React and the Frontend: Membina Pengalaman Interaktif
Apr 11, 2025 am 12:02 AM
React adalah alat pilihan untuk membina pengalaman front-end interaktif. 1) React memudahkan pembangunan UI melalui komponen dan DOM maya. 2) Komponen dibahagikan kepada komponen fungsi dan komponen kelas. Komponen fungsi adalah lebih mudah dan komponen kelas menyediakan lebih banyak kaedah kitaran hayat. 3) Prinsip kerja React bergantung kepada algoritma DOM dan perdamaian maya untuk meningkatkan prestasi. 4) Pengurusan negeri menggunakan useState atau ini. Kaedah kitaran hayat seperti ComponentDidMount digunakan untuk logik tertentu. 5) Penggunaan asas termasuk membuat komponen dan pengurusan negeri, dan penggunaan lanjutan melibatkan cangkuk tersuai dan pengoptimuman prestasi. 6) Kesalahan biasa termasuk kemas kini status yang tidak betul dan isu prestasi, kemahiran debugging termasuk menggunakan reactdevtools dan sangat baik
Apakah faedah menggunakan TypeScript dengan React?
Mar 27, 2025 pm 05:43 PM
TypeScript meningkatkan pembangunan React dengan menyediakan keselamatan jenis, meningkatkan kualiti kod, dan menawarkan sokongan IDE yang lebih baik, dengan itu mengurangkan kesilapan dan meningkatkan kebolehkerjaan.
Bagaimanakah anda boleh menggunakan UserEducer untuk Pengurusan Negeri Kompleks?
Mar 26, 2025 pm 06:29 PM
Artikel ini menerangkan menggunakan UserEducer untuk Pengurusan Negeri Kompleks dalam React, memperincikan manfaatnya ke atas UseState dan bagaimana untuk mengintegrasikannya dengan useeffect untuk kesan sampingan.
Apakah komponen berfungsi dalam vue.js? Bilakah mereka berguna?
Mar 25, 2025 pm 01:54 PM
Komponen fungsional dalam vue.js adalah cangkuk kitaran hidup, ringan, dan kekurangan kitaran, sesuai untuk memberikan data tulen dan mengoptimumkan prestasi. Mereka berbeza daripada komponen yang berkesudahan dengan tidak mempunyai keadaan atau kereaktifan, menggunakan fungsi render secara langsung, a
Bagaimana anda memastikan bahawa komponen React anda boleh diakses? Alat apa yang boleh anda gunakan?
Mar 27, 2025 pm 05:41 PM
Artikel ini membincangkan strategi dan alat untuk memastikan komponen React boleh diakses, memberi tumpuan kepada HTML semantik, atribut ARIA, navigasi papan kekunci, dan kontras warna. Ia mengesyorkan menggunakan alat seperti ESLINT-PLUGIN-JSX-A11Y dan AXE-CORE untuk TESTI
