使用leanCloud实现数据存储和读取
项目链接：GitHub
效果预览:Git Pages
需求：给网站添加一个留言功能。
所以需要一个数据库来存放留言信息，再通过这个数据库的接口获取留言信息，在项目页面展示出来。
选用：leanCloud一个自带数据库和增删改查（CRUD）功能的后台系统。。
至于为什么选用leanCloud，因为他方便快捷易用，关键是还免费~
开始咯。
构建表单
我们先在HTML中构建一个表单用于提交留言：
<form action="" method="post" id="postMessage" style=" 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。
初始化
验证
接下来就是验证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.功能流程的梳理(伪代码)。