功能主要分为以下几个流程: 引入LeanCloud 获取留言内容(网页中写入的留言内容) 保存留言内容到后台服务器 创建历史留言,获取到服务器保存的所有留言内容,读取并写入网页中 封装代码 MVC LeanCloud 介绍
一个自带数据库和增删改查（CRUD）功能的后台系统。 拥有：
1.登录注册、手机验证码功能（收费）
2.存储任意信息
3.读取任意信息
4.搜索任意信息
5.删除任意信息
6.更新任意信息
等功能。
实现过程
引入LeanCloud 通过接入一个服务器,这里用到的是leancloud,一个免费的服务器网站
在html中创建留言板相关的表单,以及留言列表
新建一个message.js文件,引入leanCloud服务器,用于存储历史留言内容. . 初次使用的时候需要做一些配置工作, 主要流程包括:注册账号→创建应用→产看帮助文档→安装与引用SDK→初始化代码→写入调试代码
前面4个步骤比较简单,根据网站上的提示就可以完成. 网站提供的初始化代码之后的工作比较花费时间,需要将初始代码放到自己的项目中并且添加调试代码. 以下是调试代码:
var TestObject = AV.Object.extend(‘TestObject’); var testObject = new TestObject(); testObject.save({ words: ‘Hello World!’ }).then(function(object) { alert(‘LeanCloud Rocks!’); })
执行这一段代码之后,就可以在服务器后台看到以下信息:
留言功能主要依赖这一串代码.
因此需要做的就是将留言版的内容写入到testObject.save()中
获取留言内容
loadMessages: function () { this.model.fetch().then((messages) => { let array = messages.map((item) => item.attributes) array.forEach(function (item) { let li = document.createElement(‘li’) let messageList = document.querySelector(’#messageList’) li.innerText = ${item.name}:${item.content} this.messageList.append(li) });
return AV.Object.saveAll(messages); })saveMessages: 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) //保存留言内容
},获取到留言板中的内容并写入变量content,name中,this.save()函数负责将这两个变量的值上传到服务器,然后将留言内容写入html中
中保存留言内容 save: function (name, content) { let Message = AV.Object.extend(‘Message’); let message = new Message()
return message.save({ 'content': content, 'name': name, })这段代码执行之后浏览器内容就会保存到服务器上.
创建历史留言 loadMessages: function () { this.model.fetch().then((messages) => { let array = messages.map((item) => item.attributes) array.forEach(function (item) { let li = document.createElement(‘li’) let messageList = document.querySelector(’#messageList’) li.innerText = ${item.name}:${item.content} this.messageList.append(li) });
return AV.Object.saveAll(messages); })saveMessages().then(function (object) { let li = document.createElement(‘li’) let messageList = document.querySelector(’#messageList’) li.innerText = ${object.attributes.name}:${object.attributes.content} messageList.append(li) content = myform.querySelector(‘input[name=“content”]’).value = ‘’ })
转载于:https://juejin.im/post/5b0cee39f265da090a008220
