留言板實(shí)現(xiàn)思路

CRM思想：
C:Copy 把代碼抄過來
R:Run 把代碼運(yùn)行一下
M:Modify 仿照代碼然后改代碼

數(shù)據(jù)存儲問題：
沒有云數(shù)據(jù)庫的網(wǎng)頁，數(shù)據(jù)都是存儲在本地的，那么當(dāng)我們換了設(shè)備，數(shù)據(jù)也就訪問不到了，所以要實(shí)現(xiàn)跨設(shè)備訪問，就必須把數(shù)據(jù)上傳到服務(wù)器server上。

Ai0niR.png

這里我們用LeanCloud來當(dāng)我們留言板的云數(shù)據(jù)庫

首先通過script標(biāo)簽來引入SDK，這樣我們就獲得了一個AV的全局對象

然后把初始化代碼復(fù)制到我們的message.js里

var APP_ID = 'A8GbNUsXHJwOMewmRQuQVszl-gzGzoHsz';
var APP_KEY = 'pwjKJ1YjQLNzAinUAKvtWyYJ';

AV.init({
  appId: APP_ID,
  appKey: APP_KEY
});

然后我們再把測試代碼寫進(jìn)message.js

//創(chuàng)建TestObject表
var TestObject = AV.Object.extend('TestObject');
//在表中創(chuàng)建一行數(shù)據(jù)
var testObject = new TestObject();
//數(shù)據(jù)的內(nèi)容是Hello World 保存
//如果保存成功，則運(yùn)行alert('LeanCloud Rocks')
testObject.save({
  words: 'Hello World!'
}).then(function(object) {
  alert('LeanCloud Rocks!');
})

得出extend()里面的字符串是創(chuàng)建的表的名字，變量名也可以隨便改

var x= AV.Object.extend('Jack');
var o= new x();
o.save({
  xxxxx: 'Love World!'
}).then(function(object) {
  alert('LeanCloud Rocks!');
})

o會新建一條數(shù)據(jù)，然后save會把這條數(shù)據(jù)存進(jìn)去，這樣我們就可以存任何數(shù)據(jù)了
努力學(xué)習(xí)JS是為了可以舒服的看懂文檔，基礎(chǔ)回了之后全部都是CRM,入門的標(biāo)準(zhǔn)就是能不能看懂別人的文檔。
小結(jié)一下LeanCloud使用方法：

Ai6hlR.png

然后我們給頁面里添加一個表單提交

<h2>留言</h2>
<form id="postMessageForm">
  <input type="text" name="content">
  <input type="submit" value="提交">
</form>

接著就是存儲用戶的提交數(shù)據(jù)，也就是要監(jiān)聽用戶的提交，這里我們不能監(jiān)聽submit的點(diǎn)擊事件，而是要監(jiān)聽form事件，因?yàn)橛脩粲锌赡茌斎胪曛簏c(diǎn)回車不點(diǎn)提交按鈕，這樣監(jiān)聽submit按鈕就有可能失敗。

let myForm = document.querySelector('#postMessageForm')
myForm.addEventListener("submit",function(e){
    e.preventDefault()   //阻止默認(rèn)的刷新事件
    let content = myForm.querySelector("input[name=content]").value  //拿到用戶提交的數(shù)據(jù)
    var Message = AV.Object.extend('Message')   //modify他給的代碼
    var message = new Message()
    message.save({
      "content":content    //變量content存入
    }).then(function(object){
        alert('存入成功')
        console.log(object)
    })
})        //這樣就把留言成功的存入了LeanCloud數(shù)據(jù)庫

接著我們要拿到所有用戶存過的信息并且展示到頁面。我們可以看一下leanCloud的API文檔，對象>獲取對象

var query = new AV.Query('Todo');
  query.get('57328ca079bc44005c2472d0').then(function (todo) {
    // 成功獲得實(shí)例
    // todo 就是 id 為 57328ca079bc44005c2472d0 的 Todo 對象實(shí)例
  }, function (error) {
    // 異常處理
  });

很明顯我們沒有Todo，這里把Todo改成Message，我們也沒有g(shù)et里面的ID，所以刪掉，然后運(yùn)行一下......報錯了，說明get有問題，，我們試著把get改成find（批量操作里）

var query = new AV.Query('Message');
  query.find().then(function (message) {
      console.log(message)      //返回一個對象，我們要的數(shù)據(jù)在attributes里面
      console.log(message[0].attributes)
      console.log(message[1].attributes)
      let arry = message.map((item) => item.attributes)
      console.log(arry)
  }, function (error) {
    // 異常處理
  });       //這樣我們就得到了兩個content里面的數(shù)據(jù)

拿到數(shù)據(jù)庫里的數(shù)據(jù)之后，我們就可以渲染頁面了。

<ol id="messageList">
</ol>

然后遍歷一下arry

arry.forEach((item)=>{
  let li =document.createElement('li')
  li.innerText = item.content
  let messageList = document.querySelector('#messageList')   //局部變量好一點(diǎn)
  messageList.appendChild(li)
})     //這時我們提交成功后需要刷新頁面才能看到我們的提交

我們可以幫用戶點(diǎn)擊刷新

message.save({
      "content":content    //變量content存入
    }).then(function(object){
        window.location.reload()    //成功之后就自動刷新頁面
        console.log(object)
    })

這是一個用戶體驗(yàn)極差，但是可以成功的方法
Promise小結(jié)：

query.find({success: fn1 ,fail: fn2})  //成功執(zhí)行fn1失敗執(zhí)行fn2

Promise的寫法是

query.find()
        .then(
            fn1, fn2
        )                 //成功執(zhí)行fn1失敗執(zhí)行fn2
        .then(
            fn3, fn4      //如果fn1和fn2都沒有問題執(zhí)行fn3,如果其中有一個有問題執(zhí)行fn4
        )

給表單加一個姓名,然后展示name

<lable for="">姓名</lable>
<input type="text"  name="name">
<lable for="">內(nèi)容</able>
<input type="text" name="content">

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')   //局部變量好一點(diǎn)
  messageList.appendChild(li)
})

然后我們實(shí)現(xiàn)一下無刷新頁面，精確的給頁面添加提交信息，取代刷新

let myForm = document.querySelector('#postMessageForm')
myForm.addEventListener("submit",function(e){
    e.preventDefault()   //阻止默認(rèn)的刷新事件
    let content = myForm.querySelector("input[name=content]").value  //拿到用戶提交的數(shù)據(jù)
    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')   //局部變量好一點(diǎn)
        messageList.appendChild(li)
        myForm.querySelector("input[name=content]").value = ''
        myForm.querySelector('input[name=name]').value = ''    //提交后把輸入框內(nèi)容清除
        console.log(object)
    })
})

總結(jié)：

  1. 把用戶提交的數(shù)據(jù)存入數(shù)據(jù)庫。首先監(jiān)聽form表單，然后看文檔存儲數(shù)據(jù)
  2. 拿到用戶提交到數(shù)據(jù)庫的信息?？次臋n拿到數(shù)據(jù)然后生成arry數(shù)組
  3. 把拿到的數(shù)據(jù)渲染到頁面。遍歷arry數(shù)組，動態(tài)生成li，然后把content的內(nèi)容賦值給li的innerText，再把li插入到ol里
  4. 再添加一個name輸入框。拿到name的內(nèi)容，然后存儲，再用插值字符串添加到li的innerText里面
  5. 無刷新頁面。當(dāng)數(shù)據(jù)存儲成功后，生成并添加對應(yīng)的li標(biāo)簽
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)。 注意：講述HT...
    kismetajun閱讀 28,827評論 1贊 45
  • 前端開發(fā)面試題 面試題目： 根據(jù)你的等級和職位的變化，入門級到專家級，廣度和深度都會有所增加。 題目類型： 理論知...
    怡寶丶閱讀 2,687評論 0贊 7
  • 一:在制作一個Web應(yīng)用或Web站點(diǎn)的過程中，你是如何考慮他的UI、安全性、高性能、SEO、可維護(hù)性以及技術(shù)因素的...
    Arno_z閱讀 1,367評論 0贊 1
  • 2013年蛇年春晚，那英的一首《春暖花開》把許多的人帶回到了一個心曠神怡，幸福無比的世界裏；那英的嗓音伴著優(yōu)美的旋...
    子非水墨閱讀 397評論 8贊 3
  • 老公昨天和我們一起坐在桌子上吃飯，而不是去到電視面前，我覺得很開心，真心謝謝他。 昨天老公愿意陪我去游泳或者走路，...
    媽媽隨筆閱讀 112評論 1贊 1

友情鏈接更多精彩內(nèi)容