Javascript 节点js呈现帖子数据和原始html_Javascript_Node.js

Javascript 节点js呈现帖子数据和原始html

javascript node.js

Javascript 节点js呈现帖子数据和原始html,javascript,node.js,Javascript,Node.js,今天我刚开始学习node.js，我正在尝试使用EJS模板引擎呈现post数据和原始html 我试图根据stats中的if-else-if语句呈现post数据和原始html 我不确定这是否可以做到，所以我希望有人能告诉我这是否可以 app.js： const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.urlen

今天我刚开始学习node.js，我正在尝试使用EJS模板引擎呈现post数据和原始html

我试图根据stats中的if-else-if语句呈现post数据和原始html

我不确定这是否可以做到，所以我希望有人能告诉我这是否可以

app.js：

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

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json({ extended: true }));
app.set('view engine', 'ejs');

app.get("/", (req, res) => {  
  res.render(__dirname + "/views/index");
});

app.post('/stats', (req, res) => {
  var first_name = req.body.firstname;
  var last_name = req.body.lastname;
  
  if (!first_name) {
    var html_code = "<b>You didn't add a first name</b>";
    
    res.render(__dirname + "/views/stats", {
      htmlcode: html_code
    });
    
  } else if (!last_name) {
    var html_code = "<b>You didn't add a last name</b>";
    
    res.render(__dirname + "/views/stats", {
      htmlcode: html_code
    });
    
  } else if (first_name && last_name) {
    var html_code = "<b>First name is </b><%= first_name %> <br> <b>Last name is </b><%= last_name %>";
    
    res.render(__dirname + "/views/stats", {
      htmlcode: html_code,
      firstname: first_name,
      lastname: last_name
    });
    
  } 
});

const listener = app.listen(process.env.PORT, () => {
  console.log("Your app is listening on port " + listener.address().port);
});

const express=require（'express'）；
const bodyParser=require（'body-parser'）；
常量app=express（）；
use（bodyParser.urlencoded（{extended:true}））；
use（bodyParser.json（{extended:true}））；
应用程序集（“查看引擎”、“ejs”）；
app.get（“/”，（请求，res）=>{
res.render（uu dirname+“/views/index”）；
});
app.post（'/stats'，（req，res）=>{
var first_name=req.body.firstname；
var last_name=req.body.lastname；
如果（！名字）{
var html_code=“您没有添加名字”；
res.render（uu dirname+“/views/stats”{
htmlcode:html\u代码
});
}如果（！姓氏）{
var html_code=“您没有添加姓氏”；
res.render（uu dirname+“/views/stats”{
htmlcode:html\u代码
});
}else if（名字和姓氏）{
var html_code=“名字是
姓是”；
res.render（uu dirname+“/views/stats”{
htmlcode:html\U代码，
名字：名字，
姓氏：姓氏
});
} 
});
const listener=app.listen（process.env.PORT，（）=>{
log（“您的应用程序正在侦听端口”+listener.address（）.port）；
});

视图/index.ejs：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Send Stats</title>
  </head>
  <body>
    <form action="https://server.com/stats" method="POST">
      firstname: <input type="text" name="firstname" /><br/>
      lastname: <input type="text" name="lastname" /><br/>
      <button type="submit">Send</button>
    </form>
  </body>
</html>


发送统计数据
名字：

姓氏：

发送

视图/stats.ejs：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>name stats</title>
  </head>
  <body>
    <div><%= htmlcode %></div>
  </body>
</html>


姓名统计

输出：

<b>First name is </b><%= first_name %> <br> <b>Last name is </b><%= last_name %>

名字是
姓是

更改

var html_code = "<b>First name is </b><%= first_name %> <br> <b>Last name is </b><%= last_name %>";

要了解更多信息，请阅读

它看起来不错。你测试过服务器了吗？是的，我在服务器上测试过，上面的输出就是我看到的。哦，谢谢！但是现在的输出是这样的：名字是John
姓是Doe我还看到html标记吗？使用


var html_code = `<b>First name is </b>${first_name} <br> <b>Last name is </b>${last_name}`;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>name stats</title>
  </head>
  <body>
    <div><b>First name is </b><%= first_name %> <br> <b>Last name is </b><%= last_name %></div>
  </body>
</html>