借助Web云开发数据库，让你的静态H5“动”起来！

腾讯云开发TCB • 2023-01-02 • 云技术社区 • 478 阅读

如果你设计出了一个好看好玩的 H5 ，却碍于没有好用的后端来存储用户的数据，那不妨试试云开发 https://cloud.tencent.com/product/tcb?from=12334

，轻松让你的静态 H5 “动”起来！

云开发提供的云数据库支持从前端直接调用，可以大大提升前端工程师的开发效率，让前端工程师也可以直接操作数据库，大大降低开发成本。

这篇文章以最简单的 Todo List 为例，介绍如何为你的 Web 应用加入数据库后端，并实现直接调用的能力！

1.构建简单的界面

为了简化整个项目的逻辑，我们使用 Vue 和 BootStrap 构建一个简单的界面。

界面的代码具体如下：

<div id="app">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">web应用中使用数据库</h3>
    </div>
    <div class="panel-body form-inline">
      <label>
        Name:
        <input type="text" class="form-control" v-model="name" />
      </label>

      <input
        type="button"
        value="添加"
        class="btn btn-primary"
        @click="add()"
      />

      <label>
        搜索名称关键字：
        <input type="text" class="form-control" v-model="keywords" />
      </label>

      <input
        type="button"
        value="查找"
        class="btn btn-primary"
        @click="search(keywords)"
      />
    </div>
  </div>

  <table class="table table-bordered table-hover table-striped">
    <thead>
      <tr>
        <th>things</th>
        <th>delete</th>
        <th>finsih</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in list" :key="item._id">
        <td :class="[item.complete?'active':'']" v-text="item.name"></td>
        <td>
          <a href="" @click.prevent="del(item._id)">删除</a>
        </td>
        <td>
          <a href="" @click.prevent="complete(item._id,item.complete)"
            >{{item.complete?'取消完成':'已完成'}}</a
          >
        </td>
      </tr>
    </tbody>
  </table>
</div>
展开

有了基本的界面，我们就可以借助云开发，来实现动态的部分。

2.开通云开发环境

想要使用云开发，我们需要先开通云开发环境，来存储我们的数据。

打开腾讯云控制台，在云产品一栏中找到：云开发->云开发cloudbase，或者直接从这里进入。然后点击新建环境，填一些基本信息，最后点击立即开通：

等待环境初始化完成后就可以点击进入环境，你会看到如下界面：

本次实践中，我们主要使用界面左侧的数据库功能，点击数据库并创建所要使用的 todo 集合，并根据你的需要设置权限，这里我们使用默认的「仅创建者及管理员可读写」。

至此，环境开通完成，下面开始介绍云开发的配置代码。

3.配置 web 应用

要想在 web 应用中使用云数据库，首先应该进行一些基本的配置，先要引入云开发的 JS-SDK ，在你的项目中添加如下代码来引入 JS-SDK：

<script src="https://imgcache.qq.com/qcloud/tcbjs/1.3.5/tcb.js"></script>

然后，编写代码初始化云开发环境：

const app = tcb.init({
 env: "你的环境id",
});
app
.auth()
.signInAnonymously()
.then(() => {
   // alert("登录云开发成功！");
});
const db = app.database();
const collection = db.collection("todo");

这些代码就可以将网页应用和你的云开发环境关联起来，并指定了我们需要使用的集合。接下来，就可以配合 Vue 的生命周期来加载数据。

4.初始化：从数据库中抓取数据

mounted() {
   console.log("mounted");
   collection.get().then((res) => {
       // console.log(res)
       this.list = res.data;
  });
},

上面这段代码是在页面加载完成时获取数据库中所有数据，然后用 vue 的数据绑定渲染到页面上。这样，我们的 H5 就可以将数据库的内容渲染到网页中。

5.查询：从数据库中提取数据

除了显示数据库数据，还可以根据你的需要，来查询特定的数据，举个例子：

search(keywords) {
   console.log(keywords);
   collection
      .where({
           name: {
               $regex: keywords + ".*",
          },
      })
      .get()
      .then((res) => {
           console.log(res);
           this.list = res.data;
      });
},

上面的代码实现了从数据库中通过关键字查询 name 这个属性的值，来改变要渲染的数据，这里用到了正则匹配来进行模糊查询，你也可以根据你的需要，实现特定的查询需求。

6.新增：上传数据

在 H5 应用中，我们经常要提交数据到云端，而使用云开发，只需一行代码即可实现数据查询。

add() {
    collection
        .add({
            name: this.name,
            complete: false,
        })
        .then((res) => {
            this.name = "";
        });
    collection.get().then((res) => {
        this.list = res.data;
        this.search("")
    });
},

这段代码实现了向数据库中添加一条数据，在添加的字段中：名字从用户输入中获取，完成情况默认为未完成，并且在添加完成后重新获取数据，并调用 search 方法来让页面的数据实时变化。

此外，需要注意的是，进行添加操作云数据库还会默认添加 _id 属性。

7.删除: 移除无用的数据

del(id) {

     console.log(id);
     collection
        .doc(id)
        .remove()
        .then((res) => {
             console.log(res);
        });
     collection.get().then((res) => {
         this.list = res.data;
         this.search("")
    });
},

上面的代码是实现了根据数据的_id 通过传参的方式从数据库中删除一条数据，并即时的展现在页面上。

8.更新：调整数据状态

在数据更新的情况下，你也可以在云开发中使用一行代码来完成数据状态的变更。

complete(id,complete){
   console.log(id)
   comolete = !complete
   collection
    .doc(id)
    .update({
         complete:comolete
    })
   collection.get().then((res) => {
     this.list = res.data;
     this.search("")
});
}