为单个 HTML 页面使用 2 个或多个 url答案

【问题标题】：Use 2 or more url for a single HTML Page为单个 HTML 页面使用 2 个或多个 url
【发布时间】：2021-09-11 20:54:14
【问题描述】：

我有一个关于 Node Express 的重要问题。我有一个单独的 html 页面，它被分成三个带有 id 的 div（登录表单、注册表单和忘记密码）。现在，我希望为每个 div 使用不同的 url。如何在 node express 中做到这一点？

let forgot_password_enable = document.querySelector('#forgot')
let signup_form_enable = document.querySelector("#signup")
let login_form_enable1 = document.querySelector("#login-enable")
let login_form_enable2 = document.querySelector("#go-login")

let forgot_password_form = document.querySelector("#forgot-password")
let login_form = document.querySelector("#login-form")
let signup_form = document.querySelector("#signup-form")

//Enable forgot password form using "Forgotton Password?". 
forgot_password_enable.addEventListener('click', () => {
  if (forgot_password_form.style.display != 'none' && signup_form.style.display != 'none' && login_form.style.display != 'none') {
    forgot_password_form.style.display = 'none'
    signup_form.style.display = 'none'
  }
  if (forgot_password_form.style.display == 'none' &&
    signup_form.style.display == 'none' && login_form.style.display != 'none') {
    forgot_password_form.style.display = 'block'
    login_form.style.display = 'none'
  }
})

//Enable Sign-up Form using "Didn't have an account?"
signup_form_enable.addEventListener('click', () => {
  if (forgot_password_form.style.display != 'none' && signup_form.style.display != 'none' && login_form.style.display != 'none') {
    forgot_password_form.style.display = 'none'
    signup_form.style.display = 'none'
  }
  if (forgot_password_form.style.display == 'none' && signup_form.style.display == 'none' && login_form.style.display != 'none') {
    login_form.style.display = 'none';
    signup_form.style.display = 'block'
  }
})

//Enable Login Form using "Already have an account?"
login_form_enable1.addEventListener('click', () => {
  if (forgot_password_form.style.display != 'none' && signup_form.style.display != 'none' && login_form.style.display != 'none') {
    forgot_password_form.style.display = 'none'
    login_form.style.display = 'none'
  }
  if (forgot_password_form.style.display == 'none' && login_form.style.display == 'none' && signup_form.style.display != 'none') {
    signup_form.style.display = 'none'
    login_form.style.display = 'block'
  }
})

//Enable Login Form using "Back to Login Page."
login_form_enable2.addEventListener('click', () => {
  if (forgot_password_form.style.display != 'none' && signup_form.style.display != 'none' && login_form.style.display != 'none') {
    login_form.style.display = 'none'
    signup_form.style.display = 'none'
  }
  if (forgot_password_form.style.display != 'none' && login_form.style.display == 'none' && signup_form.style.display == 'none') {
    forgot_password_form.style.display = 'none'
    login_form.style.display = 'block'
  }
})

let email = document.getElementById('email')

email.addEventListener('input', () => {
  emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return emailRegex.test(val);
}, 'Invalid e-mail.');

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../CSS/login-signup3.css">
  <title>Login/Register</title>
</head>

<body>
  <h3 id="home"><a href="index.html">Back to Home</a></h3>
  <div class="form-container">
    <!-- To enable the Forgot Password form.
Forgot Password<input type="checkbox" name="forgot_password" id="enable_password">

To enable Login form from Sign-up form.
Login Form<input type="checkbox" name="login" id="login-enable">

To enable Sign-up form from Log-in form
Signup Form<input type="checkbox" name="signup" id="signup-enable">

To enable Login-form when "signup-enable" input box is checked by clicking on the "Already have an account?"
Login Form<input type="checkbox" name="login" id="login-enable2"> -->


    <div id="login-form">
      <form action="#" id="login">

        <!--Username or Email Input.-->
        <div class="usermail">
          <label for="useremail"><img src="../logos and images/username.png" alt="Image not found!"></label>
          <input type="email" name="Email" id="useremail" placeholder="Username or Email" required><b style="color: red;">*</b>
        </div><br>

        <!--Password Input.-->
        <div class="password">
          <label for="password"><img src="../logos and images/password.png" alt="Image not found!"></label>
          <input type="password" name="Password" id="password" required placeholder="Password"><b style="color: red;">*</b>
        </div><br>

        <!--Login and Clear Button, Forgotton Password and Signup-form enable-->
        <div class="log-frgt">
          <input type="submit" value="Log in" id="signin">
          <input type="reset" value="Clear" id="reset">
          <span id="forgot" style="color: royalblue;cursor: default">Forgotton Password?</span>
        </div><br>
        <span id="signup" style="color: royalblue;cursor: default">Didn't have an account?</span>
      </form>
    </div>

    <!--Sign-up Form-->
    <div id="signup-form">
      <form action="" method="POST">
        <!--Name input box.-->
        <div class="name">
          <h4>Name</h4>
          <div class="firstlastname">
            <label for="first-name" style="font-weight: bolder;">First Name</label>
            <input type="text" name="firstname" id="first-name" placeholder="First Name" required><b style="color: red;">*</b>

            <br><label for="last-name" style="font-weight: bolder;">Last Name</label>
            <input type="text" name="lastname" id="last-name" placeholder="Last Name (Optional)">
          </div>
        </div><br>

        <!--Father Name Input Box.-->
        <div class="father-name">
          <label for="father-name" style="font-weight: bolder;">Father Name</label>
          <input type="text" name="father-name" id="father-name"><b style="color: red;">*</b>
        </div>

        <!--Gender Input-->
        <div class="gender">
          <h4>Gender</h4>
          <!--Male-->
          <label for="male">Male</label>
          <input type="radio" name="gender" id="male" value="Male">

          <!--Female-->
          <label for="female">Female</label>
          <input type="radio" name="gender" id="female" value="Female">

          <!--Third Gender-->
          <label for="other-gender">Other</label>
          <input type="radio" name="gender" id="other" value="Other">
        </div>

        <!--Username Input.-->
        <div class="username">
          <label for="username"><img src="./logos and images/username.png" alt="Image not found!"></label>
          <input type="text" name="Username" id="username" placeholder="Choose your Username" required><strong style="color: red;">*</strong>
        </div><br>

        <!--Email Input.-->
        <div class="email">
          <label for="email"><img src="./logos and images/username.png" alt="Image not found!"></label>
          <input type="email" name="Email" id="email" placeholder="Enter your Email" required><strong style="color: red;">*</strong>
        </div><br>

        <!--Password & Confirm Password Input Box.-->
        <div class="password">
          <!--Password-->
          <label for="password"><img src="../logos and images/password.png" alt="Image not found!"></label>
          <input type="password" name="password" placeholder="Create Password" required><b style="color: red;">*</b>
        </div><br>

        <!--Confirm Password.-->
        <div class="cnfm-password">
          <label for="cnfm-password"><img src="../logos and images/password.png" alt="Image not found!"></label>
          <input type="password" name="cpassword" id="cnfm-password" placeholder="Confirm Password" required><b style="color: red;">*</b>
        </div><br>

        <!--Mobile Number Input-->
        <div class="mobile">
          <label for="mobile"><img src="../logos and images/mobile.png" alt=""></label>
          <input type="number" name="Mobile_No." id="mobile" placeholder="Enter your Number"><strong style="color: red;">*</strong>
          <input type="submit" value="Send">
        </div><br>

        <!--OTP Input.-->
        <div class="otp">
          <label for="otp" style="font-weight: bold;">OTP</label>
          <input type="number" name="OTP" id="otp" placeholder="Enter your OTP" required><strong style="color: red;">*</strong>
          <input type="submit" value="Verify" id="otp-verify">
        </div><br>

        <!--Sign-up, Clear Button and Log-in form show-->
        <div class="btn-logshow">
          <input type="submit" value="Register" id="register">
          <input type="reset" value="Clear" id="clear">
          <span id="login-enable" style="color: royalblue;cursor: default;">Already have an account?</span>
        </div>
      </form>
    </div>

    <div id="forgot-password">
      <form action="#">
        <!--Email Input.-->
        <div class="email2">
          <label for="email2"><img src="../logos and images/" alt="Image not found!"></label>
          <input type="email" name="Email" id="email2" placeholder="Enter Email" style="font-weight: bolder;" required><strong style="color: red;">*</strong>
        </div><br>

        <!--Username Input.-->
        <div class="username2">
          <label for="username2"><img src="./logos and images/username.png" alt="Image not found!"></label>
          <input type="text" name="Username" id="username2" placeholder="Enter Username (Optioal)">
        </div><br>

        <!--Mobile Number Input.-->
        <div class="mobile2">
          <label for="mobile2"><img src="../logos and images/" alt="Image not found!"></label>
          <input type="number" name="Mobile_No." id="mobile2" placeholder="Enter your Number" required><strong style="color: red;">*</strong>
          <input type="submit" value="Send" id="otp_send2">
        </div><br>

        <!--OTP Input.-->
        <div class="otp2">
          <label for="otp2" style="font-weight: bold;">OTP</label>
          <input type="number" name="OTP" id="otp2" placeholder="Enter your OTP" required><strong style="color: red;">*</strong>
          <input type="submit" value="Verify" id="otp-verify2">
        </div><br>

        <!--Password Change Button, Login-form enable and Signup-form enable.-->
        <div>
          <input type="submit" value="Submit" id="pwdchng">
          <span id="go-login" style="color: royalblue;cursor: default">Back to Login Page.</span>
        </div>
      </form>
    </div>
  </div>
  <script src="../JS/login-signupform.js"></script>
  <script src="../Backend/login-signup.js"></script>
</body>
</body>

</html>

【问题讨论】：

“我希望我为每个 div 使用不同的 url...” – 您是否希望这些 div 的提交按钮将响应发布到不同的端点？或者您想从不同的 URL 提供这些 div 的 HTML？
请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： javascript node.js express

【解决方案1】：

您必须创建一个新路由来处理每个请求。因此，在您的每个 div 中，您都会向不同的路由发出 AJAX 请求。

div1 = 向“/api/login”发布请求
div2 = 向“/api/signup”发布请求
div3 = 将请求发布到“/api/forgotPassword”

然后在您的 Express 应用中，创建每条不同的路线：

app.post("/api/login", (req, res) => {
  //handle request, of course you should be using authentication middleware to secure this route
  res.send(res)
})

app.post("/api/signup", (req, res) => {
  res.send(res)
})

app.post("/api/forgotPassword", (req, res) => {
  res.send(res)
})

一旦您的服务器向客户端发送响应，请确保您的客户端代码处理响应并将用户重定向到新路由。当然，在这个新路由中，您必须创建一个新的 html 页面并表达为他们提供静态 html 的路由。

请确保您正在验证路由并散列 db 密码。您永远不应该在数据库中存储原始文本数据！您应该对数据库密码和用户发送的密码进行哈希检查以验证它。

【讨论】：

如何添加 API？请给我任何参考。
我的意思是此时我正在回答一个全新的问题。创建自己的 NodeJS API 本身就是一项完整的任务，如果它正在执行 CRUD 操作，则需要更多配置来添加适当的安全协议和设置数据库模块。这是一篇很好的文章，您可以使用它来快速引导一个工作的 NodeJS API 服务器：tutorialspoint.com/nodejs/nodejs_express_framework.htm 请记住，您还必须安装 Node + NPM 并配置您的系统 PATH 变量。还有其他事情，我也建议安装 GIT bash 终端并将其用于开发。祝你好运！