Как предотвратить перенаправление на запрос снова, если использовать тот же маршрут в экспресс - PullRequest
0 голосов
/ 29 октября 2019

Я использую node, express, MongoDB и handlebars для рендеринга страницы.

Проблема в том, что когда get-request попадает на сервер, он рендерит страницу, а затем запрашивает второй раз. Как избежать двойного запроса.

На странице нет сценариев для перезагрузки. все выборки управляются событиями (как при клике и т. д.)

это код:

const client = new MongoClient(url, {
  useNewUrlParser: true,
  useUnifiedTopology: true
});


router.get("/", (req, res) => {
  console.log('--------------------')
  console.log(req.originalUrl)
  client.connect(err => {
  
    console.log("Connected successfully to database");

    const db = client.db(dbName);
    const students = db.collection("students");

    students
      .find()
      .sort({ insertTime: -1 })
      .toArray((err, result) => {
     
        console.log("Found records");
      
        res.render("students", { students: result });
        return client.close();
      })
          
  }); 

});

Это страница (сделанная с помощью руля):

<form method="POST" action="/addStudent">
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name" name='name'>
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name" name='last'">
    </div>
    <div class=" col">
      <input type="submit" class="btn btn-primary" value="add studnet">
    </div>
  </div>
</form>
<div class='average'>
  <button class='btn btn-primary' onclick='getAverage(event)'>Get Average</button>
</div>
<ul class="list-group">
  {{#each students}}
  <li class="list-group-item"><button class="btn btn-danger" id={{this._id}}
      onclick='deleteStudent(event)'>Delete</button> {{this.name}} {{this.last}} has average of <input type='number'
      max=100 min=0 value={{this.average}} onchange='updateAverage(event, "{{this._id}}")' /> </li>
  {{/each}}
</ul>

Это функции:

function addStudent(e) {
  console.log('addStudent')
  e.preventDefault();

  const formObj = e.target.elements;
  const student = {
    name: formObj.name.value,
    last: formObj.last.value
  };
  console.log(student);

  if (student.name && student.last) {
    fetch("/addStudent", {
      method: "POST",
      body: JSON.stringify(student),
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      }
    })
      .then(res => {
        console.dir(res);
        res.json().then(resJson => {
          console.dir(resJson);
        });
      })

      .catch(err => {
        console.error(err);
      });
  } else {
    alert("Name an family is requierd");
  }
}

function deleteStudent(e) {
  console.log('deleteStudent')
  let studentObj = { studentId: e.target.id };
  fetch("/deleteStudent", {
    method: "DELETE",
    body: JSON.stringify(studentObj),
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    }
  }).then(res => {
    console.dir(res);
    location.reload();
  });
}

function updateAverage(e, studentId) {
  console.log('updateAverage')
  const grade = { grade: e.target.valueAsNumber, studentId };

  fetch("/updateAverage", {
    method: "PUT",
    body: JSON.stringify(grade),
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    }
  }).then(res => {
    console.dir(res);
  });
}

function getAverage(e) {
  console.log('getAverage')
  fetch("/getAverage", {
    method: "POST",
    body: JSON.stringify({}),
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    }
  })
    .then(res => {
      console.dir(res);
      res.json().then(resJson => {
        console.dir(resJson);
      });
    })
    .catch(err => {
      console.error(err);
    });
}
...