Node.js 如何在插入文档集合时动态添加HTML内容

在本文中，您将学习如何使您的Node应用程序具有响应性，使其能够自动更改HTML内容并更新插入到集合中的新内容。

我们将设置一个中间件EJS，EJS使得从您的服务器文件（app.js或server.js）向静态页面（HTML）发送数据变得简单。之后，我们将使用Body Parser捕获表单中的用户输入值并将其存储在集合中，然后将集合的数据发送到静态页面。通过这种方式，当任何数据插入到表单中时，它会插入到集合中并自动更新HTML内容。

安装EJS： 定位到终端中的根项目目录并键入命令

npm install ejs

将EJS设置为视图引擎：

app.set('view engine', 'ejs');

重新排列您的目录： 需要将您的文件从 .html 重命名为 .ejs 以便在其中使用 EJS 。然后您需要将每个 .ejs 文件移动到根目录中的视图目录内。

使用EJS变量： 在您更新后的 .ejs 文件中，您需要使用 EJS变量 来接收来自服务器文件的值。

<!DOCTYPE html> 
<html> 
    
<head> 
    <title>Page Title</title> 
</head> 
    
<body> 
    <%= variableName %> 
</body> 
  
</html>

将数据发送到变量： 在您的服务器文件（app.js或index.js）中，您可以使用render方法发送带有一些数据的EJS文件。

const express = require('express') 
const app = express() 
app.set('view engine', 'ejs') 
  
app.get("/", (req, res) => { 
  res.render("home", { variableName: "Hello World!" }) 
}) 
  
app.listen(3000, (req, res) => { 
  console.log("App is running on port 3000") 
})

从表单获取数据到app.js： 要接收表单输入值，我们必须使用一个名为 body-parser 的节点软件包。

安装body-parser：

npm install body-parser

要求使用 body-parser 模块：

var bodyParser = require('body-parser')

然后

app.use( bodyParser.json() );      
    app.use(bodyParser.urlencoded({    
        extended: true
    })
)

然后我们可以使用请求对象处理表单数据。

示例： 假设有一个包含名称数据的集合，数据中有包含标题和内容的元素。所以我们必须把这些元素发送到Home文件，以便显示它。我们还同时创建一个负责处理首页发起的POST请求的Post路由，将表单输入存储并插入到集合中。

App.js文件

const express = require('express') 
const bodyParser = require('body-parser') 
const data = [{ 
    title: "This is first blog", 
    content: "This is first blog content."
}, 
{ 
    title: "This is second blog", 
    content: "This is second blog content."
}, 
{ 
    title: "This is third blog", 
    content: "This is third blog content."
} 
] 
  
const app = express() 
  
app.set('view engine', 'ejs') 
  
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ 
    extended: true
})) 
  
app.get("/", (req, res) => { 
    res.render("home", { 
        data: data 
    }) 
}) 
  
app.post("/", (req, res) => { 
    const inputTitle = req.body.inputTitle 
    const inputContent = req.body.inputContent 
    data.push({ 
        title: inputTitle, 
        content: inputContent 
    }) 
    res.render("home", { 
        data: data 
    }) 
}) 
  
app.listen(3000, (req, res) => { 
    console.log("App is running on port 3000") 
})

Home.ejs文件: 我们必须使用ForEach循环来遍历集合中的每个对象，并显示标题和内容。我们还需要设置一个用于提交新标题和内容的表单。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Page Title</title> 
</head> 
  
<body> 
    <% data.forEach(element => { %> 
    <h2><%= element.title %></h2> 
      
<p><%= element.content %></p> 
  
    <% }) %> 
  
    <form action="/" method="post"> 
        <input type="text" placeholder="Title" name="inputTitle"> 
        <input type="text" placeholder="Content" name="inputContent"> 
        <button type="submit">Submit</button> 
    </form> 
</body> 
  
</html>