V2CE – 借助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");

复制

mounted() {
   console.log("mounted");
   collection.get().then((res) => {
       // console.log(res)
       this.list = res.data;
  });
},

复制

search(keywords) {
   console.log(keywords);
   collection
      .where({
           name: {
               $regex: keywords + ".*",
          },
      })
      .get()
      .then((res) => {
           console.log(res);
           this.list = res.data;
      });
},

复制

add() {
    collection
        .add({
            name: this.name,
            complete: false,
        })
        .then((res) => {
            this.name = "";
        });
    collection.get().then((res) => {
        this.list = res.data;
        this.search("")
    });
},

复制

del(id) {

     console.log(id);
     collection
        .doc(id)
        .remove()
        .then((res) => {
             console.log(res);
        });
     collection.get().then((res) => {
         this.list = res.data;
         this.search("")
    });
},

复制

complete(id,complete){
   console.log(id)
   comolete = !complete
   collection
    .doc(id)
    .update({
         complete:comolete
    })
   collection.get().then((res) => {
     this.list = res.data;
     this.search("")
});
}

复制