如何实现前端将表达式计算结果发送给Express后端

核心问题 #

• 你当前的逻辑方向写反了：现有代码是前端自己生成表达式发给后端，和你要的「后端发题→前端计算→回传结果」流程完全相反
• res.send 是Express服务端的响应方法，前端运行环境不存在这个对象，不可能在前端调用它给后端传数据
• 前端代码里错误引入了Express依赖，Express是服务端框架，前端发HTTP请求用xhr2就足够

正确实现逻辑 #

按你要的交互流程拆成两步HTTP交互即可：

1. 后端提供获取题目的接口，负责生成随机算术题，前端请求该接口拿到题目
2. 前端拿到题目后本地计算结果，再调用后端的结果提交接口，把计算结果传给后端，后端收到后打印即可
3. 注意给后端加简单跨域配置，避免前端请求被拦截

修正后代码 #

后端代码 #

const express = require('express')
const app = express()
// 跨域配置
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Headers', 'Content-Type')
  next()
})
app.use(express.json())

// 缓存当前题目的正确答案，用于校验
let currentCorrectAnswer = 0

// 拉取题目接口
app.get('/get-expression', (req, res) => {
  // 后端生成随机加法题
  const firstNum = Math.floor(Math.random() * 10)
  const secondNum = Math.floor(Math.random() * 10)
  currentCorrectAnswer = firstNum + secondNum
  const expression = `${firstNum}+${secondNum}=`
  console.log('后端生成题目：', expression)
  res.json({ expression })
})

// 接收计算结果接口
app.post('/submit-result', (req, res) => {
  const submitResult = req.body.result
  console.log('收到前端回传的计算结果：', submitResult)
  console.log('计算是否正确：', submitResult === currentCorrectAnswer)
  res.json({ code: 0, msg: '接收成功' })
})

app.listen(5000, () => console.log('后端服务启动在 http://localhost:5000'))

前端代码 #

const XMLHttpRequest = require('xhr2');
const SERVER_BASE = 'http://localhost:5000'

// 1. 向后端拉取算术题
const getQuestionXhr = new XMLHttpRequest()
getQuestionXhr.open('GET', `${SERVER_BASE}/get-expression`, true)
getQuestionXhr.onload = function () {
  if (getQuestionXhr.status !== 200) return
  const { expression } = JSON.parse(getQuestionXhr.responseText)
  console.log('前端收到题目：', expression)

  // 2. 前端本地计算结果
  const [firstNum, rest] = expression.split('+')
  const secondNum = rest.split('=')[0]
  const calcResult = parseInt(firstNum) + parseInt(secondNum)
  console.log('前端计算得到结果：', calcResult)

  // 3. 把结果提交给后端
  const submitXhr = new XMLHttpRequest()
  submitXhr.open('POST', `${SERVER_BASE}/submit-result`, true)
  submitXhr.setRequestHeader('Content-Type', 'application/json')
  submitXhr.onload = function () {
    if (submitXhr.status === 200) console.log('结果提交成功')
  }
  submitXhr.send(JSON.stringify({ result: calcResult }))
}
getQuestionXhr.send()

补充说明 #

如果需要后端可以随时主动向前端推送数据（不用等前端先发请求），可以替换为WebSocket实现长连接双向通信，上面的HTTP实现已经完全匹配你描述的交互要求。

内容的提问来源于stack exchange，提问作者oobthenewb