如何从React向Sails（Node后端）传递数据并触发计算？

没问题，这在前后端分离的场景里是非常常见的需求，我来一步步给你拆解实现步骤，确保你能快速搞定：

首先我们需要在Sails里搭建一个接收POST请求的接口，用来处理前端传来的数字并执行计算。

1. 创建控制器 #

在你的Sails项目的api/controllers目录下新建一个NumberController.js文件，里面写好处理计算的动作：

// api/controllers/NumberController.js
module.exports = {
  calculate: async function(req, res) {
    try {
      // 从请求体中获取前端传来的数字
      const inputNumber = req.body.number;
      
      // 这里替换成你实际需要的计算逻辑，比如求和、取模等
      const calculatedResult = inputNumber * 3; // 示例：乘以3
      
      // 返回计算结果给前端
      return res.ok({
        originalNumber: inputNumber,
        result: calculatedResult
      });
    } catch (err) {
      // 处理错误，返回友好提示
      return res.badRequest({ error: '数字处理失败，请检查输入格式' });
    }
  }
};

2. 配置路由 #

打开config/routes.js，添加一条POST路由，把请求映射到刚才的控制器动作：

// config/routes.js
module.exports.routes = {
  // 保留你已有的其他路由...
  'POST /api/process-number': 'NumberController.calculate'
};

3. 处理跨域（关键！） #

如果你的React前端和Sails后端运行在不同端口（比如React默认3000，Sails默认1337），需要配置Sails的CORS规则来允许跨域请求。修改config/cors.js：

// config/cors.js
module.exports.cors = {
  allRoutes: true,
  origin: '*', // 开发环境可以用*，生产环境记得改成你的前端域名，比如http://your-frontend.com
  credentials: true,
  methods: 'GET, POST, PUT, DELETE, OPTIONS, HEAD',
  headers: 'content-type'
};

接下来在React组件里处理点击事件，生成新数字并发送POST请求到Sails后端。这里提供两种常用的请求方式：fetch（原生API）和axios（第三方库）。

方式一：使用原生Fetch API #

import { useState } from 'react';

function NumberProcessor() {
  // 用state存储当前显示的数字
  const [currentNum, setCurrentNum] = useState(201805);

  // 点击事件处理函数：生成新数字+发送请求
  const handleSendNumber = () => {
    // 生成新数字，这里用随机数示例，你可以换成自己的逻辑（比如输入框的值、按规则生成等）
    const newNum = Math.floor(Math.random() * 1000000);
    setCurrentNum(newNum);

    // 发送POST请求到Sails后端
    fetch('http://localhost:1337/api/process-number', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json', // 告诉后端我们发的是JSON数据
      },
      body: JSON.stringify({ number: newNum }) // 把数字放进请求体
    })
    .then(response => {
      if (!response.ok) throw new Error('请求失败');
      return response.json();
    })
    .then(data => {
      console.log('后端计算结果:', data);
      // 这里可以把结果展示在页面上，比如更新state渲染到DOM
    })
    .catch(err => {
      console.error('请求出错:', err);
    });
  };

  return (
    <div className="number-processor">
      <p>当前数字：{currentNum}</p>
      <button onClick={handleSendNumber}>生成新数字并计算</button>
    </div>
  );
}

export default NumberProcessor;

方式二：使用Axios（更简洁） #

先安装axios：

npm install axios

然后在组件里使用：

import { useState } from 'react';
import axios from 'axios';

function NumberProcessor() {
  const [currentNum, setCurrentNum] = useState(201805);

  const handleSendNumber = () => {
    const newNum = Math.floor(Math.random() * 1000000);
    setCurrentNum(newNum);

    // Axios会自动处理JSON序列化，不用手动设置headers和stringify
    axios.post('http://localhost:1337/api/process-number', { number: newNum })
      .then(res => {
        console.log('后端计算结果:', res.data);
        // 处理结果展示逻辑
      })
      .catch(err => {
        console.error('请求出错:', err);
      });
  };

  return (
    <div className="number-processor">
      <p>当前数字：{currentNum}</p>
      <button onClick={handleSendNumber}>生成新数字并计算</button>
    </div>
  );
}

export default NumberProcessor;

• 后端要确保能正确解析JSON格式的请求体，Sails默认已经支持，不用额外配置
• 前端发送请求时必须指定Content-Type: application/json，否则后端可能无法正确获取数据
• 每次点击事件触发时，先更新前端的数字状态，再立即发送请求，这样后端就能实时接收到最新的数值并执行计算
• 生产环境记得把CORS的origin改成你的前端域名，不要用*，保证安全

内容的提问来源于stack exchange，提问作者Dženis H.