时间：2023-05-24 01:39:01 | 来源：网站运营
时间：2023-05-24 01:39:01 来源：网站运营
借助Web云开发数据库，让你的静态H5“动”起来（带源码）：
在线咨询
<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>有了基本的界面，我们就可以借助云开发，来实现动态的部分。<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 这个属性的值，来改变要渲染的数据，这里用到了正则匹配来进行模糊查询，你也可以根据你的需要，实现特定的查询需求。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 属性值来改变完成状态。tcb hosting:deploy ./todo / -e envIdtodo是项目的目录名，/代表云端文件根路径最后会出现下面这样的结果：
tcb hosting:detail -e envId关键词：静态,数据,借助
