LeanClound数据库使用方法
官网：leancloud :自带数据库和增删改查（CRUD）功能的后台系统
第一步：创建一个应用
第二步：点击快速入门，选择对应语言，引入 av-min.js，得到 window.AV
三：初始化 AV 对象（直接 Copy 代码）
var APP_ID = 'laoqU1Y5Kks57Jy0rS43ij27-gzGzoHsz';
var APP_KEY = 'J3l09JyWkbeGRuwMzsxWkCQl';
AV.init({
appId: APP_ID,
appKey: APP_KEY
});
四：新建一条数据（同样 Copy）
//创建 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!');
})
留言功能
监听form表单：要监听form的submit事件，不能监听submit按钮的点击事件
原因：因为用户输入信息后有可能不点击submit按钮，而是按键盘上的回车，所以如果你是对submit的点击事件进行监听的话，这时就不起作用了，而监听form的submit事件，即使不点按钮，按回车也可以正常提交
<form id="postMessageForm" style="width:700px; margin:50px auto">
<input type="text" name="content">
<input type="submit" value="提交">
</form>
var myForm = document.querySelector('#postMessageForm');
myForm.addEventListener('submit',(x)=>{
x.preventDefault();
var content = myForm.querySelector('input[name=content]').value;
var Messege = AV.Object.extend('Message');
var message = new Messege();
message.save({
'content': content
}).then(function(object) {
alert('存入成功')
console.log(object);
})
})
提交内容后数据库的效果如图
在网页中显示留言：用户能够看到自己提交的内容
找到 leanCloud API文档中的 批量操作,抄
var objects = []; // 构建一个本地的 AV.Object 对象数组
// 批量创建（更新）
AV.Object.saveAll(objects).then(function (objects) {
// 成功
}, function (error) {
// 异常处理
});
// 批量删除
AV.Object.destroyAll(objects).then(function () {
// 成功
}, function (error) {
// 异常处理
});
// 批量获取
AV.Object.fetchAll(objects).then(function (objects) {
[图片上传中...(12345678_meitu_3.jpg-49e580-1561471807927-0)]
// 成功
}, function (error) {
// 异常处理
});
Tode 没有，换成我们自己的 Message
var query = new AV.Query('Message');
query.find().then(function (messages) {
messages.forEach(function(message) {
message.set('status', 1);
});
return AV.Object.saveAll(messages);
}).then(function(messages) {
// 更新成功
}, function (error) {
// 异常处理
});
得到我们的数据记录，说明成功了
console.log 妙用：console.log(messages)
提交内容都保存在 attributes 里面
在页面中显示出来
//html
<ol id="messageList"></ol>
//js
var query = new AV.Query('Message');
query.find().then(function (messages) {
let array = messages.map((item) => item.attributes)
array.forEach((item) => {
let li = document.createElement('li')
li.innerText = item.content
let messageList = document.querySelector('#messageList')
messageList.appendChild(li)
})
})
但是提交后要刷新页面才能显示新留言
那只能帮用户刷新了,把弹出框改成下面代码
//alert('提交成功');
window.location.reload()
更好的方法：不刷新页面，直接让 .then(function(object){} 执行添加 li 的代码
//alert('提交成功');
let li = document.createElement('li')
//这里 content 要改成 object.attributes.content
li.innerText = object.attributes.content
let messageList = document.querySelector('#messageList')
messageList.appendChild(li)
然后清除输入的文字：让 content 的 value 为空
myForm.querySelector('input[name=content]').value = ''
MVC中的M（model）
负责跟数据相关的操作，不会出现DOM操作，不会出现任何的html和css操作，只有一个操作那就是请求纯的数据
MVC流程详解
mvc是一种代码组织形式，把v和m传给c，c负责初始化model然后对view进行操作
对于上面的流程图的详细解释：
用户点击view，controller监听view的点击事件，view一旦被点击了，就会通知controller，controller就会调用model，model就会给服务器server发起请求，server接着就会给model一个响应，model拿到数据后就会返回数据给controller，然后controller就会更新view
给代码添加 model
! function () {
// MVC 的 V
var view = document.querySelector('section.message')
//添加 M
var model = {
init: function () {
var APP_ID = '2zeITbbU6cgHT0mdBscQtmp0-gzGzoHsz'
var APP_KEY = 'iByF5Dy55tJodAoxC4cxwAwx'
AV.init({
appId: APP_ID,
appKey: APP_KEY
})
},
//获取所有数据
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({ //Promise 对象
name: name,
content: content
})
}
}
// MVC 的 C
var controller = {
view: null,
model: null,
messageList: null,
init: function (view, model) {
this.view = view
this.model = model
this.messageList = view.querySelector('#messageList')
this.form = view.querySelector('form')
this.model.init()
this.loadMessages()
this.bindEvents()
},
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}`
this.messageList.appendChild(li)
})
})
},
bindEvents: function () {
this.form.addEventListener('submit', (e) => {
e.preventDefault()
this.saveMessage()
})
},
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(function (object) {
let li = document.createElement('li')
li.innerText = `${object.attributes.name} : ${object.attributes.content}`
let messageList = document.querySelector('#messageList')
messageList.appendChild(li)
myForm.querySelector('input[name=content]').value = ''
console.log(object)
})
}
}
controller.init(view, model)
}.call()
网友评论