Question

我最近从开始学习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>

但是在帖子方法中，我想发送一个HTML文件，而不是req.body.user.name，我显然可以像在主页上那样（/），我希望能够将一些变量包含到新的HTML文件中，可能看起来像是：

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

Answer 1

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

您也可以安装快速发电机

npm install express-generator -g

然后致电：

express

多亏了这一点，您将使用jade作为模板引擎设置快速项目（默认情况下），它应该允许您进一步发展。

Answer 2

我为此目的使用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>

将NodeJS中的已发布表单实现为HTML

2 个答案: