在 React 应用中访问云开发 MySQL 数据库

学习如何创建云开发 MySQL 数据库表，添加示例数据，以及从 React 应用查询数据。

1. 创建 MySQL 数据库表并添加数据

在云开发平台创建名为 todos 的数据库表，字段信息如下：

列名	描述	类型	是否必填	是否唯一
id	标识	int	是	是
is_completed	是否完成	boolean	否	否
description	描述	text	否	否
title	标题	varchar	否	否

创建完成后，在 todos 数据库表中录入示例数据。

2. 创建 React 应用

要求 Node.js 版本 >= 20.19

npm create vite@latest todo -- --template react

3. 安装云开发 SDK 依赖

在项目根目录下，执行以下命令：

cd todo && npm install @cloudbase/js-sdk

4. 声明云开发环境变量

创建 .env.local 文件，并填入云开发环境 ID

VITE_CLOUDBASE_ENV_ID=<云开发环境 ID>

5. 从应用查询数据

在 app.jsx 中添加以下代码查询数据：

import cloudbase from "@cloudbase/js-sdk";
import { useEffect, useState } from "react";
import "./App.css";

let db = null;

const getDB = async () => {
  if (!db) {
    const app = cloudbase.init({
      env: import.meta.env.VITE_CLOUDBASE_ENV_ID,
    });
    const auth = app.auth({
      persistence: "local",
    });
    await auth.signInAnonymously();
    db = app.mysql();
  }
  return db;
};

function App() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    fetchTodos();
  }, []);

  const fetchTodos = async () => {
    try {
      const { data } = await getDB().from("todos").select("*").range(0, 9);
      setTodos(data);
    } catch (error) {
      console.error("获取待办事项失败:", error);
    }
  };

  return (
    <>
      <div>
        <ul>
          {" "}
          {todos.map((todo) => (
            <li key={todo.id}> {todo.title} </li>
          ))}{" "}
        </ul>{" "}
      </div>{" "}
    </>
  );
}

export default App;

6. 启动应用

在项目根目录下执行以下命令启动应用：

npm run dev

注意事项

• 操作不同环境数据时，需设置对应的 envType。
• 若使用其他登录方式（参考【登录认证】），将 auth.signInAnonymously() 替换为对应登录方法。