實戰丨Web雲開發項目—TodoList待辦事項

背景

TodoList應用，是面向零基礎同窗的快速入門應用。你能夠一行代碼完成TodoList的本地化搭建，若是你想要網絡同步你的Todo數據，在多個設備之間實時同步共享，雲開發構建僅需100行。

體驗地址：https://acc.cloudbase.vip/todo/

此項目適用於零基礎用戶體驗使用，經過必定的模塊手段集約了總體編碼。若是想要深刻學習請掌握js、html、css等編程技術，自主解析模塊中的代碼（均爲入門原生代碼）

若是你不想執行如下步驟翻看代碼，能夠直接點擊下方按鈕一鍵部署

1、構建本地化TodoList

在本地任意地方新建文本文件，在文件中填入以下內容：

<script src="https://acc.cloudbase.vip/todo/src/todo.js" 

charset="utf-8"></script>

保存，並將後綴改成html，命名爲index.html【注意：mac用戶推薦使用無格式文本編輯】

使用瀏覽器打開此html文件，瀏覽器顯示以下，即爲正常。

如此，你就經過一行代碼完成了本地化Todo應用的構建。經過此應用，你能夠回車新增一條待辦，也能夠以勾選已完成，修改事項內容，刪除事項；當頁面關閉再次加載時仍然保留待辦事項。

2、將本地TodoList發佈，給其餘人使用

咱們只在本地構建了這個應用網站，如何將這個應用分享給其餘人呢？

咱們須要將這個應用網站發佈到雲開發靜態網站託管中

打開雲開發控制檯，新建一個按量計費環境（若是已有按量計費環境則直接使用，跳過此步）

按量計費環境建立完畢後，通常自動開通靜態網站託管服務，若是未開通點擊開通便可。

點擊上傳文件，將上一步的index.html選擇上傳

上傳完畢後，點擊上圖配置信息中的【默認域名】，便可在公網環境下訪問Todo應用網站。

默認域名可供您快速驗證業務，如您須要對外正式提供網站服務，請綁定您已備案的自定義域名。

3、爲Todo應用構建後臺服務

以上一行代碼實現的單一應用網站只能作到在本地進行Todo記錄，當更換設備時，沒法作到同步，接下來，咱們來構建後臺服務，實現同步需求。

打開雲開發控制檯，找到上一步操做的環境，打開數據庫，新建todo集合，以下圖所示：

打開環境-登陸受權，開啓郵箱登陸，以下圖所示：

開啓後點擊右邊【配置發件人】，參考配置QQ郵箱進行配置。

隨後，點擊右邊【應用配置】，填寫一下應用名稱，以下圖所示

配置完成後，將你的雲環境ID複製保存，填入下步驟代碼中

打開以前本地構建的index.html，填充內容以下所示

<script src="https://acc.cloudbase.vip/todo/src/todo.js" charset="utf-8"></script>
<script src="https://acc.cloudbase.vip/todo/src/login_util.js" charset="utf-8"></script>
<script src="https://imgcache.qq.com/qcloud/tcbjs/1.10.8/tcb.js"></script>
<script>
  let uid = null;
  const app = tcb.init({
    env: "替換本身的雲開發環境ID"
  })
  const auth = app.auth({
    persistence: "local"
  });
  const db = app.database();
  window.onload = function () {
    LO.init();
    TODO.init();
  }
  LO.Done = function () {
    uid = app.auth().hasLoginState().user.uid;
    db.collection('todo').doc(uid).get().then(res => {
      if (res.data.length == 0) {
        db.collection('todo').add({
          _id: uid,
          list: TODO.todo,
          time: new Date()
        }).then(res => {
          console.log(res);
          watchtodo();
        })
      }
      else {
        console.log(res);
        TODO.todo = res.data[0].list;
        TODO.todoinit();
        watchtodo();
      }
    })
    app.callFunction({
      name:'todo_getNumber'
    }).then(res=>{
      document.getElementById('model').innerHTML+=`<p class='bottom-des'>共${res.result}人使用雲開發TODO</p>`
    })
  }
  TODO.itemChange = function (id, type, des) {
    if (type === 'add') {
      if (des != null) {
        app.uploadFile({
          cloudPath: `todo/${uid}/${TODO.todo[id].file}`,
          filePath: des
        }).then((result) => {
          console.log(result)
          TODO.todo[id].file = result.fileID
          updatetodo()
        });
      } else {
        updatetodo()
      }
    } else if (type === 'delete') {
      if (TODO.todo[id].file != null) {
        app.deleteFile({
          fileList: [TODO.todo[id].file]
        }).then((result) => {
          delete TODO.todo[id]
          console.log(result)
          updatetodo()
        });
      } else {
        delete TODO.todo[id]
        updatetodo()
      }
    } else {
      updatetodo()
    }
  }
  TODO.downLoadfile = function (file) {
    app.downloadFile({
      fileID: file
    })
  }
  function updatetodo() {
    db.collection('todo').doc(uid).update({
      list: db.command.set(TODO.todo),
      time: new Date()
    }).then(res => {
    }).catch(e => {
      console.log(e);
    })
  }
  function watchtodo() {
    db.collection('todo').where({ _id: uid }).watch({
      onChange: (snapshot) => {
        if (snapshot.msgType != "INIT_EVENT") {
          TODO.todo = snapshot.docs[0].list;
          TODO.todoinit();
        }
      },
      onError: (error) => {
        alert('遠端數據庫監聽失敗！');
      }
    });
  }    
</script>

保存文件，從新上傳至靜態網站託管中，如此一個有後臺服務的Todo應用便構建完成了，仍然打開配置信息中的【默認域名】（若是有緩存，能夠在連接後加 ?123 等隨機數），打開後以下圖所示：

應用中引入的登陸模塊自動展現登陸框，輸入郵件地址和密碼，若是未註冊會直接發送註冊郵件。

此時，前往郵箱中查看註冊郵件，以下圖所示：

點擊驗證連接，將跳轉到雲開發驗證頁，驗證成功後，顯示以下：

此時，返回應用網站，10s後按鈕變爲可點擊狀態，直接點擊登陸，便可登陸成功，登陸框消失。

以後，經過郵箱地址和密碼便可完成以後登陸。

若是你想展現多少人使用TODO應用，能夠將項目目錄functions裏todo_getNumber文件夾上傳爲雲函數

寫在最後

本實戰項目經過模塊化方式構建，直接突出雲開發的開發步驟，更加直觀。若是你想探尋Todo模塊的內容，能夠自行解壓縮讀代碼。

login_util模塊，是做者構建的一個簡易登陸插件，能夠實現簡單的登陸操做，提供自定義方法，默認是雲開發的郵件登陸方式，因此在無自定義時請保證郵件登陸配置正確並打開。

todo.js暴露接口：

TODO.todo;             //待辦事項內容json，可按照規則直接改變
TODO.todoinit();                    //刷新顯示待辦事項
TODO.itemChange(id,type,des);  //監聽待辦列表變化[id，類型，描述]
TODO.downLoadfile(file)             //下載文件觸發，能夠在上傳時修改todo列表file的值

login_util簡易登陸窗口插件，默認郵件登陸，暴漏接口：

LO.custom                         //是否自定義登陸方法，默認爲false爲郵件登陸
  LO.init()                         //初始化方法調用打開登陸框，默認郵件登陸時則會自動判斷，若是登陸則觸發LO.done(),不會初始化登陸框
  LO.done()                         //當登陸完畢時觸發，默認登陸時可用，自定義無效
  LO.close()                        //關閉登陸框
  LO.onClose()                      //監聽關閉
  LO.onLogin(obj)                   //監聽登陸按鈕，需LO.custom=true纔可生效
  LO.setBtn(text,disable)           //設置登陸按鈕
  LO.setDes(text,style)             //設置描述

產品介紹

雲開發（Tencent CloudBase，TCB）是騰訊雲提供的雲原生一體化開發環境和工具平臺，爲開發者提供高可用、自動彈性擴縮的後端雲服務，包含計算、存儲、託管等serverless化能力，可用於雲端一體化開發多種端應用（小程序，公衆號，Web 應用，Flutter 客戶端等），幫助開發者統一構建和管理後端服務和雲資源，避免了應用開發過程當中繁瑣的服務器搭建及運維，開發者能夠專一於業務邏輯的實現，開發門檻更低，效率更高。
開通雲開發：https://console.cloud.tencent.com/tcb?tdl_anchor=techsite
產品文檔：https://cloud.tencent.com/product/tcb?from=12763
技術文檔：https://cloudbase.net?from=10004 技術交流加Q羣：601134960 最新資訊關注微信公衆號【騰訊云云開發】