极客教程Node.js 如何构建记事应用
在这篇文章中，我们将创建一个记事应用。记事应用基本上用于将信息或笔记存储在数据库中，以防丢失，就像Google Keep一样。
功能： 用户可以使用这个记事应用完成以下操作：
- 显示所有笔记
- 添加新笔记
- 删除笔记
- 更新笔记
方法： 我们将使用Body Parser来从表单中捕获用户输入的值，例如笔记内容和笔记ID，并将它们存储在集合中。然后，我们将使用EJS将笔记发送到网页。EJS是一种中间件，可以轻松地将数据从服务器文件（app.js或server.js）发送到网页。我们还将创建用于删除笔记的删除路由和用于更新笔记的更新路由。
实现： 下面是上述方法的逐步实现。
步骤1：项目设置
初始化NPM： 在终端中创建和定位项目文件夹，然后输入以下命令：
npm init -y
它初始化我们的Node应用程序并生成一个package.json文件。
安装依赖项： 在终端中找到您的根项目目录，并输入以下命令：
npm install express ejs body-parser
要在项目中安装Express，EJS和Body Parser作为依赖项
创建服务器文件： 创建一个’app.js’文件，内部请求Express模块，并创建一个常量’app’用于创建express模块的实例，然后将EJS设置为默认的视图引擎。
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
重新安排您的目录： 需要使用“.ejs”作为HTML文件的扩展名，以便在其中使用EJS。然后，您必须将视图目录内的每个“.ejs”文件移动到根目录中。EJS默认会在视图文件夹内查找“.ejs”文件。
使用EJS变量： 在更新后的.ejs文件中，您需要使用EJS变量来接收来自服务器文件的值。您可以像这样在EJS中声明变量
<%= variableName %>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<%= variableName %>
</body>
</html>
向变量发送数据：在您的服务器文件（app.js或index.js）中，您可以使用render方法发送一个EJS文件以及一些数据。
app.get("/", (req, res) => {
res.render("home",
{ variableName: "Hello Geeks!" })
})
const express = require('express')
const app = express()
app.set('view engine', 'ejs')
app.get("/", (req, res) => {
res.render("home", { variableName: "Hello Geeks!" })
})
app.listen(3000, (req, res) => {
console.log("App is running on port 3000")
})
从表单获取数据到app.js： 要接收表单的输入值，我们必须使用一个名为body-parser的node包。
安装body-parser：
npm install body-parser
需要body-parser模块：
const bodyParser = require('body-parser')
然后：
app.use( bodyParser.json() );
app.use(bodyParser.urlencoded({
extended: true
}));
然后我们可以使用请求对象处理表单数据。
步骤2：获取笔记： 我们有一个包含两个属性content和id的笔记数组。
const notes = [{
noteId: 1,
noteContent: "Hey, Geeks you can add your important notes here."
}
]
让我们将数组发送到我们的网页。在之前的步骤中，我们只是把一个值发送到变量，现在我们要发送完整的数组。
app.get("/", function (req, res) {
res.render("home", {
data: notes
})
})
由于在我们的数组中有很多元素（注释）是常见的，并且我们必须打印每一个元素，所以我们必须使用ForEach循环来遍历我们集合中的每一个元素，并在更新表单的文本区域字段中显示详细信息。我们将在更新表单的文本区域中显示详细信息，这样我们可以展示注释，同时也可以用它来更新注释。
<form action="/update" method="post">
<input type="number" style="display: none;"
name="noteId" value="<%= element.noteId %>">
<textarea type="text" rows="6" cols="30"
placeholder="Type Here..." name="noteContent"
value="<%= element.noteContent %>">
<%= element.noteContent %></textarea>
<br>
<button type="submit">Update</button>
</form>
步骤3：更新笔记： 现在，让我们看看如何在服务器文件（app.js）的更新路由中处理此更新表单。
app.post('/update', (req, res) => {
var noteId = req.body.noteId;
var noteContent = req.body.noteContent;
notes.forEach(note => {
if (note.noteId == noteId) {
note.noteContent = noteContent;
}
})
res.render("home", {
data: notes
})
})
对于更新笔记，我们必须创建一个更新的路由，我们将在其中获取请求的笔记ID并搜索具有相同笔记ID的元素，并将元素内容属性更改为来自更新表单的“noteContent”。
步骤4：删除笔记： 更新网页提供删除选项：我们必须创建一个表单，将要删除的笔记ID发送到服务器文件“app.js”。
<form action="/delete" method="post">
<input type="number" style="display: none;"
name="noteId" value="<%= element.noteId %>">
<button type="submit"
style="margin: 0px 4px;">✕</button>
</form>
要删除一个注释，我们需要创建一个删除路由，在该路由中我们将获取请求的注释id，并查找具有相同注释id的元素，并删除该元素。
app.post('/delete', (req, res) => {
var noteId = req.body.noteId;
var j = 0;
notes.forEach(note => {
j = j + 1;
if (note.noteId == noteId) {
notes.splice((j - 1), 1)
}
})
res.render("home", {
data: notes
})
})
完整代码： 以下是使用Node.js构建笔记应用的完整代码：
app.js
const express = require('express')
const bodyParser = require('body-parser')
const notes = [{
noteId: 1,
noteContent: "Hey, Geeks you can add your important notes here."
}
]
const app = express()
app.set('view engine', 'ejs')
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}))
app.get("/", function (req, res) {
res.render("home", {
data: notes
})
})
app.post("/", (req, res) => {
const noteContent = req.body.noteContent
const noteId = notes.length + 1;
notes.push({
noteId: noteId,
noteContent: noteContent
})
res.render("home", {
data: notes
})
})
app.post('/update', (req, res) => {
var noteId = req.body.noteId;
var noteContent = req.body.noteContent;
notes.forEach(note => {
if (note.noteId == noteId) {
note.noteContent = noteContent;
}
})
res.render("home", {
data: notes
})
})
app.post('/delete', (req, res) => {
var noteId = req.body.noteId;
var j = 0;
notes.forEach(note => {
j = j + 1;
if (note.noteId == noteId) {
notes.splice((j - 1), 1)
}
})
res.render("home", {
data: notes
})
})
app.listen(3000, (req, res) => {
console.log("App is running on port 3000")
})
home.ejs
<!DOCTYPE html>
<html>
<head>
<title>Note Keeper</title>
</head>
<body>
<h1>Note Keeper</h1>
<div style="display: flex;">
<% data.forEach(element=> { %>
<form action="/update" method="post">
<input type="number" style="display: none;"
name="noteId" value="<%= element.noteId %>">
<textarea type="text" rows="6" cols="30"
placeholder="Type Here..." name="noteContent"
value="<%= element.noteContent %>">
<%= element.noteContent %></textarea>
<br>
<button type="submit">Update</button>
</form>
<form action="/delete" method="post">
<input type="number" style="display: none;"
name="noteId" value="<%= element.noteId %>">
<button type="submit"
style="margin: 0px 4px;">✕</button>
</form>
<% }) %>
</div>
<h1>Add Note</h1>
<form action="/" method="post">
<input type="number" style="display: none;"
name="noteId">
<textarea type="text" rows="6" cols="30"
placeholder="Type Here..."
name="noteContent"></textarea>
<br>
<button type="submit">Add</button>
</form>
</body>
</html>
输出：
