Fatal编程技术网
  • javascript/
  • Javascript 使用NodeJS更改HTML显示的文本

Javascript 使用NodeJS更改HTML显示的文本

javascript html jquery node.js express

Javascript 使用NodeJS更改HTML显示的文本,javascript,html,jquery,node.js,express,Javascript,Html,Jquery,Node.js,Express,所以我创建了一个学习网站。我希望有人能够在“登录”页面上输入您的姓名，然后您将被发送到主页，在那里它将显示欢迎（在这里输入姓名）h1。我将包括我的代码和页面的图片。请帮忙 注意：我只是想操纵DOM。我可以用JQuery来实现吗 感谢您在高级课程中的帮助 我也将把代码放在文本中 app.js const express = require("express"); const bodyParser = require("body-parser"); const { JSDOM } =

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

注意：我只是想操纵DOM。我可以用JQuery来实现吗

感谢您在高级课程中的帮助

我也将把代码放在文本中

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>

app.js
const express=要求（“express”）；
const bodyParser=require（“body parser”）；
const{JSDOM}=require（“JSDOM”）；
const{window}=newJSDOM（“”）；
const$=require（“jquery”）（窗口）；
常量app=express（）；
use（bodyParser.urlencoded（{extended:true}））；
应用程序使用（快速静态（“公共”）；
应用程序获取（“/”，函数（请求，恢复）{
res.sendFile（uu dirname+“/sign.html”）；
});
应用程序post（“/”，功能（请求，回复）{
res.sendFile（uu dirname+“/index.html”）；
const fname=req.body.fname；
console.log（fname）；
});
应用程序监听（3000，功能（请求，恢复）{
console.log（“监听”）；
});
changeName=函数（名称）{
window.document.querySelector（“h1”）.innerText=名称；
};
主页的HTML----------------------------------------------------------------
水景
计算器
欢迎
用于登录页面的HTML---------------------------------------------------------------------
签名
输入名称以进入站点
登录
您无法从服务器端操作客户端DOM。但是你可以使用

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

app.get（'/homepage'，函数（req，res）{
res.render（'homepage.ejs'，{username:name}）；
});

在您的主页上。ejs使用


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



欢迎您


嘿，我知道一开始听起来可能不太好，但您应该在模板引擎中实现它，比如Handlebar、ejs，而不是原始html，最好的部分是它们看起来和html完全一样，希望如此helps@harshitkohli谢谢你的帮助。我是新来的，不知道把手。这就是为什么我建议你直接跳到它的完全相同的HTML在简单的话HTML与逻辑它会很容易解决这个问题后端渲染与嵌入数据的模板。

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