雲開發-web應用中使用資料庫

来源:https://www.cnblogs.com/ygjzs/archive/2020/06/17/13153439.html
-Advertisement-
Play Games

如何在 web 應用中使用資料庫 隨著雲時代的到來，雲開發有著獨特的優勢相對於傳統開發，從資料庫而言，cloudbase 提供的雲資料庫真的很方便，本文就以一個簡單的 todolist 小例子來講解一下如何在 web 應用中使用雲開發資料庫 構建簡單的界面 下麵的這個 todolist 只要包括的功 ...


如何在 web 應用中使用資料庫

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

構建簡單的界面

下麵的這個 todolist 只要包括的功能有：增加事情，刪除事情，修改事情的完成狀態，以及查詢事情，所有的操作都是基於雲資料庫的

image-20200616114939528

該界面的構建主要用到了 Vue 和 bootstrap。使用 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>

記得引入第三方文件

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

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

說明：這裡的 vue 和 bootstrap 文件可以通過 npm 自行下載

開通雲開發環境

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

image-20200616121925902

環境初始化需要一段時間，初始化完成後就可以點擊進入，會看到如下界面

image-20200616122416190

我們要用的就是左側的資料庫功能，點擊資料庫並創建所要使用的todo集合

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>


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • windows 下，如何查看文件夾被哪個程式占用（轉）
    https://blog.csdn.net/m0_37321987/article/details/903447621、右擊任務欄，啟動任務管理器； 2、選擇“性能“選項卡，點擊“資源監視器”； 3、點擊“CPU”選項卡，在“關聯的句柄”右側的“搜索句柄”輸入框輸入文件名或文件夾名並點擊搜索；win ...
  • [Linux]常用命令“ll”失效或命令未找到
    問題：常用命令“ll”失效或命令未找到 原因： "ll"命令不是linux的基本命令， 它是"ls -l"的別名， 部分版本並不直接支持“ll”命令輸出。 ###解決方法： 運行“vi ~/.bashrc” 查看該文件里是否有“alias ll='ls -l'”這樣的數據， 如有，將數據前的“#”去 ...
  • Linux基礎：basename命令總結
    basename命令用於獲取路徑中的文件名或路徑名，還可以對末尾字元進行刪除。 ...
  • 幾款一元單片機對比：CMS8S5880、STM8S003、N76E003
    晶元生態很重要，接觸到的一些進口晶元，比如ST、TI、NORDIC、AVR等，有論壇，網上能找到資料，晶元容易買到，SDK不停更新。這也就是ST的晶元、Arduino IDE市場很大、用戶基數多的原因，穩定性、功能、開發速度缺一不可。 從使用上來說，開發產品最喜歡用的還是STM8S003，但是因為價... ...
  • redis 哨兵
    哨兵作用 哨兵（sentinel) 是一個分散式系統，是程式高可用性的一個保障。用於監視任意多個主伺服器,以及這些主伺服器屬下的所有從伺服器，當出現故障時通過投票機制選擇新的master並將所有slave連接到新的master。 監控 不斷地檢查master和slave是否正常運行 master存活 ...
  • Oracle鎖-行級排它鎖（一）
    學習電子書：https://docs.oracle.com/cd/E18283_01/server.112/e16508/consist.htm#CNCPT1339 什麼是排它鎖？ 每一個事務在修改資源時會獲得排他鎖，該事務不結束，則其他事務不能修改此資源。（註意：這裡的修改不是數據“增刪查改”中的 ...
  • SQL Server2008安裝教程
    1.Sql Server2008的下載 近期項目使用到C#，為了學習.NET相關的技術，開始著手學習Sql Server資料庫。 Sql Server2008是比較經典的資料庫版本，這裡簡單寫一下Sql Server 2008的下載與安裝。 下載地址在微軟官網上：https://www.micros ...
  • 解決使用redisTemplate set方法保存出現\x00\問題
    在項目有個需求要保存一個字元串到redis，並設置一個過期時間。這個需求一看非常簡單，使用redisTemplate一行代碼搞定，代碼如下 redisTemplate.opsForValue().set("userKey", data, 10000); 但保存後，查看redis發現value的首碼多 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類