Question

我正在寻找一种简单的前端和后端通信解决方案。

我想编写简单的JS前端客户端，用户可以在1到10 000之间输入一个数字来猜测服务器生成的数字。

因此客户端工作是发送用户猜测的号码。服务器应测试secretNumber是否高于或低于用户提供的值，并且应该发回该信息。

目前，我的服务器只发送该密码。我在客户端控制台中获取它，因此连接正常。

我的问题是我应该如何修改我的服务器代码以从请求中读取数字值，测试它然后发送正确的响应（例如 - ＆gt;您的数字高于secretNumber）？

这是我的服务器：

const express = require('express');
const app = express();
const cors = require('cors');

app.use(cors());

app.use((request, response, next) => {
  console.log(request.headers);
  next();
});

app.use((request, response, next) => {
  request.secretNumber = Math.floor(Math.random() * 10000) + 1;
  next();
});


app.get('/', (request, response) => {
  response.json({
    secretNumber: request.secretNumber
  });
});

app.listen(3001, () => console.log("Listening on 3001"));

这是我的前端JS代码（我使用axios）：

export function guessNumber(guessValue) {
  return dispatch => {
    dispatch({ type: GUESS_NUMBER });
    axios
      .post('/guess', {
        isNumber: guessValue,
      })
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.log(error);
      });
  };
}

我here正在寻找答案，但也许我没有经验，我需要一些真实的例子......

Answer 1

首先，您需要在请求之间保留secretNumber。目前，您正在为每个请求生成新值。

假设只有一个客户端同时使用后端，您可以通过在服务器启动时生成secretNumber并将其保留在内存中（将其分配给变量）来完成此操作。

然后你可以简单地使用路线参数来捕捉客户的猜测：

app.get('/guess/:guess', (request, response) => {
  const guess = params.guess;

  // compare guess with secretNumber and respond accordingly
});

或者，您可以使用请求的正文（https://expressjs.com/en/4x/api.html#req.body）而不是路由参数。

如何从POST读取数据，使用条件对其进行测试并发回响应

1 个答案: