為網頁新增留言功能

你什麼都不懂發表於2018-05-29
網頁

為網頁新增留言功能
在網頁新增一個留言板功能主要分為以下幾個流程:

  • 引入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 = ''
  })
複製程式碼
複製程式碼

相關文章