阅读 1199

为网页添加留言功能

在网页添加一个留言板功能主要分为以下几个流程:

  • 引入LeanCloud
  • 获取留言内容(网页中写入的留言内容)
  • 保存留言内容到后台服务器
  • 创建历史留言,获取到服务器保存的所有留言内容,读取并写入网页中
  • 封装代码 MVC

LeanCloud 介绍

  • 一个自带数据库和增删改查(CRUD)功能的后台系统。

拥有:

1.登录注册、手机验证码功能(收费)

2.存储任意信息

3.读取任意信息

4.搜索任意信息

5.删除任意信息

6.更新任意信息

等功能。

实现过程

  1. 引入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()

  1. 获取留言内容

 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>

  1. 保存留言内容
save: function (name, content) {
      let Message = AV.Object.extend('Message');
      let message = new Message()

      return message.save({
        'content': content,
        'name': name,
      })
复制代码

这段代码执行之后浏览器内容就会保存到服务器上.

  1. 创建历史留言
 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 = ''
  })
复制代码
复制代码
文章分类
前端