当然！以下是使用 React 制作网页控制 Arduino 机器人小车 的完整指南，以 Markdown 格式 输出，包含 项目介绍、架构说明、硬件连接、后端代码（Node.js + Johnny-Five）、前端代码（React）、运行步骤及扩展建议，方便你保存、阅读和实施。

🤖 使用 React 网页控制 Arduino 机器人小车

📌 项目简介

本项目旨在通过一个 React 前端网页，以 HTTP 请求的方式与 Node.js 后端通信，后端基于 Johnny-Five 库控制 Arduino 机器人小车，实现如 前进、后退、左转、右转、停止 等基本运动控制。

🧩 项目架构

1
[ React 前端网页 ]  ---HTTP--->  [ Node.js 后端 (Express) ]  ---Serial---  [ Johnny-Five ]  ---PWM/DIR--->  [ Arduino 机器人小车 ]

• React：提供可视化控制界面（如按钮控制运动方向）。
• Node.js + Express：提供后端 HTTP API 接口，接收前端指令。
• Johnny-Five：Node.js 机器人控制库，用于控制电机驱动（如 L298N）。
• Arduino：通过电机驱动模块（如 L298N）控制直流电机运转。

⚙️ 硬件准备（以 L298N 驱动为例）

所需组件

• Arduino Uno / Nano / Mega 等
• L298N 电机驱动模块
• 2 个 直流电机（或 4 个轮子配双电机）
• 适配电源（如 5V~12V 电池组，不要仅依赖 USB 供电）
• 杜邦线、面包板（可选）
• USB 数据线（Arduino 连电脑）

接线说明（参考）

⚠️ 动力电源（给电机供电）不要接到 Arduino 的 VIN 或 5V，应单独供电，并共地（GND）连接到 Arduino。

🛠️ 后端实现（Node.js + Express + Johnny-Five）

1. 创建后端项目

1
2
3
4
mkdir arduino-robot-backend
cd arduino-robot-backend
npm init -y
npm install express johnny-five cors

2. 后端代码：server.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// server.js
const express = require('express');
const { Board, Robot } = require('johnny-five');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

const board = new Board();

// 定义双轮机器人，左右电机引脚配置
const robot = new Robot({
  wheels: [
    { pins: { pwm: 6, dir: 2 }, inverted: false }, // 左电机：PWM 6, DIR 2
    { pins: { pwm: 9, dir: 4 }, inverted: false }  // 右电机：PWM 9, DIR 4
  ],
  wheelDistance: 11 // 轮距（单位：厘米，可忽略或调整）
});

let currentCommand = 'stop';

board.on('ready', () => {
  console.log('✅ Arduino 机器人小车已连接！');

  // 初始状态：停车
  stop();

  // 提供 HTTP API 接口
  app.get('/forward', () => go('forward'));
  app.get('/backward', () => go('backward'));
  app.get('/left', () => go('left'));
  app.get('/right', () => go('right'));
  app.get('/stop', () => go('stop'));

  // 启动服务
  app.listen(3000, () => {
    console.log('🚀 后端服务运行在 http://localhost:3000');
  });
});

// 控制函数
function go(direction) {
  console.log('🚗 执行动作:', direction);
  currentCommand = direction;

  switch (direction) {
    case 'forward':
      robot.forward(1); // 速度 1.0
      break;
    case 'backward':
      robot.backward(1);
      break;
    case 'left':
      robot.left(1);
      break;
    case 'right':
      robot.right(1);
      break;
    case 'stop':
      robot.stop();
      break;
    default:
      console.warn('❓ 未知指令:', direction);
  }
}

function stop() {
  go('stop');
}

board.on('error', (err) => {
  console.error('⚠️ Johnny-Five 错误:', err);
});

🔧 注意：pins: { pwm: ?, dir: ? } 是控制电机方向和速度的引脚，请根据你实际 L298N 的接线修改！

🌐 前端实现（React 控制界面）

1. 创建 React 项目

1
2
3
npx create-react-app arduino-robot-frontend
cd arduino-robot-frontend
npm start

2. 修改 App.js

编辑 src/App.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import React from 'react';
import './App.css';

function App() {
  const sendCommand = (cmd) => {
    fetch(`http://localhost:3000/${cmd}`)
      .then(res => res.text())
      .then(msg => {
        console.log('✅ 指令返回:', msg);
      })
      .catch(err => {
        console.error('❌ 请求失败:', err);
      });
  };

  return (
    <div className="App">
      <h1>🤖 Arduino 机器人小车遥控</h1>
      <div className="controls">
        <button onClick={() => sendCommand('forward')}>⬆️ 前进</button><br /><br />
        <button onClick={() => sendCommand('left')}>⬅️ 左转</button>
        <button onClick={() => sendCommand('stop')}>⏹️ 停止</button>
        <button onClick={() => sendCommand('right')}>➡️ 右转</button><br /><br />
        <button onClick={() => sendCommand('backward')}>⬇️ 后退</button>
      </div>
    </div>
  );
}

export default App;

3. 简单样式（可选，编辑 App.css）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.App {
  text-align: center;
  padding: 50px;
  font-family: Arial, sans-serif;
}

.controls button {
  margin: 5px;
  padding: 15px 25px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  background-color: #007bff;
  color: white;
}

.controls button:hover {
  background-color: #0056b3;
}

▶️ 运行步骤

1. 连接 Arduino

• 按上述接线图连接 L298N 与 Arduino 和电机。
• 将 Arduino 通过 USB 线连接到电脑。
• 不要上传任何程序到 Arduino，Johnny-Five 将通过串口直接控制。

2. 启动后端服务

在 arduino-robot-backend 目录下运行：

1
node server.js

你应该看到如下信息：

1
2
✅ Arduino 机器人小车已连接！
🚀 后端服务运行在 http://localhost:3000

3. 启动 React 前端

在 arduino-robot-frontend 目录下运行：

1
npm start

浏览器会自动打开 http://localhost:3001（或手动访问），你将看到控制按钮。

4. 开始控制！

点击以下按钮即可控制小车：

• ⬆️ 前进
• ⬅️ 左转
• ➡️ 右转
• ⬇️ 后退
• ⏹️ 停止

✅ 项目扩展建议

❓ 常见问题

Q1: 电机不动？

• 检查 Arduino 是否通电并连接电脑。
• 检查电机驱动模块电源是否接好（电机需要独立电源，别只靠 USB）。
• 检查 L298N 的引脚接线是否与 server.js 中定义一致。
• 确保电机驱动模块的 ENA / ENB（PWM） 有供电且未被短路。

Q2: 能否用蓝牙 / WiFi 代替 USB？

• 可以！推荐使用 ESP8266 / ESP32 开发板，通过 WiFi 与网页或手机通信，Johnny-Five 可运行在 ESP32 上（需使用兼容环境，如 https://github.com/firmata/arduino-firmata-esp32 或改用 https://github.com/bxparks/AceButton 等方案）。

Q3: 能否用手机控制？

• 可以！将 React 前端部署到 Vercel / Netlify，然后用手机浏览器访问该网址进行遥控。

🎉 总结

通过本项目，你已经实现了：

这是一个完整的 机器人小车 Web 遥控原型，非常适合 学习、教学、演示、比赛或进一步开发。

🚀 下一步可以尝试

• 添加 避障传感器（如 HC-SR04），实现自动避障
• 使用 ESP32 + WiFi，实现无线远程控制
• 用 树莓派替代电脑，部署后端 + Johnny-Five 控制
• 打包成 桌面应用（Electron） 或 手机 App（React Native）

如你想要我继续帮你实现 避障、WiFi 控制、ESP32 支持、传感器融合、自动导航 等高级功能，欢迎继续提问！我可以提供详细代码和指导 😎🤖🚀

Happy Hacking with Robots and React! 🎮🤖💡

• Previous
  智能车驱动接线
• Next
  j5智能车WIFI控制入门