LeanCloud 傻瓜教程

omnoob發表於2019-07-13
Cloud

LeanCloud是一個非常好用的資料庫，不要錢而且不要伺服器。只需要你會兩點：

  1. 基本的JS語法，包括Promise
  2. 你瞭解http

如果你不懂，你就看不懂文件，就不會使用。所以前端要會JS，就是為了看懂文件。
面試造飛機，工作擰螺絲就是這個道理，需要你懂得別人的程式碼是什麼意思，能看懂別人寫的文件，自己拿過來會用就可以了，不需要你去從 0 開始寫。

第一部分：建立資料庫

簡單步驟：

  1. 建立一個應用 resume-2019
  2. 引入 AV-min.js 得到window.AV
  3. 初始化 AV 物件（程式碼直接拷）
  4. 新建一條資料（程式碼直接拷）

具體步驟：

以建立一個JS的資料庫為例

  1. 註冊賬號
  2. 點選控制檯-應用-建立應用-（開發者版）-建立成功
  3. 進入倉庫-點選幫助-快速入門（本次按照JavaScript為例）
  4. 選擇開發語言或平臺-選擇 LeanCloud 應用-找到CDN-複製儲存服務程式碼放入html中
<script src="//cdn.jsdelivr.net/npm/leancloud-storage@3.14.0/dist/av-min.js"></script>
複製程式碼
  1. 找到初始化-複製CDN對應的程式碼放入<scrpit>···</script>或者新建一個js檔案（例如message.js）並放入程式碼，同時在html中引入message.js
var APP_ID = 'qwGKSwfSatRWccr9Bc384x9k-gzGzoHsz';// 注意 此處的ID和KEY每個人每個庫是不一樣的
var APP_KEY = 'asxDtkN1cGWq68LzdvM16WUG'; // 請複製你對應的程式碼

AV.init({
  appId: APP_ID,
  appKey: APP_KEY
});
複製程式碼
  1. 找到驗證-在命令列中輸入ping "htgkswfs.api.lncld.net"，確認本地網路環境是可以訪問 LeanCloud 伺服器。如果當前網路正常將會得到如下響應：(類似即可)
PING api-ucloud.leancloud.cn (123.59.41.31): 56 data bytes
64 bytes from 123.59.41.31: icmp_seq=0 ttl=51 time=9.032 ms
64 bytes from 123.59.41.31: icmp_seq=1 ttl=51 time=7.290 ms
64 bytes from 123.59.41.31: icmp_seq=2 ttl=51 time=8.131 ms
64 bytes from 123.59.41.31: icmp_seq=3 ttl=51 time=9.689 ms

--- api-ucloud.leancloud.cn ping statistics ---
10 packets transmitted, 10 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 6.288/7.984/9.689/0.997 ms
複製程式碼
  1. 在入<scrpit>···</script>或者message.js中加入測試程式碼
// 建立TestObject表
var TestObject = AV.Object.extend('TestObject');
// 在表中建立一行資料
var testObject = new TestObject();
// 資料內容是words: 'Hello World!' 儲存
// 如果儲存成功，則執行 alert('')
testObject.save({
  words: 'Hello World!'
}).then(function(object) {
  alert('LeanCloud Rocks!');
})
複製程式碼

然後開啟 控制檯 > 儲存 > 資料 > TestObject，如果看到如下內容，說明 SDK 已經正確地執行了上述程式碼，安裝完畢。

LeanCloud 傻瓜教程
資料庫完成後，即可在html上增加自己想要的樣式比如form、input等，結合上文程式碼就可以往資料庫裡傳輸資訊了。

注意：要監聽form的submit，不要監聽click，監聽form的話，無論使用者是點選提交按鈕還是回車，都可以上傳資料；如果監聽click，需要寫更多的程式碼才能實現回車上傳資料這個功能，而且輸入框越多程式碼越多。

更多的資訊，請看LeanCloud文件。

第二部分：呼叫資料庫

如果你還想把資料庫裡的內容展示在html中，就需要參考LeanCloud 的API文件了。

例如實現留言板功能，不僅要能上傳資料，還要展示資料。

參考LeadCloud 資料儲存開發指南 · JavaScript

使用方法：
目標：獲取資料庫裡所有的資料

  1. 獲取物件： 發現不行，因為我們是自己建立的Message表，不知道它應該get什麼。
  2. 批量操作： 發現用find就可以了。
  3. 通過console.log(messages)，發現獲得的陣列的物件的第一個屬性attributes的第一個屬性就是content，就是我們想要的資料。
    LeanCloud 傻瓜教程

OK，任務完成！

這只是一個例子，你學會了如何看文件，結合一定的JS基礎，就能做出你想要的功能和效果了。

相關文章