Expo应用对接Express+Node.js+MySQL后端的技术问题咨询

阿华AIGC实验室

2026-4-2

嘿，我来帮你理清楚这两个问题，都是新手做全栈项目常碰到的卡点，别慌～

一、先给你吃个定心丸：你的技术栈完全兼容！

React Native（不管是Expo还是裸项目）+ Node.js/Express + MySQL 是非常成熟的全栈组合，本地跑完全没问题，完全不用换栈！

如果说想找更轻量的本地替代方案，那可以考虑把MySQL换成SQLite：

SQLite是文件型数据库，不用单独装数据库服务，直接用一个.db文件就能存数据，本地开发少了很多配置步骤
后端代码改动极小，只需要把MySQL的连接换成SQLite的连接包就行
但如果你的项目以后要部署到云服务器，MySQL的扩展性会更好，所以看你是要快速做原型还是长期迭代

二、前端怎么把数据传到后端接口？

这个核心就是前端发HTTP请求（GET/POST/PUT/DELETE），后端解析请求体，然后操作数据库，我给你写两个最常用的场景代码，一看就懂：

1. 先搞定后端的基础配置（必须做！）

首先你的Express后端要能解析前端传的JSON数据，还要处理跨域（因为前端是React Native，和后端端口不一样）：

// 后端server.js文件
const express = require('express');
const cors = require('cors'); // 解决跨域问题，先装包：npm install cors
const mysql = require('mysql2/promise'); // 用promise版的mysql2，支持async/await，装包：npm install mysql2
const app = express();

// 关键配置：允许跨域 + 解析JSON请求体
app.use(cors());
app.use(express.json());

// MySQL连接配置（本地的话，host是localhost，填你自己的用户名和密码）
const dbConfig = {
  host: 'localhost',
  user: 'root', // 你的MySQL用户名
  password: '123456', // 你的MySQL密码
  database: 'attendance_db' // 你创建的数据库名
};

2. 前端传数据到后端的示例（比如注册学生到/students接口）

前端用axios会比原生fetch更方便（先装包：npm install axios），写一个提交注册信息的函数：

// React Native前端（比如RegisterScreen.js）
import axios from 'axios';

// 假设你有输入框拿到了用户名、密码、学号
const handleRegister = async (username, password, studentId) => {
  try {
    // 注意：本地测试不能用localhost，要用你电脑的实际IP（比如192.168.3.10）
    // 因为模拟器/真机和电脑的localhost不是同一个地址
    const response = await axios.post('http://192.168.3.10:3000/students', {
      username: username,
      password: password,
      student_id: studentId
    });
    
    alert('注册成功！');
    console.log('后端返回的数据:', response.data);
    // 这里可以跳转到登录页
  } catch (error) {
    // 捕获错误，给用户提示
    alert('注册失败：' + (error.response?.data?.message || '网络问题'));
    console.error('请求出错:', error);
  }
};

3. 后端接收数据并操作MySQL的示例

对应上面的前端请求，后端写/students的POST接口：

// 后端server.js里加这个接口
app.post('/students', async (req, res) => {
  try {
    // 从请求体里拿到前端传的所有数据
    const { username, password, student_id } = req.body;

    // 连接MySQL数据库
    const connection = await mysql.createConnection(dbConfig);
    
    // 执行插入数据的SQL语句（用?占位符防止SQL注入！）
    const [result] = await connection.execute(
      'INSERT INTO students (username, password, student_id) VALUES (?, ?, ?)',
      [username, password, student_id]
    );

    // 关闭数据库连接
    await connection.end();

    // 返回成功响应给前端
    res.status(201).json({
      message: '学生注册成功',
      studentId: result.insertId // 返回插入的学生ID
    });
  } catch (error) {
    console.error('数据库操作出错:', error);
    // 返回错误响应给前端
    res.status(500).json({ message: '注册失败，请稍后重试' });
  }
});

// 启动后端服务，监听3000端口
app.listen(3000, () => {
  console.log('后端服务启动成功，地址：http://localhost:3000');
});

4. 其他接口（/attendance、/reports）的逻辑是一样的

比如提交考勤到/attendance接口，就是前端POST考勤数据（学生ID、课程ID、考勤状态），后端解析后插入到attendance表；/reports接口可以是GET请求，前端传查询条件（比如日期范围、班级），后端查数据库后返回统计数据。

三、本地测试的小坑要注意！

不要用localhost！：React Native模拟器/真机访问本地后端，必须用电脑的实际局域网IP（比如192.168.x.x），可以在电脑终端用ipconfig（Windows）或ifconfig（Mac/Linux）查到
MySQL要先启动本地服务：确保你的MySQL本地服务是开着的，数据库和表已经创建好了
SQL语句要写对：比如表名、字段名要和你数据库里的一致，别打错字

如果还有具体的报错（比如跨域、数据库连接失败、请求发不出去），把错误信息贴出来，我再帮你排查～