专栏首页云开发借助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 “动”起来啦,快去动手试试吧!

技术文档:https://cloudbase.net?from=10004

技术交流加Q群:601134960

最新资讯关注微信公众号【腾讯云云开发】

本文分享自微信公众号 - 腾讯云云开发(tcb2tcb),作者:布道师杨国杰

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 请收下,近期云开发新能力汇总来了!

    小程序·云开发已提供按量计费功能,在按量付费模式下,系统每月会提供一定的免费额度供开发者使用,超过免费额度的资源消耗将按照对应的刊例价扣除费用。

    腾讯云开发TCB
  • 有奖征集:云开发CloudBase的101种玩法

    Web 云开发是云开发面向 Web 场景的产品,已经上线数月。Web云开发采用 serverless 架构,免环境搭建等运维事务,为用户带来了极大的便利。

    腾讯云开发TCB
  • 一招之力,Python打通云开发七经六脉

    “众所周知,云开发目前只支持Node js,如何突破这个限制?且看高手们如何用Python打通云开发七经六脉,让云开发的使用更加行云流水。”

    腾讯云开发TCB
  • 【leetcode】背包问题

    完全背包的特点恰是每种物品可选无限件,所以就可以并且必须采用 w = W[i]…carry 的顺序循环:

    JNingWei
  • 简单聊下最近我对数据系统的看法

    1. 因为面向对象语言和关系性数据库存在阻抗不匹配(impedance mismatch),并且随着需要处理的数据量增大,文档型数据以“NoSQL”的名义获得了...

    哒呵呵
  • 简单聊下最近我对数据系统的看法

    1. 因为面向对象语言和关系性数据库存在阻抗不匹配(impedance mismatch),并且随着需要处理的数据量增大,文档型数据以“NoSQL”的名义获得了...

    哒呵呵
  • 腾讯犀牛鸟云开发教学支持计划开放申请中

    为贯彻落实《教育部应对新型冠状病毒感染肺炎疫情工作领导小组办公室关于在疫情防控期间做好普通高等学校在线教学组织与管理工作的指导意见》(教高厅〔2020〕2号)...

    腾讯高校合作
  • 记一次使用Zookeeper C API导致的内存泄漏

    可以看到 definitely lost: 24 bytes in 1 blocks

    扫帚的影子
  • Chrome扩展程序之编码&时间戳小工具

    Chrome扩展程序之编码&时间戳小工具 作为一个前端小白,对于chrome扩展程序久闻大名,实际动手头一次;前天晚上到前端哪里串门看到小伙伴在搞这个,要了份...

    一灰灰blog
  • Express.js 4,Node.js,MongoDB REST API 简易教程

    教程内容 采用测试驱动开发的方式,开发一个简单的 REST API,包括基本的 POST/GET/PUT/DELETE 操作 先编写好针对各个接口的测试代码,包...

    dys

扫码关注云+社区

领取腾讯云代金券