雲開發-web應用中使用數據庫

時間  2020-06-19
標籤 開發 web 應用 使用 數據庫 欄目 HTML 简体版
原文   原文鏈接

如何在 web 應用中使用數據庫

隨着雲時代的到來，雲開發有着獨特的優點相對於傳統開發，從數據庫而言，cloudbase 提供的雲數據庫真的很方便，本文就以一個簡單的 todolist 小例子來說解一下如何在 web 應用中使用雲開發數據庫javascript

構建簡單的界面

下面的這個 todolist 只要包括的功能有：增長事情，刪除事情，修改事情的完成狀態，以及查詢事情，全部的操做都是基於雲數據庫的css

image-20200616114939528

該界面的構建主要用到了 Vue 和 bootstrap。使用 Vue 雙向數據綁定能夠更方便的操做數據，使用 bootstrap 來構建好看的界面html

界面構建代碼以下：vue

<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>

記得引入第三方文件java

<script src="./lib/vue-2.4.0.js"></script>
<script src="https://imgcache.qq.com/qcloud/tcbjs/1.3.5/tcb.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css" />

其中第二個就是與雲開發相關的第三方文件了web

說明：這裏的 vue 和 bootstrap 文件能夠經過 npm 自行下載數據庫

開通雲開發環境

進入控制檯在雲產品一欄中找到:雲開發->雲開發cloudbase，而後點擊新建環境，填寫基本信息向下面這樣，而後點擊當即開通npm

image-20200616121925902

環境初始化須要一段時間，初始化完成後就能夠點擊進入，會看到以下界面bootstrap

image-20200616122416190

咱們要用的就是左側的數據庫功能，點擊數據庫並建立所要使用的todo集合app

image-20200616122510561

至此，環境開通完成，下面開始寫代碼

配置 web 應用

要想在 web 應用中使用雲數據庫，首先應該進行一些基本的配置，代碼以下

const app = tcb.init({
  env: "你的環境id",
});
app
  .auth()
  .signInAnonymously()
  .then(() => {
    // alert("登陸雲開發成功！");
  });
const db = app.database();
const collection = db.collection("todo");

上面操做實現了將你的 web 應用與你的雲開發環境關聯，並肯定要鏈接的數據庫集合，也就是上面所建立的 todo集合

從數據庫中獲取數據

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

在頁面加載完成時獲取數據庫中全部數據，而後用 vue 的數據綁定渲染到頁面上

在數據庫中進行查詢

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

上面的代碼實現了從數據庫中經過關鍵字查詢 name 這個屬性的值，來改變要渲染的數據，這裏用到了正則匹配來進行模糊查詢

image-20200616115648937

向數據庫中增長數據

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

這段代碼實現了向數據庫中添加一條數據，添加的字段中，名字從用戶輸入中獲取，完成狀況默認爲未完成，而且在添加完成後從新獲取所數據，並調用 search 方法來讓頁面的數據實時的變化,進行添加操做雲數據庫還會默認添加_id 和_openid 屬性

實現刪除數據

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) => {
                        // console.log(res)
                        this.list = res.data;
                        this.search("")
                    });
                    }

最後一個功能，經過點擊來改變單條數據的 complete 屬性值來改變完成狀態，並讓 thing 對應不一樣的樣式

部署該應用

既然這樣一個應用寫好了，那咱們能不能利用雲開發cloudbase的靜態網網站託管功能來部署咱們應用呢？答案是能夠的，點擊左側的靜態網站託管，並點擊開始使用，而後等待期初始化完成

image-20200616122918313

初始化完成後，咱們將剛剛所寫的代碼和所須要的依賴文件上傳到靜態網站託管，向下面這樣

image-20200616123553515

image-20200616123653706

而後點擊上面的基礎配置就能夠看見域名信息處有一個默認域名，點擊該默認域名，就能夠訪問到剛剛所寫的應用了

完整代碼

最後附上完整的代碼

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="https://imgcache.qq.com/qcloud/tcbjs/1.3.5/tcb.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css" />
    <style>
      .active {
        text-decoration: line-through;
        color: blueviolet;
      }
    </style>
  </head>

  <body>
    <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>
            Thing:
            <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>
      const app = tcb.init({
        env: "xxx",
      });
      app
        .auth()
        .signInAnonymously()
        .then(() => {
          // alert("登陸雲開發成功！");
        });
      const db = app.database();
      const collection = db.collection("todo");
      var vm = new Vue({
        el: "#app",
        data: {
          name: "",
          keywords: "",
          list: [],
        },
        update() {
          this.search("");
        },
        mounted() {
          console.log("mounted");
          collection.get().then((res) => {
            // console.log(res)
            this.list = res.data;
          });
        },
        methods: {
          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("");
            });
          },
          search(keywords) {
            console.log(keywords);
            collection
              .where({
                name: {
                  $regex: keywords + ".*",
                },
              })
              .get()
              .then((res) => {
                console.log(res);
                this.list = res.data;
              });
          },
          complete(id, complete) {
            console.log(id);
            comolete = !complete;
            collection.doc(id).update({
              complete: comolete,
            });
            collection.get().then((res) => {
              // console.log(res)
              this.list = res.data;
              this.search("");
            });
          },
        },
      });
    </script>
  </body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程