使用leanCloud实现数据存储和读取

项目链接：GitHub

效果预览:Git Pages

需求：给网站添加一个留言功能。

所以需要一个数据库来存放留言信息，再通过这个数据库的接口获取留言信息，在项目页面展示出来。

选用：leanCloud一个自带数据库和增删改查（CRUD）功能的后台系统。。

至于为什么选用leanCloud，因为他方便快捷易用，关键是还免费~

开始咯。

构建表单

我们先在HTML中构建一个表单用于提交留言：

<form action="" method="post" id="postMessage" style="width: 700px;margin: 50px auto;">
        <label for="">姓名：</label>
        <input type="text" name="name" id="">
        <label for="">内容：</label>
        <input type="text" name="content" id="">
        <input type="submit" value="提交">
    </form>
</section>

注册账号

首先在leanCloud上注册一个账号。

创建应用

创建新应用

进入应用

点击进入应用的控制台界面。

应用控制台

使用帮助

接着我们又要运用到方老师教的CRM大法啦。

进入到官方的帮助文档，先把他引入到我们的项目，运行成功后再慢慢修改。

入门帮助

选中我们项目所使用的语言：

选用语言

选择引用方式：

可以选择包管理工具npm安装SDK，但是这里我选择的是引入CDN。

引入CDN

初始化

验证

接下来就是验证leanCloud在项目中是否能work了：

好了，我们的leanCloud不出意外的话就搞定了！

其实只要细心一点，照着官方文档的指导去执行，很少会报错的，就算报错了，我们也可以运用官方提供的问题排查。

现在根据验证结果来看看这段代码是什么意思：

// 创建一个TestObject的表
var TestObject = AV.Object.extend('TestObject');

// 创建一行数据
var testObject = new TestObject();

// 存储信息
testObject.save({
    words: 'Hello World!'
}).then(function(object) {
    alert('LeanCloud Rocks!');
})

接下来就可以开始根据需求修改这段代码，储存网站的用户留言了。

存储留言

处理思路：通过监听表单的submit事件，分别取到两个输入框内的内容，然后存在表Message里；存储成功后会返回一个Promise对象，通过对Promise对象使用then方法对他的结果object进行处理，生成一个li标签，li标签内包含了刚刚提交上来的两个输入框的内容，然后把li标签插入指定的结构中，在页面内展示出来。

// 获取表单元素
let myForm = document.querySelector('#postMessage')

// 为什么要监听表单的submit事件而不是button的click事件,因为一旦用户输完密码按回车键提交的话,监听就落空了.submit事件包括了点击和回车
myForm.addEventListener('submit',function(e){

    // 阻止传播，防止点击刷新
    e.preventDefault()

    //获取输入框内的值
    let content = $('input[name="content"]').val()
    let name = $('input[name="name"]').val()
    var Message = AV.Object.extend('Message');
    var messages = new Message();
    messages.save({
        "name":name,
        "content":content ,
    }).then(function(object) {

        // 存储完成后马上添加结构，就不用window.location.reload()来刷新页面显示留言了，提高了用户体验
        let li = $('<li></li>').text(object.attributes.name +':'+ object.attributes.content)
        $('#comments').append(li)

        //清空用户提交后的输入框
        myForm.querySelector('input[name="content"]').value = ''
    })
})

获取留言

获取历史留言

思路：通过官方文档中的对象操作获取表内所有数据，然后遍历数据，取出数据内的特定内容，把特定内容放入生成的一个li标签中，把li标签插入到指定结构中，在项目中展示出来。

// 拉取历史留言
var query = new AV.Query('Message');
query.find().then(function (messages) {
    messages.forEach(function (item) {
        let li = $('<li></li>').text(item.attributes.name +':'+item.attributes.content)
        $('#comments').append(li)
    });
}).then(function (messages) {
    // 更新成功
}, function (error) {
    // 异常处理
});

优化代码

接着按照功能把他单独划分到一个Js文件中(模块化)，易于维护和编写。

//message.js

!function(){
    // 初始化
    var APP_ID = 'xxxxxxxxxxxxxxxxxxxxxxxxxx';
    var APP_KEY = 'xxxxxxxxxxxxxxxxxxxxxx';

    AV.init({
    appId: APP_ID,
    appKey: APP_KEY
    });

    // 拉取历史留言
    var query = new AV.Query('Message');
    query.find().then(function (messages) {
        messages.forEach(function (item) {
            let li = $('<li></li>').text(item.attributes.name +':'+item.attributes.content)
            $('#comments').append(li)
        });
    }).then(function (messages) {
        // 更新成功
    }, function (error) {
        // 异常处理
    });

    let myForm = document.querySelector('#postMessage')
    // 为什么要监听表单的submit事件而不是button的click事件,因为一旦用户输完密码按回车键提交的话,监听就落空了.submit事件包括了点击和回车
    myForm.addEventListener('submit',function(e){
        // 阻止传播，防止点击刷新
        e.preventDefault()

        //获取输入框内的值
        let content = $('input[name="content"]').val()
        let name = $('input[name="name"]').val()
        var Message = AV.Object.extend('Message');
        var messages = new Message();
        messages.save({
            "name":name,
            "content":content ,
        }).then(function(object) {
            let li = $('<li></li>').text(object.attributes.name +':'+ object.attributes.content)
            $('#comments').append(li)
            myForm.querySelector('input[name="content"]').value = ''
        })
    })
}.call()

我们的基于一个公开数据库leanCloud创建的一个留言功能就能正常运转了，虽说目前还很简陋~但是总会改进的嘛。

总结/注意事项

1.CRM方法的使用，能更快地把某个我们不熟悉库或者功能引入到项目中。

2.Promise的用法及理解。

3.为什么要监听表单的submit而不是提交button的click事件,因为如果一旦用户输完密码按回车键提交的话,click监听就落空了.submit事件包括了点击和回车，所以监听submit更稳妥。

4.功能流程的梳理(伪代码)。

[JavaScript]如何使用leanCloud数据库