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

如何把你的静态 H5 变成动态 H5

如果你设计出了一个好看好玩的 H5 ，却因为没有好用的后端来存储用户的数据，那不妨试试看云开发，使用云开发来让你的 H5 “动”起来。

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

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

构建简单的界面

为了简化整个项目的逻辑，我们使用 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>

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

1. 开通云开发环境

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

打开腾讯云控制台，在云产品一栏中找到:云开发->云开发cloudbase，然后点击新建环境，填一些基本信息，然后点击立即开通

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

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

至此，环境开通完成，下面开始写云开发的代码

配置 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 的生命周期来加载数据

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

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

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

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

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

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

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

新增：上传数据

在 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 属性。

删除: 移除无用的数据

 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 通过传参的方式从数据库中删除一条数据，并即时的展现在页面上

更新：调整数据状态

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

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

你可以通过点击来改变单条数据的 complete 属性值来改变完成状态。