云开发【云函数的使用】

---

前言

文档是这么介绍云函数的：使用 CloudBase 的云函数，您可以以函数的形式运行后端代码，响应 SDK 的调用或者 HTTP 请求。您的代码会储存在云端，并且在托管环境中运行，无需管理或运维自己的服务器

访问支持CloudBase SDK 的调用，也可以使用 以 HTTP 请求的形式调用云函数。

一、创建一个云函数项目

运行命令tcb new app node-starter会提醒选择地域与环境，

选好之后静静等待，等出现如下字样就说明创建项目成功了

查看文件夹就会多出：

进入app

二、部署云函数

编译器打开项目看到这里有一个现成的例子

// 返回输入参数
exports.main = async (event) => {//event 为前端传来的参数
    console.log('Hello World')
    return event
}

直接部署试试还不好用，运行命令tcb fn deploy node-app,看到下面这样就说明部署成功了

通过tcb fn list可以查看云函数列表

这里贴一下官网的命名

functions:list [options]                                         展示云函数列表
  functions:download [options] <functionName> [dest]               下载云函数代码
  functions:deploy [options] [functionName]                        部署云函数
  functions:delete [options] [functionName]                        删除云函数
  functions:detail [options] [functionName]                        获取云函数信息
  functions:code:update [options] <functionName>                   更新云函数代码
  functions:config:update [options] [functionName]                 更新云函数配置
  functions:copy [options] <functionName> <newFunctionName>        拷贝云函数
  functions:log [options] <functionName>                           打印云函数日志
  functions:trigger:create [options] [functionName]                创建云函数触发器
  functions:trigger:delete [options] [functionName] [triggerName]  删除云函数触发器
  functions:invoke [options] [functionName]                        触发云端部署的云函数
  functions:run [options]                                          本地运行云函数（当前仅支持 Node）

三、访问云函数

1. CloudBase SDK 调用

• 在vue项目中创建文件CloudFunction.vue,代码如下

<template>
  <div>云函数测试</div>
</template>

<script setup lang="ts">
import cloudbase from "@cloudbase/js-sdk";

const app = cloudbase.init({
  env: "环境ID",//自行替换
  region: "地域",//自行替换
});
app
  .callFunction({
    // 云函数名称
    name: "node-app",
    // 传给云函数的参数
    data: {
      a: 1,
    },
  })
  .then((res) => {
    console.log(res);//成功返回结果
  })
  .catch(console.error);//错误返回结果
</script>

<style scoped>
</style>

运行后在控制台会看到如下结果,说明访问成功

2. http调用

• 1. 新建http访问服务
     
• 2)在vue项目中使用

<template>
  <div>云函数测试</div>
</template>

<script setup lang="ts">
import cloudbase from "@cloudbase/js-sdk";
import axios from "axios";
const app = cloudbase.init({
  env: "vuetest-5gm5shnx249b44d4",
  region: "ap-shanghai",
});

/**
    执行登录流程，此处省略……
*/
const authHeader = cloudbase.auth().getAuthHeader();

 axios({
    method: "post",
    url: "https://vuetest-5gm5shnx249b44d4.service.tcloudbase.com/app",
    data: {
       a:1,
       b:3
    },
    headers: {
        ...authHeader
    },
  }).then((res) => {
    console.log(res);
  });


</script>

<style scoped>
</style>

• 3)页面中看效果
  

四、在编辑器中使用插件创建项目

什么？上面那么多太麻烦？好吧，那我也就不藏了。。。下面这个插件你一定需要

vscode 搜索Tencent CloudBase Toolkit，会发现这样一个插件
别犹豫点他，下载完成以后编辑器左侧就会多出这样一个小图标，然后点击，再点击点击初始化云开发项目

请忽略左侧的小霸王，接下来还是会选择地域和环境，选择好了以后回车确定，不再多说了（如果提示没有登录，请小伙伴自行在命名行中打出tcb login，参考图2）

图1

图2

如果上面的登入不行，点击刷新然后点这里的登录如图


这里这两个登录都可以，我推荐用第二个，会要id和key，去这个地方https://console.cloud.tencent.com/cam/capi即可

登录完成,初始化项目把,选地域和选环境就不多说了,这里选vue项目(当然也可以选别的,按需来)

然后看到目录如下就说明创建好了，是不是很简单呢

有了插件以后点击右键可以发现多了好多好玩的功能(见篮框),按照红框操作先同步云函数列表,一会调试用(新建和部署的就不再演示了,直接点就行,先新建写好了点部署,很简单的)

云函数调试

关于云函数调试我查资料查了两天了,刚开始可以进入断点调试,但是不知道如何传参,最后虽然知道传参了,但是感觉还是没有达到前端一掉就能进入断点断住(说白了就是传死参),而且还只是本地调试,云调试还没搞明白,这块欢迎有经验的小伙伴在评论区补充,我真的是抓破头了.

同步函数列表后先下载代码

云开发同步函数列表事不会给把代码下下来的,所以说先同步一遍准没错,你不需要不下就是了,下载操作如图

配置文件初始化

{
  "version": "2.0",
  "envId": "vuetest-5gm5shnx249b44d4",
  "$schema": "https://framework-1258016615.tcloudbaseapp.com/schema/latest.json",
  "functionRoot": "cloudfunctions",
   
  "functions": [
    {
      "name": "node-app",
      "timeout": 5,
      "envVariables": {},
      "runtime": "Nodejs10.15",
      "memory": 128,
      "aclRule": { "invoke": true },
      "config": {
        "timeout": 5,
        "envVariables": {
          "key": "value"
        },
        "runtime": "Nodejs10.15",
        "installDependency": true
      },
      "params": {
        "a": 1,
        "b": 2
      }
    }
  ],
  "framework": {
    "name": "vue",
    "plugins": {
      "client": {
        "use": "@cloudbase/framework-plugin-website",
        "inputs": {
          "buildCommand": "npm run build",
          "outputPath": "dist",
          "cloudPath": "/vue",
          "envVariables": {
            "VUE_APP_ENV_ID": "{{env.ENV_ID}}"
          }
        }
      },
      "server": {
        "use": "@cloudbase/framework-plugin-function",
        "inputs": {
          "functionRootPath": "cloudfunctions",
          "functions": [
            {
              "name": "vue-echo",
              "timeout": 5,
              "envVariables": {},
              "runtime": "Nodejs10.15",
              "memory": 128,
              "aclRule": { "invoke": true }
            }
          ]
        }
      },
      "auth": {
        "use": "@cloudbase/framework-plugin-auth",
        "inputs": {
          "configs": [
            {
              "platform": "NONLOGIN",
              "status": "ENABLE"
            }
          ]
        }
      }
    }
  }
}

可能代码也下载完了开始抑制不住自己的小手想点调试了呢,别急这里先将配置文件初始化一些,不然参数穿不进去的(我开始就是这样,虽然好用但是没法传参)
补下官网地址和图片,链接

首先点本地的这个配置文件,然后如图

开始本地断点调试

上面的保存之后就可以愉快的调试了,选择配置的函数,然后点击调试云函数

选择本地调试,然后有个调用参数可选不管他直接回车即可(主要是我没研究明白怎么用,怎么传都是非法json)


然后就看见结果了

总结

本文介绍了命令行创建部署云函数以及用插件的使用,但是调试我还在摸索,也希望有高人在评论区指导我一二.抱拳 ~~ ,抱拳 ~~