从 NodeJS 实现 Posted Form 到 HTML答案

【问题标题】：Implement Posted Form from NodeJS into HTML从 NodeJS 实现 Posted Form 到 HTML
【发布时间】：2023-03-10 15:38:01
【问题描述】：

我最近从开始学习 PHP 转向 NodeJS，因为我对 JS 有更多的了解。我的问题是如何将发布的表单数据显示到 HTML 文件中？

server.js

const app = require('express')(),
      bodyParser = require('body-parser'),
      path = require('path');

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

app.get('/', (req, res) => res.sendFile(path.join(__dirname, 'html/index.html')));
app.post('/student', (req, res) => res.send(req.body.user.name));

app.listen(3000, (req, res) => console.log('Listening on port 3000.'));

html/index.html

<body>
    <form method='post' action='post'>
        <input type='text' name = 'user[name]'>
        <input type='submit' value='submit'>
    </form>
</body>

但是在 post 方法中，我想发送一个 HTML 文件，而不是 req.body.user.name，我显然可以像在主页 (/) 上那样做，我想能够在新的 HTML 文件中包含一些变量，可能类似于以下内容：

<body>
    <h1><? req.body.user.name + 's page. ?></h1>
    <!-- rest of code -->
</body>

【问题讨论】：

您在寻找模板吗？ expressjs.com/en/guide/using-template-engines.html

标签： javascript html node.js server

【解决方案1】：

我为此使用ejs 模板，它非常易于使用。

首先，使用npm install ejs -s 下载ejs 并在主目录中创建一个views 文件夹。在该文件夹中，创建一个普通的 html 文件，但这次的扩展名是 .ejs。

App Directory

-views/myFile.ejs
      /post.ejs
-html/index.html
-server.js

现在让我们转到您的 server.js 文件。你需要使用app.set('view engine', 'ejs') 来运行ejs。当您执行res.render() 时，您没有指定路径，因为程序已经在主目录中查找views/ 文件夹。

const app = require('express')(),
      bodyParser = require('body-parser'),
      path = require('path');

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

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

app.get('/', (req, res) => res.render('myFile.ejs', {username: 'myUser'}));
app.post('/student', function(req, res){
    var username = req.body.user.name;
    res.render('post.ejs', {user: username});
});

app.listen(3000, (req, res) => console.log('Listening on port 3000.'));

这是我们的示例myFile.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <p><%=username%></p>
  </body>
</html>

这是我们的示例post.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <p><%=user%></p>
  </body>
</html>

【讨论】：

【解决方案2】：

你应该使用一些模板引擎，快递页面https://expressjs.com/en/guide/using-template-engines.html有教程。您总是可以编写自己的模块来处理这个问题。

你也可以安装 express 生成器

npm install express-generator -g

然后调用：

express

多亏了这个，您将设置以jade作为模板引擎的快速项目（它是默认的），它应该可以让您进一步进步。

【讨论】：