Question

我正在尝试为带有React和Node的主页创建登录名，并使用来自硬编码数据库的用户详细信息。节点后端可以识别json密码和电子邮件，但是我无法获得将数据发送回前端进行登录的代码。

我已经用邮递员测试了后端，以确保可以获取数据。

节点服务器：

<!DOCTYPE html>
<html>
     <body>
          <div>
             <p id="Images"></p>
          </div>

          <script>
               var local = location.hostname;

//SP Edit, save a reference to the images node
               var Images = document.getElementById("Images");

               var dodlink = document.createElement(a);
               dodlink.href = "http://" + local + "/DoD/";

               var dodimg = document.createElement("img");
//SP Edit      dodimg.src ="DOD.png";
//SP Edit      dodimg.width = 256;
//SP Edit      dodimg.height = 256;
               dodimg.setAttribute("src", "DOD.png");
               dodimg.setAttribute("width", "256px");
               dodimg.setAttribute("height", "256px");
               dodlink.appendChild(dodimg);

//SP Edit document.getElementByID("Images").innerHTML = dodimg;
               Images.appendChild(dodimg);

               var derlink = document.createElement(a);
//SP Edit      derlink.href = "http://" + local + "/DER/";
               deflink.setAttribute("href", "http://" + local + "/DER/");

               var derimg = document.createElement("img");
//SP Edit      derimg.src ="DER.png";
//SP Edit      derimg.width = 256;
//SP Edit      derimg.height = 256;
               derimg.setAttribute("src", "DER.png");
               derimg.setAttribute("width", "256px");
               derimg.setAttribute("height", "256px");
               deflink.appendChild(derimg);

反应

    app.post('/signin', (req, res) => { 
      if(req.body.email === database.users[0].email &&
        req.body.password === database.users[0].password) {

        res.json('success');  
      }
      else {
        res.status(400).json('error logging in');
      }
    })

数据库：

    class Signin extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
       signInEmail: '',
       signInPassword: ''
      }
    }

    onSubmitSignIn = () => {
      fetch('http://localhost:5000/signin', {
        method: 'post',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
        email: this.state.signInEmail,
        password: this.state.signInPassword
      })
     })
      .then(user => {
        if (user.id) {
          this.props.loadUser(user)
          this.props.onRouteChange('home');
        }
      })
     }

当我删除const database = { users: [ { id: '123', name: 'andrew', email: 'andrew@outlook', password: 'p', entries: 0, joined: new Date() }, { id: '124', name: 'sally', email:' sally@outlook', password: 'bananas', entries: 0, joined: new Date() }, ], }呼叫并直接转到.then(user =>)时，它可以工作，但否则保留在登录页面上。真让我发疯，不胜感激。

Answer 1

欢迎来到stackoverflow！

我认为您没有将正确的数据发送回前端或检查错误的数据。

您的nodeJS应用程序发送其中一个

res.json('success');

或

res.status(400).json('error logging in');

因此，无论您要发送回什么字符串。但是在前端，您正在检查响应中的id属性：

.then(user => {
  if (user.id) {
    this.props.loadUser(user)
    this.props.onRouteChange('home');
  }
})

您的user是您在fetch之后得到的响应对象。如果将user重命名为response并调用response.json()，则可以添加另一个.then(json => {...}，您可以在其中检查json对象是否是您的nodeJS后端发送的字符串之一

从节点服务器发回数据以响应前端

1 个答案: