- 引入LeanCloud
- 获取留言内容(网页中写入的留言内容)
- 保存留言内容到后台服务器
- 创建历史留言,获取到服务器保存的所有留言内容,读取并写入网页中
- 封装代码 MVC
LeanCloud 介绍
- 一个自带数据库和增删改查（CRUD）功能的后台系统。
拥有：
1.登录注册、手机验证码功能（收费）
2.存储任意信息
3.读取任意信息
4.搜索任意信息
5.删除任意信息
6.更新任意信息
等功能。
实现过程
-
引入LeanCloud
通过接入一个服务器,这里用到的是leancloud,一个免费的服务器网站
在html中创建留言板相关的<form>表单,以及留言列表<ol>新建一个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中<li>中
-
保存留言内容
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 = '' })复制代码 复制代码