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>