預(yù)覽鏈接：預(yù)覽
LeanCloud 簡(jiǎn)介
官網(wǎng)：LeanCloud
開(kāi)發(fā)版：免費(fèi)的針對(duì)開(kāi)發(fā)階段和個(gè)人項(xiàng)目解決方案，成本低、功能豐富蛀骇，可以滿足開(kāi)發(fā)的需求胸遇，適合產(chǎn)品開(kāi)發(fā)階段荧呐、個(gè)人項(xiàng)目、或在小群體中使用的應(yīng)用使用纸镊。
特點(diǎn)：一定的流量以內(nèi)供開(kāi)發(fā)者免費(fèi)試用倍阐，但是必須使用他提供的API
使用說(shuō)明文檔快速入門(mén)
- 在自己建立完App以后，點(diǎn)擊快速入門(mén) 逗威，選擇語(yǔ)言為 JavaScript
環(huán)境的安裝
NPM安裝的Bug解決
- 注冊(cè)并進(jìn)入 leancloud 峰搪，創(chuàng)建應(yīng)用，按照說(shuō)明文檔操作
使用 npm 安裝失敗凯旭，嘗試使用 yarn概耻，需要安裝 yarn
bash報(bào)錯(cuò)沒(méi)有curl 這個(gè)命令
bash: curl: command not found安裝 curl
sudo apt install curl安裝
yarn成功使用yarn依然無(wú)法安裝
-
回到 npm 安裝使套，報(bào)錯(cuò)顯示沒(méi)有package.json
npm WARN enoent ENOENT: no such file or directory, open '<root>/node_modules/supertest/package.json 解決辦法為，在根目錄執(zhí)行命令
npm init發(fā)現(xiàn)此時(shí)目錄多了個(gè) package.json
再次執(zhí)行
npm install leancloud-storage --save鞠柄，顯示沒(méi)有權(quán)限侦高，加上sudo以后，執(zhí)行成功 春锋，但是沒(méi)有在我的當(dāng)前目錄下出現(xiàn)對(duì)應(yīng)的node_modlues文件矫膨，在根目錄發(fā)現(xiàn)有，但是我要在當(dāng)前目錄下使用啊期奔，怎么辦侧馅？在當(dāng)前目錄下執(zhí)行
npm init出現(xiàn)了package.json文件，再執(zhí)行sudo npm install leancloud-storage --save-
發(fā)現(xiàn)目錄有了這個(gè)文件
image.png
上面說(shuō)明配置成功呐萌，然后執(zhí)行第二條
npm install leancloud-realtime --save引入CDN
<script src="http://cdn1.lncld.net/static/js/3.5.0/av-min.js"></script>現(xiàn)在雖然可以使用了馁痴，問(wèn)題是，這樣執(zhí)行了以后會(huì)不會(huì)留下什么后遺癥肺孤？下一次使用的時(shí)候罗晕？？
測(cè)試
完成上面的操作以后赠堵，在控制臺(tái)輸入 AV 小渊，即可看到一個(gè) AV 對(duì)象如下：
{_config: {…}, _sharedConfig: {…}, _getAVPath: ?, _installationId: null, _getInstallationId: ?, …}
使用C-R-M原則
即：Copy，Run茫叭，Modify原則酬屉，使用別人的代碼運(yùn)行調(diào)試后在修改成自己需要的樣子進(jìn)行使用。
初始化
var APP_ID = 'HH1RDVnLiDw1RA0YCL66dcfw-gzGzoHsz';
var APP_KEY = 'eMqFOA16pkSGX7iCK408sNDE';
AV.init({
appId: APP_ID,
appKey: APP_KEY
});
啟用指定的節(jié)點(diǎn)
var APP_ID = 'HH1RDVnLiDw1RA0YCL66dcfw-gzGzoHsz';
//注意揍愁，這里每個(gè)人的ID不同呐萨，按照自己分配的即可
var APP_KEY = 'eMqFOA16pkSGX7iCK408sNDE';
AV.init({
appId: APP_ID,
appKey: APP_KEY,
// 啟用美國(guó)節(jié)點(diǎn)
region: 'us'
});
驗(yàn)證網(wǎng)絡(luò)
執(zhí)行命令行 ：ping hh1rdvnl.api.lncld.net
復(fù)制測(cè)試代碼
var TestObject = AV.Object.extend('TestObject');
var testObject = new TestObject();
testObject.save({
words: 'Hello World!'
}).then(function(object) {
alert('LeanCloud Rocks!');
})
- 此時(shí)，刷新頁(yè)面以后會(huì)彈出提示框莽囤，同時(shí) LeanCloud 上面會(huì)有對(duì)應(yīng)對(duì)測(cè)試結(jié)果谬擦。
以上根據(jù)說(shuō)明文檔操作測(cè)試無(wú)誤以后即可上手使用。
建表朽缎，插入數(shù)據(jù)
事實(shí)上惨远，上面的測(cè)試代碼就是一個(gè)數(shù)據(jù)插入的操作
-
建表，名字為 TestObject
var TestObject = AV.Object.extend('TestObject'); -
在表中新建一行數(shù)據(jù)
var testObject = new TestObject(); 輸入一行數(shù)據(jù)內(nèi)容话肖，保存
如果保存成功則彈出對(duì)話框北秽，內(nèi)容為“LeanCloud Rocks”
//創(chuàng)建表，名字為 TestObject
var TestObject = AV.Object.extend('TestObject');
//在表中創(chuàng)建一行數(shù)據(jù)
var testObject = new TestObject();
//創(chuàng)建一行數(shù)據(jù)為 "Hello,World!",保存
//如果保存成功狼牺，則彈出對(duì)話框內(nèi)容為 “LeanCloud Rocks”
testObject.save({
words: 'Hello World!'
}).then(function(object) {
alert('LeanCloud Rocks!');
})
小知識(shí)
-
表單內(nèi)提交數(shù)據(jù)是監(jiān)聽(tīng) submit 還是 form 呢羡儿？
答：監(jiān)聽(tīng) form
因?yàn)椋?br> ?
（1）當(dāng)用戶在輸入完成內(nèi)容以后直接按回車(chē)礼患，是應(yīng)該提交的是钥，同時(shí)掠归，用戶點(diǎn)擊“提交”按鈕也應(yīng)該提交內(nèi)容。
（2）如果監(jiān)聽(tīng) submit的話悄泥，需要同時(shí)監(jiān)聽(tīng) submit 和 “Enter” 虏冻，顯得麻煩累贅；而直接監(jiān)聽(tīng)表單的話包括了上面的操作弹囚，代碼量少厨相。
對(duì)比如下：
//監(jiān)聽(tīng)form let myForm = document.querySelector('#postMessageForm) myForm.addEventListener('submit',function(e){ e.preventDefault() //阻止提交成功以后刷新頁(yè)面 }) //監(jiān)聽(tīng) Submit let button = myForm.querySelector('input[type=submit]') button.addEventListener('click',function(){}) // 監(jiān)聽(tīng)回車(chē) let input = myForm.querySelector('input[name=content]') input.addEventListener('keypress',function(e){ if(e.keyCode === 13){} }) //ps：如果有多個(gè)input，則要監(jiān)聽(tīng)多個(gè)回車(chē)事件鸥鹉。蛮穿。。?
顯示數(shù)據(jù)
- 頁(yè)面顯示層
在HTML頁(yè)面中寫(xiě)好對(duì)應(yīng)的結(jié)構(gòu)毁渗，舉例為
<body>
<ol>
//此處為使用js進(jìn)行動(dòng)態(tài)添加<li>標(biāo)簽践磅，在<li>標(biāo)簽內(nèi)添加對(duì)應(yīng)的返回?cái)?shù)據(jù)進(jìn)行顯示
</ol>
//以下操作添加數(shù)據(jù)
<form class="postMessageForm" id="postMessageForm" style="width:700px;height:500px;margin: 0 auto">
<label for="">姓名</label><input type="text" name="name">
<label for="">內(nèi)容</label><input type="text" name="content" >
<input type="submit" value="提交">
</form>
</body>
- 獲取歷史數(shù)據(jù)顯示在頁(yè)面中
進(jìn)入據(jù)存儲(chǔ)開(kāi)發(fā)指南 · JavaScript
找到 對(duì)象》批量操作》批量查詢
var query = new AV.Query('Todo');
query.find().then(function (todos) {
todos.forEach(function(todo) {
todo.set('status', 1);
});
return AV.Object.saveAll(todos);
}).then(function(todos) {
// 更新成功
}, function (error) {
// 異常處理
});
將其修改成為自己需要的代碼即可
示例代碼如下：
function(){
var query = new AV.Query('Todo');
query.find().then(
(message)=>{
let array = message.map((item)=> item.attributes)
array.forEach((item)=>{
let li = document.createElement('li')
li.innerText = `${item.name}:${item.content}`
let messageList = document.querySelector('#messageList')
this.messageList.append(li)
})
},
function(error){
alert('提交失敗灸异！')
})
實(shí)現(xiàn)無(wú)刷新留言
因?yàn)槭褂?<form> 提交數(shù)據(jù)的時(shí)候會(huì)刷新頁(yè)面府适，不論是用戶自己刷新頁(yè)面看到提交以后的數(shù)據(jù)，還是開(kāi)發(fā)者幫助用戶刷新頁(yè)面 肺樟，體驗(yàn)都極其不好檐春，因此，我們進(jìn)行改善 么伯。
- 原來(lái)的思路：用戶提交數(shù)據(jù)表單以后數(shù)據(jù)在LeanCloud上疟暖，然后訪問(wèn) LeanCloud 獲取數(shù)據(jù)再顯示在頁(yè)面上。
- 新思路：在用戶提交表單的時(shí)候蹦狂，把數(shù)據(jù)傳送到 LeanCloud 的同時(shí)誓篱，把數(shù)據(jù)添加在頁(yè)面中，代碼如下：
function(){
let myForm = this.form
let content = myForm.querySelector('input[name=content]').value
let name = myForm.querySelector('input[name=name]').value
this.model.save(content,name).then(function(object) {
let li = document.createElement('li')
li.innerText = `${object.attributes.name}:${object.attributes.content}`
let messageList = document.querySelector('#messageList')
messageList.append(li)
myForm.querySelector('input[name=content]').value = ''
myForm.querySelector('input[name=name]').value = ''
})
}
Github-pages預(yù)覽失敗問(wèn)題解決
將項(xiàng)目上傳到github準(zhǔn)備使用githubpages 預(yù)覽凯楔，但是失敗窜骄，錯(cuò)誤信息如下：
然后查找問(wèn)題：這里的 a 有問(wèn)題....
解決：不是特別能看懂，既然是它影響了預(yù)覽摆屯，索性刪除了它
但是邻遏，刪除以后預(yù)覽依然失敗
最后，只好把目錄的 node_modules 和其他的Json文件刪了虐骑，發(fā)現(xiàn)可以預(yù)覽准验。
問(wèn)題原因：是因?yàn)?strong>沒(méi)有用到node_modules 和其他的Json文件，反而被它影響了廷没。糊饱。
實(shí)現(xiàn)效果預(yù)覽
