两个不同的形式导致相同的目的地，有没有办法分开方法调用？答案

【问题标题】：Two separate forms leading to same destination, is there a way to separate methods calls?两个不同的形式导致相同的目的地，有没有办法分开方法调用？
【发布时间】：2020-04-24 04:21:06
【问题描述】：

我正在尝试开发一个快速应用程序，我有一个登录页面、一个注册页面和一个显示页面，注册页面和登录页面都指向显示页面，它只显示用户名，但我想知道是否有我可以区分从注册和登录页面到显示页面的两个调用。我将尝试用下面显示的代码进行解释。

app.js 代码如下

var express = require("express");
var app = express();
app.set('view engine', 'ejs');
var bod = require("body-parser");
app.use(bod.urlencoded({extended:true}));

app.use(express.static(__dirname + '/resources'));


app.get("/", function(req, res) {
    res.render("home");
});

app.post("/bioform",function(req,res){
    var userName = req.body.username;

    console.log(req.body);
    res.render("bioform",{userName:userName});

});

app.get("/signup", function(req, res) {
    res.render("signup");
});

app.listen(3000,function(){
    console.log("Server started");
});

home.ejs 以下文件

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Mitr:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/biodata.css">
</head>
<body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <a class="navbar-brand justify-content-around" id="navbar-home" href="/">Home</a>
        <div class="ml-auto" id="navbar-joint">
          <a class="navbar-brand" href="/signup">Sign Up</a>
          <a class="navbar-brand" href="/">Logout</a>
       </div>
  </nav>

<div class="card">
  <div class="card-body">
   <form action="/bioform" method="POST">
    <h2 class="d-flex justify-content-center">LOGIN</h2>
  <div class="form-group">
       <input type="text" class="form-control form-control-lg" id="username" name="username" placeholder="Username">
    </div>
  <div class="form-group">
    <input type="password" class="form-control form-control-lg" id="inputPassword" name="inputPassword" placeholder="Password">
  </div>
  <div class="form-group">
     <button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
  </div>
  <a href="../views/boot-2.html" class="d-flex justify-content-end">New User</a>
</form>

  </div>
</div>



<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

signup.ejs 代码如下

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Mitr:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/biodata.css">
</head>
<body>

  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <a class="navbar-brand justify-content-around" id="navbar-home" href="/">Home</a>
        <div class="ml-auto" id="navbar-joint">
          <a class="navbar-brand" href="/signup">Sign Up</a>
          <a class="navbar-brand" href="/">Logout</a>
       </div>
  </nav>

<div class="card" id="signup-card">
  <div class="card-body" id="signup-card-body">
   <form action="/bioform" method="POST">
    <h3 class="d-flex justify-content-center">SIGN UP</h3>
  <div class="form-group">
       <input type="text" class="form-control form-control-lg" id="username" name="username" placeholder="Username">
    </div>
    <div class="form-group">
      <input type="email" class="form-control" id="email" name="email" placeholder="Email">
     </div>
  <div class="form-group">
    <input type="password" class="form-control form-control-lg" id="inputPassword" name="inputPassword" placeholder="Password">
  </div>
  <div class="form-group">
    <input type="password" class="form-control form-control-lg" id="confirminputPassword" name="confirminputPassword" placeholder="Confirm Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1" name="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">I agree</label>
  </div>
  <div class="form-group">
     <button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
  </div>
</form>

  </div>
</div>



<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

bioform.ejs 代码如下

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Mitr:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/biodata.css">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <a class="navbar-brand justify-content-around" id="navbar-home" href="/">Home</a>
        <div class="ml-auto" id="navbar-joint">
          <a class="navbar-brand" href="/signup">Sign Up</a>
          <a class="navbar-brand" href="/">Logout</a>
       </div>
  </nav>

<div class="card">
  <div class="card-body">

    <h1 class="d-flex justify-content-center text-success">Welcome!!!  <%= userName%></h1>


  </div>
</div>



<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

我正在从home.ejs 和signup.ejs 调用app.js 中的以下方法，

app.post("/bioform",function(req,res){
    var userName = req.body.username;

    console.log(req.body);
    res.render("bioform",{userName:userName});

});

有没有办法可以将这两个对同一方法的调用从两个不同的页面分开？将非常感谢您对此的投入。提前致谢。

【问题讨论】：

创建两条不同的路由/login，/register有什么问题？ ...并在成功登录或注册后重定向到/biofrom。
谢谢，很有帮助

标签： javascript node.js express post ejs

【解决方案1】：

您可以按照这种方式执行此操作，因为您的注册表单有电子邮件字段，而登录表单没有此字段。因此，在注册请求电子邮件中定义为如果部分将运行，否则将运行。但我会建议你为这个问题制定两条路线。

app.post("/bioform",function(req,res){
    let email = req.body.email;
    if (!!email) {
        // Register.ejs request
        // Your registration process can be done here 
    }else{
        // home.ejs request
        // Your login process can be done here 
    } 
    // var userName = req.body.username;
    // res.render("bioform",{userName:userName});

});

【讨论】：