跳到主要内容

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

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

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

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

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

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

2. 创建 Vue 应用​

要求 Node.js 版本 >= 20.19

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

3. 安装云开发 SDK 依赖​

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

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

4. 声明云开发环境变量​

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

VITE_CLOUDBASE_ENV_ID=<云开发环境 ID>

5. 从应用查询数据​

在 App.vue 中添加以下代码查询数据：

<script setup>
import { ref, onMounted } from "vue";
import cloudbase from "@cloudbase/js-sdk";

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;
};

const todos = ref([]);

const fetchTodos = async () => {
  try {
    const models = await getModels();
    const { data } = await models.todos.list({
      filter: { where: {} },
      pageSize: 10,
      pageNumber: 1,
      getCount: true,
      envType: "pre",
    });
    todos.value = data.records;
  } catch (error) {
    console.error("获取待办事项失败:", error);
  }
};

onMounted(() => {
  fetchTodos();
});
</script>

<template>
  <div>
    <ul>
      <li v-for="todo in todos" :key="todo._id">{{ todo.title }}</li>
    </ul>
  </div>
</template>

6. 启动应用​

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

npm run dev

注意事项​

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