跳到主要内容

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

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

1. 创建 MySQL 数据模型并添加数据

在云开发平台创建名为 todos 的数据模型,字段信息如下:

字段名称字段标识数据类型是否必填是否唯一
是否完成is_completed布尔值
描述description文本、多行文本
标题title文本、单行文本

创建完成后,在 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 cachedApp = null;

const getModels = async () => {
if (!cachedApp) {
cachedApp = cloudbase.init({
env: import.meta.env.VITE_CLOUDBASE_ENV_ID,
});
const auth = cachedApp.auth({
persistence: "local",
});
await auth.signInAnonymously();
}
return cachedApp.models;
};

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

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

const fetchTodos = async () => {
try {
const models = await getModels();
const { data } = await models.todos.list({
filter: { where: {} },
pageSize: 10,
pageNumber: 1,
getCount: true,
envType: "pre",
});
setTodos(data.records);
} 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() 替换为对应登录方法。