社区/文章分享/借助Web云开发数据库,让你的静态H5“动”起来!

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

如果你设计出了一个好看好玩的 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("")
});
}

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

9.部署该应用

在完成了应用的开发以后,我们可以顺便用云开发提供的静态托管能力部署应用

  • 手动上传

登录云开发控制台,点击左侧的静态网站托管,并点击开始使用,然后等待初始化完成。

初始化完成后,我们将刚刚所写的代码和所需要的依赖文件上传到静态网站托管:

然后,点击上面的基础配置就可以看见域名信息处有一个默认域名,点击该默认域名,就可以访问到刚刚所写的应用了。

  • 利用云开发 CLI 工具

除了使用上面的方式部署外,还有一种更简单的,那就是使用云开发提供的 CLI 工具,需要用 npm 安装云开发 CLI。

关于云开发 CLI 的安装,你可以查看官方的文档:

https://cloud.tencent.com/document/product/1209/42664

当你安装好了这个工具并进行了登录,就可以通过命令行的形式来部署应用了,只需要执行一条命令(前提是在云开发控制台开通了静态网站服务):tcb hosting:deploy ./todo / -e envId

todo 是项目的目录名,/代表云端文件根路径

最后会出现下面这样的结果:

到此就部署完成了,如果想要查看静态网站的状态,访问域名等信息,可以执行tcb hosting:detail -e envId

总结

在上面的内容中,我们通过引入云开发的 SDK、初始化项目和编写数据代码,仅需几步就可以让一个静态的 H5 “动”起来啦,快去动手试试吧!