leanCloud做一个简单的留言功能

需申请一个leanCloud账号，安装并设置，并对它初始化。

在项目中添加测试代码：

const TestObject = AV.Object.extend('TestObject');
const testObject = new TestObject();
testObject.set('words', 'Hello world!');
testObject.save().then((testObject) => {
  console.log('保存成功。')
})

测试成功后刷新控制台，控制台 > 存储 > 数据 > TestObject，看到如下内容，说明 SDK 已经正确地执行了上述代码，这些数据已被上传至云端。

我们可以在项目中，对测试代码进行修改，变成你想要上传的数据，如：

const Message = AV.Object.extend('Message');  //创建Message
const message = new Message();
message.set('words', '888!');    //修改想上传的内容
message.save().then((message) => {
  console.log('保存成功。')
})

好了，云端能用了，我们就来创建表单：

<h2>留言</h2>
<form id="postMessage">
    <input type="text" name="content">
    <input type="submit" value="提交">
</form>

let myForm = document.querySelector('#postMessage')    
myForm.addEventListener('submit',function(e){
    e.preventDefault()   //阻止默认事件（刷新）
    let content = myForm.querySelector('input[name=content]').value  
    //查找name=content的input元素，找到后获取它的value
    var Message = AV.Object.extend('Message')
    var message = new Message()
    message.save({
        'content': content
    }).then(function(object){
        console.log('存入成功')
        alert('成功')
    })
})

Message及后面代码是对测试代码的增删改。

提交后没有刷新，并显示存入成功。也提交上了云端：

现在让我们开始做让留言显示在页面上，点API文档》JS数据存储API》使用文档》对象》批量操作：

把上面代码复制到自己的项目里修改，

<h2>留言</h2>
<ol id="messageList">
</ol>
<form id="postMessage">
    <input type="text" name="content">
    <input type="submit" value="提交">
</form>

let myForm = document.querySelector('#postMessage')    
myForm.addEventListener('submit',function(e){
    e.preventDefault()   //阻止默认事件（刷新）
    let content = myForm.querySelector('input[name=content]').value 
    //查找name=content的input元素，找到后获取它的value
    var Message = AV.Object.extend('TestObject')
    var message = new Message()
    message.save({
        'content': content
    }).then(function(object){
        console.log('存入成功')
        alert('成功')
    })
})

var query = new AV.Query('TestObject');
query.find().then(function(messages){
 let array = messages.map((item)=>item.attributes)//获取数据库里的信息
 array.forEach((item)=>{   //调用数组里每条信息，把他们都加入li
     let li = document.createElement('li')
     li.innerText = item.content
     let messageList = document.querySelector('#messageList')
     messageList.appendChild(li)  //最后把li添加入ol里
 })
 console.log(array)
},function(error){
    alert('提交失败，请改日再来~')
});

简单的功能，简单的图片！

来修饰一下吧! 添加姓名，添加样式:

let myForm = document.querySelector('#postMessage')
myForm.addEventListener('submit', function (e) {
    e.preventDefault()   //阻止默认事件（刷新）
    let content = myForm.querySelector('input[name=content]').value 
    //查找name=content的input元素，找到后获取它的value
    let name = myForm.querySelector('input[name=name]').value 
    //查找name=name的input元素，找到后获取它的value

    var Message = AV.Object.extend('TestObject')  //连接对应数据库名字
    var message = new Message()
    message.save({     //要存的信息
        'name': name,
        'content': content
    }).then(function (object) {   
    //完成以上操作后，自动新增li，不用再刷新页面才能看到
        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 =''   //这句是提交后清空历史记录
        
    })
})

var query = new AV.Query('TestObject');
query.find().then(function (messages) {
    let array = messages.map((item) => item.attributes)
    array.forEach((item) => {
        let li = document.createElement('li')
        li.innerText = `${item.name}:  ${item.content}`
        let messageList = document.querySelector('#messageList')
        messageList.appendChild(li)
    })
    console.log(array)
}, function (error) {
    alert('提交失败，请改日再来~')
});

留言后，留言直接在上面显示，保留记录且不会刷新页面。
不过还是丑了点哈哈~