跳到主要内容

React(Vite) 快速开始

准备工作​

在开始之前，请确保您已完成以下准备：

  1. 开通云开发环境：开通云开发环境
  2. 安装 Node.js：下载 Node.js（建议 LTS 版本）

更多详情请参考：React(Vite) 完整文档

添加 CloudBase AI 开发插件​

可选：如果你使用 AI 编程助手（如 Cursor、Claude Code、CodeBuddy 等）进行开发，建议先完成本步骤，让 AI 具备 CloudBase 开发能力。

复制 AI Prompt 粘贴到 AI IDE​

在 AI 对话中输入：

帮我把 CloudBase 接好，按下面做：
1. 打开 https://docs.cloudbase.net/skill.md，按说明完成接入。
2. 接入完成后告诉我，并建议最相关的下一步。

查看 skill.md →

使用 Skills 开发​

对 AI 说：

使用 CloudBase Skills：在 React(Vite) 应用中集成 CloudBase Web SDK，包括认证和数据库功能

Skills 使用文档 →

也可以手动安装 CloudBase Skills：

npx skills add tencentcloudbase/cloudbase-skills -y

安装 SDK​

@cloudbase/js-sdk 可以让您在 Web 端（如 PC Web 页面、微信公众平台 H5 等）使用 JavaScript 访问 CloudBase 服务和资源。

npm​

npm i @cloudbase/js-sdk

yarn​

yarn add @cloudbase/js-sdk

pnpm​

pnpm add @cloudbase/js-sdk

初始化 SDK​

新增如下代码到您的 React 项目

src/utils/cloudbase.js​

import cloudbaseSDK from "@cloudbase/js-sdk";

export const cloudbase = cloudbaseSDK.init({
  env: import.meta.env.VITE_CLOUDBASE_ENV_ID,
  region: import.meta.env.VITE_CLOUDBASE_REGION,
  accessKey: import.meta.env.VITE_CLOUDBASE_ACCESS_KEY
});

.env​

# 环境ID
VITE_CLOUDBASE_ENV_ID={%ENV_ID%}

# 环境所在地域
VITE_CLOUDBASE_REGION={%REGION%}

# 匿名访问令牌
VITE_CLOUDBASE_ACCESS_KEY={%PUBLISHABLE_KEY%}

身份认证​

使用 短信验证码注册 请先前往 身份认证/登录方式 开启 短信验证码

调用方式：

import { cloudbase } from "./utils/cloudbase";

const auth = cloudbase.auth();

// 发送验证码
const res = await auth.getVerification({ phone_number: phone });

// 验证验证码
const verifyRes = await auth.verify({
  verification_id: verificationId,
  verification_code: code
});

// 注册（如用户已存在则自动登录）
await auth.signUp({
  phone_number: `+86 ${phone}`,
  verification_code: code,
  verification_token: verifyRes.verification_token,
  name: `user_${phone.slice(-4)}`,
  password: "admin@123"
});

完整示例：

import { useState } from "react";
import { cloudbase } from "./utils/cloudbase";

function Page() {
  const [phone, setPhone] = useState("");
  const [code, setCode] = useState("");
  const [verificationId, setVerificationId] = useState("");
  const [message, setMessage] = useState("");

  // 发送验证码
  const sendCode = async () => {
    try {
      const auth = cloudbase.auth();
      const res = await auth.getVerification({ phone_number: phone });
      setVerificationId(res.verification_id);
      setMessage("验证码已发送！");
    } catch (error) {
      setMessage("发送失败：" + error.message);
    }
  };

  // 注册
  const register = async () => {
    try {
      const auth = cloudbase.auth();
      // 验证验证码
      const verifyRes = await auth.verify({
        verification_id: verificationId,
        verification_code: code
      });
      // 注册（如用户已存在则自动登录）
      await auth.signUp({
        phone_number: `+86 ${phone}`,
        verification_code: code,
        verification_token: verifyRes.verification_token,
        name: `user_${phone.slice(-4)}`,
        password: "admin@123"
      });
      setMessage("注册成功！");
    } catch (error) {
      setMessage("注册失败：" + error.message);
    }
  };

  return (
    <div>
      <label>手机号：</label>
      <input
        value={phone}
        onChange={e => setPhone(e.target.value)}
        placeholder="13800000000"
      />
      <div>
        <label>验证码：</label>
        <input
          value={code}
          onChange={e => setCode(e.target.value)}
          placeholder="验证码"
        />
        <button disabled={!phone} onClick={sendCode}>
          发送验证码
        </button>
      </div>
      <button disabled={!verificationId || !code} onClick={register}>
        注册
      </button>
      {message && (
        <p style={{ color: message.includes("成功") ? "green" : "red" }}>
          {message}
        </p>
      )}
    </div>
  );
}

export default Page;

文档型数据库​

调用方式：

import { cloudbase } from "./utils/cloudbase";

// 查询 {%TABLE_NAME%} 表前10条数据
const db = cloudbase.database();
const res = await db.collection("{%TABLE_NAME%}").limit(10).get();
console.log(res.data);

完整示例：

import { useState, useEffect } from "react";
import { cloudbase } from "./utils/cloudbase";

function Page() {
  const [data, setData] = useState([]);

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

  const getData = async () => {
    // 查询 {%TABLE_NAME%} 表前10条数据
    const db = cloudbase.database();
    const res = await db.collection("{%TABLE_NAME%}").limit(10).get();
    setData(res.data || []);
  };

  return (
    <ul>
      {data.map(item => (
        <li key={item._id}>{item.title}</li>
      ))}
    </ul>
  );
}

export default Page;

云存储​

调用方式：

import { cloudbase } from "./utils/cloudbase";

const res = await cloudbase.uploadFile({
  cloudPath: `images/${Date.now()}-${file.name}`, // 上传至云端的路径
  filePath: file
});
console.log(res.fileID);

完整示例：

import { useState } from "react";
import { cloudbase } from "./utils/cloudbase";

function Page() {
  const [fileID, setFileID] = useState("");

  const uploadFile = async e => {
    const file = e.target.files[0];
    const res = await cloudbase.uploadFile({
      cloudPath: `images/${Date.now()}-${file.name}`, // 上传至云端的路径
      filePath: file
    });
    setFileID(res.fileID);
  };

  return (
    <div>
      <input type="file" onChange={uploadFile} />
      {fileID && <p>上传成功: {fileID}</p>}
    </div>
  );
}

export default Page;

云函数​

调用方式：

import { cloudbase } from "./utils/cloudbase";

// 调用 {%FUNCTION_NAME%} 云函数
const res = await cloudbase.callFunction({
  name: "{%FUNCTION_NAME%}",
  data: {}
});
console.log(res.result);

完整示例：

import { useState } from "react";
import { cloudbase } from "./utils/cloudbase";

function Page() {
  const [data, setData] = useState(null);

  const getData = async () => {
    // 调用 {%FUNCTION_NAME%} 云函数
    const res = await cloudbase.callFunction({
      name: "{%FUNCTION_NAME%}",
      data: {}
    });
    setData(res.result);
  };

  return (
    <div>
      <button onClick={getData}>调用云函数</button>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

export default Page;

大模型​

调用方式：

import { cloudbase } from "./utils/cloudbase";

const res = await cloudbase
  .ai()
  .createModel("{%AI_MODEL_NAME%}")
  .streamText({
    model: "{%AI_SUB_MODEL_NAME%}",
    messages: [{ role: "user", content: "你好" }]
  });

for await (let data of res.dataStream) {
  // 如果有则打印思维链内容
  const think = data?.choices?.[0]?.delta?.reasoning_content;
  if (think) console.log(think);

  // 打印生成文本内容
  const text = data?.choices?.[0]?.delta?.content;
  if (text) console.log(text);
}

完整示例：

import { useState } from "react";
import { cloudbase } from "./utils/cloudbase";

function Page() {
  const [data, setData] = useState("");
  const [input, setInput] = useState("");

  const getData = async () => {
    const res = await cloudbase
      .ai()
      .createModel("{%AI_MODEL_NAME%}")
      .streamText({
        model: "{%AI_SUB_MODEL_NAME%}",
        messages: [{ role: "user", content: input }]
      });

    let result = "";
    for await (let data of res.dataStream) {
      // 如果有则打印思维链内容
      const think = data?.choices?.[0]?.delta?.reasoning_content;
      if (think) {
        result += think;
      }

      // 打印生成文本内容
      const text = data?.choices?.[0]?.delta?.content;
      if (text) result += text;

      setData(result);
    }
  };

  return (
    <div>
      <input
        value={input}
        placeholder="请输入大模型对话内容"
        onChange={e => setInput(e.target.value)}
      />
      <button onClick={getData}>发送</button>
      <p>{data}</p>
    </div>
  );
}

export default Page;