CloudBase Framework 及 Toolkit 入门

作者: wyc0859 | 来源:发表于2020-08-21 15:48 被阅读0次

CloudBase Framework 及 Toolkit 入门
云开发 VSCode 插件 Cloudbase Toolkit
攻略丨云开发VS Code 插件 CloudBase Toolk
django_rest_framework 入门笔记：分页，多条
django_rest_framework 入门笔记：视图函数重
django_rest_framework 入门笔记：Seria
django 自带 user 字段扩展及头像上传
django 入门笔记：数据模型
django 入门笔记：通用视图类重构视图
django 入门笔记：环境及项目搭建

CloudBase 云开发

CloudBase Framework：是腾讯推出的云端一体化的云服务平台，是前后端一体化部署工具，支持前后端一键托管部署在云开发平台，开发者无需改动业务代码，即可享受加速访问和弹性免运维的优势

CloudBase Toolkit：

是云开发的 VS Code（Visual Studio Code）插件。该插件可以让您更好地在本地进行云开发项目开发和代码调试，并且轻松将项目部署到云端

官方文档：https://www.cloudbase.net/
https://cloud.tencent.com/document/product/876

可以用CloudBase cli 命令创建项目，也可以直接用CloudBase Toolkit的vs插件创建项目

1、vscode中安装插件：CloudBase Toolkit

安装成功后如下图

image.png

2、关联云开发

先创建一个空项目，然后点击初始化云开发项目，会提示先登录，创建环境，然后关联。

image.png

注意创建环境时，你需要vue应用，但没有选项，是可以直接点开通的

image.png

3、创建多种应用模板：vue，nodejs，react，php，java等

在vscode关联环境和，可以选择创建不同的应用，如创建vue应用，成功后刚才的空项目就自动多了下图文件结构

image.png

安装，运行，访问

npm install
npm run serve

成功访问如下图

image.png

云开发 Vue 插件文档

https://docs.cloudbase.net/cloudbase-vue/introduce.html

跟着文档代码走，复制下面代码替换app.vue的内容，访问显示“未登录”
从代码看，是在created()中执行云函数，登陆，修改页面变量，但云函数执行失败。

<template>
  <div id="app">
    <LoginState v-slot="{ loginState }">
      <h1>{{ loginState ? '已登录' : '未登录' }}</h1>
    </LoginState>
  </div>
</template>

<script>
  import Vue from "vue";
  import Cloudbase from "@cloudbase/vue-provider";

  Vue.use(Cloudbase, {
    env: "your-env-id"
  });

  export default {
    async created() {
      // 以匿名登录为例
      await this.$cloudbase.auth({ persistence: "local" }).anonymousAuthProvider().signIn();
    }
  };
</script>

为什么失败，原因如下：
1、替换your-env-id （cloudbaserc.json文件中有，就是环境Id）
2、开通匿名登录及安全域名，可以去腾讯云平台设置或代码设置。

cloudbase env:login:list    //查看开通的登录方式   是否有  匿名登录 
cloudbase env:domain:list  //查看安全域名，是否有你本地调试的域名，如：192.168.1.112:5000

3、完成以上配置访问页面，结果就是已登录

访问数据库

在腾讯云平台数据库，新建一个集合，入录一些数据，或直接导入json文件。
注意JSON 数据不是数组，而是类似 JSON Lines，即各个记录对象之间使用 \n 分隔，而非逗号。

  {
    "_id": "todo-identifiant-aleatoire",
    "due": "1",
    "style": "white",
    "tags": "database",
    "process": 20,
    "done": false
  }
  {
    "_id": "todo-identifiant-aleatoire-2",
    "due":  "2",
    "style": "yellow",
    "tags": "database",
    "process": 50,
    "done": false
  }

先登录，才能获取数据。注意，如果是匿名登陆，数据库权限一定要设置为所有用户可读才有数据。不然访问是空

  async created() {
    // 登录
     await this.$cloudbase.auth({ persistence: "local" }).anonymousAuthProvider().signIn(); 
    // 数据库查询
    // const queryResult = await this.$cloudbase.database().collection("集合名").where({}).get();    
    const queryResult = await this.$cloudbase.database().collection("集合名").doc("文档ID").get();
    console.log("结果:",queryResult.data)
  }

云函数文档

查看云函数：cloudbase functions:list
部署配置文件中的全部函数：cloudbase functions:deploy
部署配置文件中的指定函数：cloudbase functions:deploy <functionName>

vscode 中新建云函数，然后部署到云函数。
由于调用的是云函数，所以本地创建的函数必须上传一下；
云平台建的函数，也必须点“下载云函数代码”才会在vscode中显示。

32.png

调用云函数

this.$cloudbase.callFunction({
      name: "abc"
    }).then((res) => {
      console.log('fun:',res.result);  
    });

云函数中访问数据库
1、vscode 本地新建云函数
2、复制以下代码，上传云函数
3、腾讯云开发平台，点击云函数，保存并安装依赖。
4、系统会提示少pa地在本地进行云开发项目开发和代码调试，并且轻松将项目部署到云端

官方文档：https://www.cloudbase.net/
https://cloud.tencent.com/document/product/876

可以用CloudBase cli 命令创建项目，也可以直接用CloudBase Toolkit的vs插件创建项目

1、vscode中安装插件：CloudBase Toolkit

安装成功后如下图

image.png

2、关联云开发

先创建一个空项目，然后点击初始化云开发项目，会提示先登录，创建环境，然后关联。

image.png

注意创建环境时，你需要vue应用，但没有选项，是可以直接点开通的

image.png

3、创建多种应用模板：vue，nodejs，react，php，java等

在vscode关联环境和，可以选择创建不同的应用，如创建vue应用，成功后刚才的空项目就自动多了下图文件结构

image.png

安装，运行，访问

npm install
npm run serve

成功访问如下图

image.png

云开发 Vue 插件文档

https://docs.cloudbase.net/cloudbase-vue/introduce.html

跟着文档代码走，复制下面代码替换app.vue的内容，访问显示“未登录”
从代码看，是在created()中执行云函数，登陆，修改页面变量，但云函数执行失败。

<template>
  <div id="app">
    <LoginState v-slot="{ loginState }">
      <h1>{{ loginState ? '已登录' : '未登录' }}</h1>
    </LoginState>
  </div>
</template>

<script>
  import Vue from "vue";
  import Cloudbase from "@cloudbase/vue-provider";

  Vue.use(Cloudbase, {
    env: "your-env-id"
  });

  export default {
    async created() {
      // 以匿名登录为例
      await this.$cloudbase.auth({ persistence: "local" }).anonymousAuthProvider().signIn();
    }
  };
</script>

为什么失败，原因如下：
1、替换your-env-id （cloudbaserc.json文件中有，就是环境Id）
2、开通匿名登录及安全域名，可以去腾讯云平台设置或代码设置。

cloudbase env:login:list    //查看开通的登录方式   是否有  匿名登录 
cloudbase env:domain:list  //查看安全域名，是否有你本地调试的域名，如：192.168.1.112:5000

3、完成以上配置访问页面，结果就是已登录

访问数据库

在腾讯云平台数据库，新建一个集合，入录一些数据，或直接导入json文件。
注意JSON 数据不是数组，而是类似 JSON Lines，即各个记录对象之间使用 \n 分隔，而非逗号。

  {
    "_id": "todo-identifiant-aleatoire",
    "due": "1",
    "style": "white",
    "tags": "database",
    "process": 20,
    "done": false
  }
  {
    "_id": "todo-identifiant-aleatoire-2",
    "due":  "2",
    "style": "yellow",
    "tags": "database",
    "process": 50,
    "done": false
  }

先登录，才能获取数据。注意，如果是匿名登陆，数据库权限一定要设置为所有用户可读才有数据。不然访问是空

  async created() {
    // 登录
     await this.$cloudbase.auth({ persistence: "local" }).anonymousAuthProvider().signIn(); 
    // 数据库查询
    // const queryResult = await this.$cloudbase.database().collection("集合名").where({}).get();    
    const queryResult = await this.$cloudbase.database().collection("集合名").doc("文档ID").get();
    console.log("结果:",queryResult.data)
  }

云函数文档

查看云函数：cloudbase functions:list
部署配置文件中的全部函数：cloudbase functions:deploy
部署配置文件中的指定函数：cloudbase functions:deploy <functionName>

vscode 中新建云函数，然后部署到云函数。
由于调用的是云函数，所以本地创建的函数必须上传一下；
云平台建的函数，也必须点“下载云函数代码”才会在vscode中显示。

32.png

调用云函数

this.$cloudbase.callFunction({
      name: "abc"
    }).then((res) => {
      console.log('fun:',res.result);  
    });

云函数中访问数据库
云函数和 CloudBase 服务天然集成，内部无需密钥即可直接使用 CloudBase 服务端 SDK （需要引用）
每个云函数都需要独立引用

1、vscode 本地新建云函数
2、复制以下代码，上传云函数
3、腾讯云开发平台，点击云函数，保存并安装依赖。
4、系统会提示少package.json文件，并根据代码的引入，自动给出package.json的代码，跟着创建即可。

const cloudbase = require("@cloudbase/node-sdk"); 
const app = cloudbase.init({
  env: "vue-6gb"
});

exports.main = async () => {
  var db = app.database();
  const queryResult = await db.collection("xxx").doc("todo-identifiant-aleatoire").get()
  return queryResult.data
}