LeanCloud 介绍
一个自带数据库和增删改查（CRUD）功能的后台系统。
拥有：
- 登录注册、手机验证码功能（收费）
- 存储任意信息
- 读取任意信息
- 搜索任意信息
- 删除任意信息
- 更新任意信息
LeanCLoud基本使用
我在此演示一下基本的使用.
下面演示如何使用 LeanCloud 存一个 Hello World到他的后台数据库上.
分为下面几步:
1.创建一个应用 resume
2.引入 av-min.js，得到 window.AV
3.初始化 AV 对象（代码直接拷）
4.新建一条数据来测试（代码直接拷,测试）
demo
第一步:首先创建一个应用
image.png
进入
image.png
第二步，通过CDN引入，并初始化
html脚本引入
<!-- 存储服务 -->
<script src="//cdn.jsdelivr.net/npm/leancloud-storage@3.11.1/dist/av-min.js"></script>
新建一个message.js文件，加入如下代码
var APP_ID = 'xxxxxxxxxxxxxxxxxxxxxxxxxxx';
var APP_KEY = 'xxxxxxxx';
AV.init({
appId: APP_ID,
appKey: APP_KEY
});//id和key比较敏感用xxx代替
ping一下
ping "w3ti0i9b.api.lncld.net"
加入如下测试代码
var TestObject = AV.Object.extend('TestObject');
var testObject = new TestObject();
testObject.save({
words: 'Hello World!'
}).then(function(object) {
alert('LeanCloud Rocks!');
})
可以得到后台
image.png
可见
var TestObject = AV.Object.extend('TestObject');//创造了一个新class
testObject.save({
words: 'Hello World!'//用TestOBject构造testObject，save的字符串就是传入后台的字符串。
下面用mvc模式搭建完整的留言功能
var view = document.querySelector("section.message");
我们对数据库的操作是获取和存储。
var model = {
fetch: function() {
var query = new AV.Query("Message")
return query.find()
}, //获取一个promise对象，记录后台已有的数据显示在页面上。
save: function(name,content) {
var Message = AV.Object.extend("Message")
var message = new Message()
return message
.save({
name: name,
content: content
})
}
}; //获取一个promise对象，是用户新生成的留言数据，存储到后台。
下面理清楚一下逻辑
1.首先需要从后台获取历史数据，并显示在页面上。
2.对于用户新生成的留言存储到后台，并无刷新地显示在页面上。
var controller = {
view: null,
model:null,
messagesList: null,
init: function(view) {
this.view = view
this.model =model
this.messagesList = view.querySelector("#messageList");
this.form = view.querySelector("form");
this.initAV();
this.loadMessages();
this.bindEvents();
},//进行初始化操作
initAV: function() {
var APP_ID = "W3ti0I9b2cFxpPiitq31a9U8-gzGzoHsz";
var APP_KEY = "bSj0qYqb7ng9ymDI2FvpMYoq";
AV.init({
appId: APP_ID,
appKey: APP_KEY
});
},//初始化leancloud
loadMessages: function() {
//获取历史留言
this.model.fetch().then(
messages => {
let array = messages.map(item => item.attributes);
array.forEach(item => {
let li = document.createElement("li");
li.innerText = `${item.name}:${item.content}`;
let messagesList = document.querySelector("#messagesList");
messagesList.appendChild(li);
});
},
() => {}
);
},//获取后台历史留言数据，其内容存储在attributes属性上，通过map遍历返回一个数组。在用foreach方法新建<li>显示历史留言。
bindEvents: function() {
this.form.addEventListener("submit", e => {
e.preventDefault();
this.saveMessage();
});//事件绑定，阻止form表达提交默认刷新事件。
},
saveMessage: function() {
let myform = this.form;
let content = myform.querySelector("input[name=content]").value;
let name = myform.querySelector("input[name=name").value;
this.model.save(name,content).then(object => {
let li = document.createElement("li");
li.innerText = `${object.attributes.name}:${
object.attributes.content
}`;
let messagesList = document.querySelector("#messagesList");
messagesList.appendChild(li);
myform.querySelector("input[name=content]").value = "";
});//获取新建留言，并直接添加到页面。
}
};
controller.init(view,model);
}.call();
注意点
promise中
例如
query.find().then(fn1,fn2)
.then(fn3.fn4)
含义是:
如果成功执行回调函数fn1,如果失败执行回调函数fn2.
如果fn1和fn2都没有报错,那么执行fn3,如果fn1 和fn2中有一个报错,那么执行fn4
