時間：2023-05-24 01:39:01 | 來源：網(wǎng)站運營
時間：2023-05-24 01:39:01 來源：網(wǎng)站運營
借助Web云開發(fā)數(shù)據(jù)庫，讓你的靜態(tài)H5“動”起來（帶源碼）：
在線咨詢
<div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">web應用中使用數(shù)據(jù)庫</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> 搜索名稱關(guān)鍵字： <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>有了基本的界面，我們就可以借助云開發(fā)，來實現(xiàn)動態(tài)的部分。<script src="https://imgcache.qq.com/qcloud/tcbjs/1.3.5/tcb.js"></script>然后，編寫代碼初始化云開發(fā)環(huán)境：const app = tcb.init({ env: "你的環(huán)境id",});app.auth().signInAnonymously().then(() => { // alert("登錄云開發(fā)成功！");});const db = app.database();const collection = db.collection("todo");這些代碼就可以將網(wǎng)頁應用和你的云開發(fā)環(huán)境關(guān)聯(lián)起來，并指定了我們需要使用的集合。接下來，就可以配合 Vue 的生命周期來加載數(shù)據(jù)。mounted() { console.log("mounted"); collection.get().then((res) => { // console.log(res) this.list = res.data; });},上面這段代碼是在頁面加載完成時獲取數(shù)據(jù)庫中所有數(shù)據(jù)，然后用 vue 的數(shù)據(jù)綁定渲染到頁面上。這樣，我們的 H5 就可以將數(shù)據(jù)庫的內(nèi)容渲染到網(wǎng)頁中。search(keywords) { console.log(keywords); collection .where({ name: { $regex: keywords + ".*", }, }) .get() .then((res) => { console.log(res); this.list = res.data; });},上面的代碼實現(xiàn)了從數(shù)據(jù)庫中通過關(guān)鍵字查詢 name 這個屬性的值，來改變要渲染的數(shù)據(jù)，這里用到了正則匹配來進行模糊查詢，你也可以根據(jù)你的需要，實現(xiàn)特定的查詢需求。add() { collection .add({ name: this.name, complete: false, }) .then((res) => { this.name = ""; }); collection.get().then((res) => { this.list = res.data; this.search("") });},這段代碼實現(xiàn)了向數(shù)據(jù)庫中添加一條數(shù)據(jù)，在添加的字段中：名字從用戶輸入中獲取，完成情況默認為未完成，并且在添加完成后重新獲取數(shù)據(jù)，并調(diào)用 search 方法來讓頁面的數(shù)據(jù)實時變化。此外，需要注意的是，進行添加操作云數(shù)據(jù)庫還會默認添加 _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("") });},上面的代碼是實現(xiàn)了根據(jù)數(shù)據(jù)的_id 通過傳參的方式從數(shù)據(jù)庫中刪除一條數(shù)據(jù)，并即時的展現(xiàn)在頁面上。complete(id,complete){ console.log(id) comolete = !complete collection .doc(id) .update({ complete:comolete }) collection.get().then((res) => { this.list = res.data; this.search("")});}你可以通過點擊來改變單條數(shù)據(jù)的 complete 屬性值來改變完成狀態(tài)。tcb hosting:deploy ./todo / -e envIdtodo是項目的目錄名，/代表云端文件根路徑最后會出現(xiàn)下面這樣的結(jié)果：
tcb hosting:detail -e envId關(guān)鍵詞：靜態(tài),數(shù)據(jù),借助
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
