借助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 属性值来改变完成状态。
部署该应用
在完成了应用的开发以后,我们可以顺便用云开发提供的静态托管能力部署应用
手动上传
登录云开发控制台,点击左侧的静态网站托管,并点击开始使用,然后等待期初始化完成
初始化完成后,我们将刚刚所写的代码和所需要的依赖文件上传到静态网站托管,像下面这样
然后点击上面的基础配置就可以看见域名信息处有一个默认域名,点击该默认域名,就可以访问到刚刚所写的应用了
方式二
除了使用上面哪种方式部署外,还有一种更简单的,那就是使用云开发提供的cli工具,需要用 npm 安装云开发 Cli
当你安装好了这个工具并进行了登录,就可以可以通过命令行的形式来部署应用了,只需要执行一条命令(前提是在云开发控制台开通了静态网站服务):tcb hosting:deploy ./todo / -e envId
todo是项目的目录名,/代表云端文件根路径
最后会出现下面这样的结果
到此就部署完成了,如果想要查看静态网站的状态,访问域名等信息,可以执行tcb hosting:detail -e envId
完整代码
项目的完整代码可以在 https://github.com/1793523411/todo-web-cloudbase 查看。
总结
在上面的内容中,我们通过引入云开发的 SDK、初始化项目、编写数据代码,就可以实现将一个静态的 H5 转换成为一个动态的 H5,让你的 “H5” “动”起来。
公众号:腾讯云云开发
腾讯云云开发:https://cloudbase.net
云开发控制台:https://console.cloud.tencent.com/tcb?from=12304
☁
更多精彩
扫描二维码了解更多