二：serverless网站数据库操作

偏执的太偏执、 2022-12-22 04:47 166阅读 0赞

## [操作数据库API文档][API] ##

## [第一篇，搭建一套免费的serverless网站][serverless] ##

## 一，创建集合，进入控制台 ##

登录腾讯云后台 [打开云开发控制台][Link 1]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70][]

可以新建集合，新建集合后点击集合名称即可批量导入导出数据库集合的数据，还可以设置数据库访问的权限，自定义权限规则等。

现在我创建了集合，可以查看、修改

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70 1][]

下面看看如何在前端代码里面操作数据库

## 二，安装js-sdk环境 ##

### 方式一：通过包管理器引入 ###

#npm
    npm install @cloudbase/js-sdk -S
    # yarn
    yarn add @cloudbase/js-sdk

### [\#][Link 2]方式二：通过 CDN 引入 ###

通过 CDN 引入有两种方式：

[\#][Link 3]引入全量 SDK

import SdkCloudbase from "@cloudbase/js-sdk";
    var aa = SdkCloudbase.init({
      env:  process.env.VUE_APP_ENV_ID || config.envId,
    });

下面是我的main.js示例代码：

import Vue from "vue";
    import App from "./App.vue";
    import Cloudbase from "@cloudbase/vue-provider";
    import config from "../cloudbaserc";
    
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    
    import SdkCloudbase from "@cloudbase/js-sdk";
    var aa = SdkCloudbase.init({
      env:  process.env.VUE_APP_ENV_ID || config.envId,
    });
    
    Vue.prototype.$db = aa.database()||'asas'
    Vue.use(ElementUI);
    
    Vue.config.productionTip = false;
    
    Vue.use(Cloudbase, {
      env: process.env.VUE_APP_ENV_ID || config.envId,
    });
    
    new Vue({
      render: (h) => h(App),
    }).$mount("#app");

在组件页面中读取数据库集合示例：

this.$db.collection("menu").get()
    				.then((res) => {
    					console.log('res-collection', res)
    				})
    				.catch((e) => {
    					console.log('catch-collection', e)
    				});

打印日志的结果：（获取到数据库集合数据了）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70 2][]

[API]: https://docs.cloudbase.net/api-reference/webv2/database.html
[serverless]: https://a-jing.blog.csdn.net/article/details/109721634
[Link 1]: https://console.cloud.tencent.com/tcb/db/index?envId=jay-serverless-vue-2d4g055fe160b&rid=4&tabId=collection
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70]: /images/20221120/a82bd728d35447d9aea0fb39a858b041.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70 1]: /images/20221120/72db28b832d5474e96086d52f7879625.png
[Link 2]: https://docs.cloudbase.net/api-reference/webv2/initialization.html#fang-shi-er-tong-guo-cdn-yin-ru
[Link 3]: https://docs.cloudbase.net/api-reference/webv2/initialization.html#yin-ru-quan-liang-sdk
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70 2]: /images/20221120/72159fc70b7f4d79bea739ab0cfc52ed.png