CRM思想：
C:Copy 把代码抄过来
R:Run 把代码运行一下
M:Modify 仿照代码然后改代码
数据存储问题：
没有云数据库的网页，数据都是存储在本地的，那么当我们换了设备，数据也就访问不到了，所以要实现跨设备访问，就必须把数据上传到服务器server上。
Ai0niR.png
这里我们用LeanCloud来当我们留言板的云数据库
首先通过script标签来引入SDK，这样我们就获得了一个AV的全局对象
然后把初始化代码复制到我们的message.js里
var APP_ID = 'A8GbNUsXHJwOMewmRQuQVszl-gzGzoHsz';
var APP_KEY = 'pwjKJ1YjQLNzAinUAKvtWyYJ';
AV.init({
appId: APP_ID,
appKey: APP_KEY
});
然后我们再把测试代码写进message.js
//创建TestObject表
var TestObject = AV.Object.extend('TestObject');
//在表中创建一行数据
var testObject = new TestObject();
//数据的内容是Hello World 保存
//如果保存成功，则运行alert('LeanCloud Rocks')
testObject.save({
words: 'Hello World!'
}).then(function(object) {
alert('LeanCloud Rocks!');
})
得出extend()里面的字符串是创建的表的名字，变量名也可以随便改
var x= AV.Object.extend('Jack');
var o= new x();
o.save({
xxxxx: 'Love World!'
}).then(function(object) {
alert('LeanCloud Rocks!');
})
o会新建一条数据，然后save会把这条数据存进去，这样我们就可以存任何数据了
努力学习JS是为了可以舒服的看懂文档，基础回了之后全部都是CRM,入门的标准就是能不能看懂别人的文档。
小结一下LeanCloud使用方法：
Ai6hlR.png
然后我们给页面里添加一个表单提交
留言
接着就是存储用户的提交数据，也就是要监听用户的提交，这里我们不能监听submit的点击事件，而是要监听form事件，因为用户有可能输入完之后点回车不点提交按钮，这样监听submit按钮就有可能失败。
let myForm = document.querySelector('#postMessageForm')
myForm.addEventListener("submit",function(e){
e.preventDefault() //阻止默认的刷新事件
let content = myForm.querySelector("input[name=content]").value //拿到用户提交的数据
var Message = AV.Object.extend('Message') //modify他给的代码
var message = new Message()
message.save({
"content":content //变量content存入
}).then(function(object){
alert('存入成功')
console.log(object)
})
}) //这样就把留言成功的存入了LeanCloud数据库
接着我们要拿到所有用户存过的信息并且展示到页面。我们可以看一下leanCloud的API文档，对象>获取对象
var query = new AV.Query('Todo');
query.get('57328ca079bc44005c2472d0').then(function (todo) {
// 成功获得实例
// todo 就是 id 为 57328ca079bc44005c2472d0 的 Todo 对象实例
}, function (error) {
// 异常处理
});
很明显我们没有Todo，这里把Todo改成Message，我们也没有get里面的ID，所以删掉，然后运行一下......报错了，说明get有问题，，我们试着把get改成find（批量操作里）
var query = new AV.Query('Message');
query.find().then(function (message) {
console.log(message) //返回一个对象，我们要的数据在attributes里面
console.log(message[0].attributes)
console.log(message[1].attributes)
let arry = message.map((item) => item.attributes)
console.log(arry)
}, function (error) {
// 异常处理
}); //这样我们就得到了两个content里面的数据
拿到数据库里的数据之后，我们就可以渲染页面了。
然后遍历一下arry
arry.forEach((item)=>{
let li =document.createElement('li')
li.innerText = item.content
let messageList = document.querySelector('#messageList') //局部变量好一点
messageList.appendChild(li)
}) //这时我们提交成功后需要刷新页面才能看到我们的提交
我们可以帮用户点击刷新
message.save({
"content":content //变量content存入
}).then(function(object){
window.location.reload() //成功之后就自动刷新页面
console.log(object)
})
这是一个用户体验极差，但是可以成功的方法
Promise小结：
query.find({success: fn1 ,fail: fn2}) //成功执行fn1失败执行fn2
Promise的写法是
query.find()
.then(
fn1, fn2
) //成功执行fn1失败执行fn2
.then(
fn3, fn4 //如果fn1和fn2都没有问题执行fn3,如果其中有一个有问题执行fn4
)
给表单加一个姓名,然后展示name
姓名
内容
let name = myForm.querySelector('input[name=name]').value
message.save({
"name":name,
"content":content
})
arry.forEach((item)=>{
let li =document.createElement('li')
li.innerText = `${item.name}: ${item.content}`
let messageList = document.querySelector('#messageList') //局部变量好一点
messageList.appendChild(li)
})
然后我们实现一下无刷新页面，精确的给页面添加提交信息，取代刷新
let myForm = document.querySelector('#postMessageForm')
myForm.addEventListener("submit",function(e){
e.preventDefault() //阻止默认的刷新事件
let content = myForm.querySelector("input[name=content]").value //拿到用户提交的数据
var Message = AV.Object.extend('Message') //modify他给的代码
var message = new Message()
message.save({
"content":content //变量content存入
}).then(function(object){
let li =document.createElement('li')
li.innerText = `${object.attributes.name}: ${object.attributes.content}` //怎么取到name和content
let messageList = document.querySelector('#messageList') //局部变量好一点
messageList.appendChild(li)
myForm.querySelector("input[name=content]").value = ''
myForm.querySelector('input[name=name]').value = '' //提交后把输入框内容清除
console.log(object)
})
})
总结：
- 把用户提交的数据存入数据库。首先监听form表单，然后看文档存储数据
- 拿到用户提交到数据库的信息。看文档拿到数据然后生成arry数组
- 把拿到的数据渲染到页面。遍历arry数组，动态生成li，然后把content的内容赋值给li的innerText，再把li插入到ol里
- 再添加一个name输入框。拿到name的内容，然后存储，再用插值字符串添加到li的innerText里面
- 无刷新页面。当数据存储成功后，生成并添加对应的li标签