Две отдельные формы, ведущие к одному и тому же месту назначения, есть ли способ разделить вызовы методов? - PullRequest
Новая
       11

Две отдельные формы, ведущие к одному и тому же месту назначения, есть ли способ разделить вызовы методов?

0 голосов
/ 24 апреля 2020

Я пытаюсь разработать приложение express, и у меня есть страница входа, страница регистрации и страница отображения, страницы регистрации и входа ведут на страницу отображения, где просто отображается имя пользователя, но мне было интересно, есть ли это способ, которым я могу отличить два вызова, которые сделаны от регистрации и страницы входа в систему для отображения страницы. Я попытаюсь объяснить с помощью кода, показанного ниже.

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>

Я вызываю следующий метод в app.js из home.ejs и signup.ejs, 

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

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

});

Есть ли способ разделить эти два вызовы одного и того же метода с двух разных страниц? Буду глубоко признателен за ваш вклад в этом. Заранее спасибо.

1 Ответ

0 голосов
/ 25 апреля 2020

Вы можете сделать это следующим образом, так как ваша форма регистрации имеет поле электронной почты, а форма входа не имеет этого поля. Таким образом, в запросе на регистрацию электронная почта определяется так, как будто часть будет работать, иначе будет запущена другая. Но я предложу вам сделать два маршрута для этой проблемы. 

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});

});
...