проверка ввода с сервера на клиентскую сторону - PullRequest
0 голосов
/ 27 января 2020

Я делаю базовый c веб-сайт с экранами входа и т. Д. c.

В данный момент я работаю над своей страницей регистрации, на которой пользователю мало что требуется для проверки, например, «электронная почта существует», «электронное письмо с подтверждением отправлено» и т. Д. c.

что лучший подход для реализации этого или ваших личных предпочтений?

Ниже я включил свой код с примерами того, как я пытался это реализовать.

У меня есть базовый c вход в консоль со стороны моего сервера, как показано в приведенном ниже фрагменте кода.

app.post("/register-email", async (req, response) => {
  let emailAvailabilitylResponse = "";
  var Email = req.body.email;
  await sql.connect(config);
  var request = new sql.Request();

  request.input("Email", sql.VarChar, Email);
  const result = await request.execute("dbo.CheckEmailExists");

  if (result.recordsets[0].length > 0) {
    emailAvailabilitylResponse = "This email already exists"; // this works on console
    console.info(emailAvailabilitylResponse);
    console.log(req.body);
  } else {
    console.log({ Email });
    emailAvailabilitylResponse = "An email has been sent to your inbox"; //this work on console
console.info(emailAvailabilitylResponse);

    const token = jwt.sign({ user: Email }, "register-email", {
      expiresIn: 3600000
    });

    response.status(200).json({
      ok: true,
      user: Email,
      jwt: token,
      emailAvailability: emailAvailabilityResponse
    });

Я пытался передать эту информацию обратно в мой файл json, однако при попытке отобразить ее пользователю она все равно не работает.

Это моя клиентская часть кода. Это дескриптор отправки, который запускается после нажатия кнопки формы регистрации.


  handleSubmit(e) {
    e.preventDefault();
    const EmailAvailbiltly = "";

    if (this.state.email.length < 8) {
      alert(`please enter email correctly `);   //this works and displays as alert
    } else {
      const data = { email: this.state.email };
      console.log(data);

      fetch("/register-email", {
        method: "POST", // or 'PUT'
        headers: {
          Accept: "application/json,",
          "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
      })
        .then(response => {
          console.log("response before it is broken down " + response);

          return response.json();
        })
        .then(({ jwt, user, emailAvailabilityResponse }) => {
          console.log(
            "After it is broken down",
            jwt,
            user,
            emailAvailabilityResponse
          );
          EmailAvailbiltly = emailAvailabilityResponse;
        });

      alert(`"reponse 2" ${EmailAvailbiltly}`);         // I cannot get the an alert with this response. 
      console.log(EmailAvailbiltly);                    //This should be  the messages contained in                                                   
                                                        //server.js 
      console.log(`"reponse 2" ${EmailAvailbiltly}`);
    }
  }


РЕДАКТИРОВАТЬ

Как запрашиваемая информация консоли

Если электронная почта существует


[0] Server running on port 5000
[0] This email already exists
[0] { email: 'testuser@gmail.com' }

Если электронная почта не существует


[0] { Email: 'testing@gmail.com' }
[0] An email has been sent to your inbox

но это чисто консоль, пока я хочу ее передний

1 Ответ

0 голосов
/ 28 января 2020

Чтобы решить эту проблему, я создал сообщение об ошибке в двух операторах if и передал его обратно с помощью json. После этого я просто вызвал сообщение об ошибке из моего внешнего интерфейса.

псевдокод

error message 

if(a statement)
error message = "whatever it needs to be"
res.sendjson(with error message)

else(a statement)
error message = "something different"
res.sendjson(with error message)


Затем на стороне клиента я просто вытащил сообщение об ошибке и просто поместил его в предупреждение.

Надеюсь, это кому-нибудь поможет :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...