使用 NodeJS 更改 HTML 显示的文本答案

【问题标题】：Use NodeJS to change what text HTML displays使用 NodeJS 更改 HTML 显示的文本
【发布时间】：2020-05-29 17:58:49
【问题描述】：

所以我创建了一个用于学习目的的网站。我希望有人能够在“登录”页面上输入名称，然后您将被发送到主页，该主页将显示欢迎（在此处输入名称）h1。我将包括我的代码和页面图片。请帮忙。

注意：我只是想操纵 DOM。我可以用 JQuery 做到这一点吗？

This is what the sign in page looks like

Here is the Code for the sign in page

Here is the what the Home page looks like

Here is the code for the home page

Here is the app.js code

感谢您在高级方面的帮助。

我也要把代码放在文本中。

app.js  

const express = require("express");
const bodyParser = require("body-parser");
const { JSDOM } = require("jsdom");
const { window } = new JSDOM("");
const $ = require("jquery")(window);

const app = express();

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static("public"));

app.get("/", function (req, res) {
  res.sendFile(__dirname + "/signin.html");
});

app.post("/", function (req, res) {
  res.sendFile(__dirname + "/index.html");
  const fname = req.body.fname;
  console.log(fname);
});

app.listen(3000, function (req, res) {
  console.log("Listening");
});

changeName = function (name) {
  window.document.querySelector("h1").innerText = name;
};

HTML For Home PAGE----------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Aquascaper</title>
    <!-- <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    /> -->
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <!-- Nav Bar -->

    <div class="bg-img">
      <div class="overlay">
        <div class="container">
          <img src="img/logo-long.svg" class="logo no-overlay" />
          <nav class="nav_links">
            <a href="">About</a>
            <a href="">Contact</a>
            <button class="calc-btn">
              Calculator
            </button>
          </nav>
        </div>
        <div class="showcase-text">
          <h1>Welcome,</h1>
        </div>
      </div>
    </div>

    <!-- Showcase -->

    <script
      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://code.jquery.com/jquery-3.5.1.js"
      integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
      crossorigin="anonymous"
    ></script>
  </body>
</html>

 HTML FOR SIGN IN PAGE ---------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SignIn</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="css/signin.css" />
  </head>
  <body>
    <div class="overlay">
      <form class="form-signin" method="POST">
        <img
          class="mb-4 logo"
          src="img/logo.svg"
          alt=""
          width="150"
          height="150"
        />
        <h1 class="">Enter Name to Enter Site</h1>
        <input
          name="fname"
          type="text"
          id="inputName"
          class="form-control"
          placeholder="First Name"
          required
          autofocus
        />
        <button class="btn btn-primary btn-lg" type="submit">
          Sign in
        </button>
      </form>
    </div>
  </body>
</html>

【问题讨论】：

嘿，我知道它最初可能听起来不太好，但你应该在模板引擎中实现它，比如把手，ejs 而不是原始 html，最好的部分是它们看起来与 HTML 完全相同，希望这会有所帮助
@harshitkohli 感谢您提供帮助。我是新手，不懂车把。
这就是为什么我建议你直接跳上它，简单来说它与 HTML 完全一样带有逻辑的 HTML 可以轻松解决这个问题后端渲染模板嵌入数据。

标签： javascript html jquery node.js express

【解决方案1】：

您不能从服务器端操作客户端 DOM。但是你可以使用ejs

npm install ejs

然后在您的服务器端页面上使用

app.get('/homepage', function(req, res) { res.render('homepage.ejs', {username: name}); });

在你的 homepage.ejs 上使用

<h1>Welcome, <%= username %></p>

【讨论】：