使用方法 CRM(Copy-Run-Modify)，所有新東西都是這樣使用的




第一步：創(chuàng)建一個應(yīng)用

第二步：點(diǎn)擊快速入門，選擇對應(yīng)語言，引入 a" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 做一個簡單的留言——leancloud數(shù)據(jù)庫

做一個簡單的留言——leancloud數(shù)據(jù)庫

時間：2023-07-05 08:36:02 | 來源：網(wǎng)站運(yùn)營

時間：2023-07-05 08:36:02 來源：網(wǎng)站運(yùn)營

做一個簡單的留言——leancloud數(shù)據(jù)庫：leancloud :自帶數(shù)據(jù)庫和增刪改查（CRUD）功能的后臺系統(tǒng)

使用方法 CRM(Copy-Run-Modify)，所有新東西都是這樣使用的




第一步：創(chuàng)建一個應(yīng)用

第二步：點(diǎn)擊快速入門，選擇對應(yīng)語言，引入 av-min.js，得到 window.AV

三：初始化 AV 對象（直接 Copy 代碼）

var APP_ID = '2zeITbbU6cgHT0mdBscQtmp0-gzGzoHsz';var APP_KEY = 'iByF5Dy55tJodAoxC4cxwAwx';AV.init({ appId: APP_ID, appKey: APP_KEY});run 一下看看成功沒
四：新建一條數(shù)據(jù)（同樣 Copy）

//創(chuàng)建 TestObject 表var TestObject = AV.Object.extend('TestObject');//在表中創(chuàng)建一行數(shù)據(jù)var testObject = new TestObject();//數(shù)據(jù)內(nèi)容是 words:'Hello World'//若保存成功，則運(yùn)行 alert('')testObject.save({ words: 'Hello World!'}).then(function(object) { alert('LeanCloud Rocks!');})Run 一下看看成功沒
然后去 Modify(修改) - Run - Modify -Run ...
直到你理解所有代碼

留言系統(tǒng)
用 form

<form id="postMessageForm" style="width: 1000px;margin: 50px auto;"> <input type="text" name="content"> <input type="submit" value="提交"></form>監(jiān)聽 form 表單：監(jiān)聽 submit 事件而不是提交按鈕，因為用戶可以不點(diǎn)擊按鈕而使用回車
代碼如下：整合進(jìn)數(shù)據(jù)庫

let myForm = document.querySelector('#postMessageForm')myForm.addEventListener('submit', function (e) { //首先阻止默認(rèn)事件 e.preventDefault() //content 就是用戶輸入的文本 let content = myForm.querySelector('input[name=content]').value var Message = AV.Object.extend('Message'); var message = new Message(); message.save({ content: content }).then(function (object) { alert('提交成功'); console.log(object) })})提交內(nèi)容后數(shù)據(jù)庫的效果如圖

在網(wǎng)頁中顯示留言：用戶能夠看到自己提交的內(nèi)容
同樣用CRM
找到 leanCloud API文檔中的 批量操作,抄




var query = new AV.Query('Todo'); query.find().then(function (todos) { todos.forEach(function(todo) { todo.set('status', 1); }); return AV.Object.saveAll(todos); }).then(function(todos) { // 更新成功 }, function (error) { // 異常處理 });Tode 沒有，換成我們自己的 Message

var query = new AV.Query('Message'); query.find().then(function (messages) { messages.forEach(function(message) { message.set('status', 1); }); return AV.Object.saveAll(messages); }).then(function(messages) { // 更新成功 }, function (error) { // 異常處理 });得到我們的數(shù)據(jù)記錄，說明成功了




console.log 妙用：console.log(messages)




發(fā)現(xiàn)我們的提交內(nèi)容都保存在 attributes 里面

那就好辦了

//html<ol id="messageList"></ol>//jsvar query = new AV.Query('Message');query.find().then(function (messages) { let array = messages.map((item) => item.attributes) array.forEach((item) => { let li = document.createElement('li') li.innerText = item.content let messageList = document.querySelector('#messageList') messageList.appendChild(li) })})


html里自動添加了li，有留言了




但是提交后要刷新頁面才能顯示新留言
那我們只能幫用戶刷新了,把彈出框改成下面代碼

//alert('提交成功');window.location.reload()更好的方法：不刷新頁面，直接讓 .then(function(object){} 執(zhí)行添加 li 的代碼

//alert('提交成功');let li = document.createElement('li')//這里 content 要改成 object.attributes.contentli.innerText = object.attributes.contentlet messageList = document.querySelector('#messageList')messageList.appendChild(li)然后清除輸入的文字：讓 content 的 value 為空

myForm.querySelector('input[name=content]').value = ''MVC 的 M(model)
之前在 MVC 初嘗試之 V 和 C 中已經(jīng)介紹了 view 和 controller
現(xiàn)在我們給代碼添加 model

! function () { // MVC 的 V var view = document.querySelector('section.message') //添加 M var model = { init: function () { var APP_ID = '2zeITbbU6cgHT0mdBscQtmp0-gzGzoHsz' var APP_KEY = 'iByF5Dy55tJodAoxC4cxwAwx' AV.init({ appId: APP_ID, appKey: APP_KEY }) }, //獲取所有數(shù)據(jù) fetch: function () { var query = new AV.Query('Message') return query.find() //Promise 對象 }, //創(chuàng)建數(shù)據(jù) save: function (name,content) { var Message = AV.Object.extend('Message'); var message = new Message(); return message.save({ //Promise 對象 name: name, content: content }) } } // MVC 的 C var controller = { view: null, model: null, messageList: null, init: function (view, model) { this.view = view this.model = model this.messageList = view.querySelector('#messageList') this.form = view.querySelector('form') this.model.init() this.loadMessages() this.bindEvents() }, loadMessages: function () { this.model.fetch().then((messages) => { let array = messages.map((item) => item.attributes) array.forEach((item) => { let li = document.createElement('li') li.innerText = `${item.name} : ${item.content}` this.messageList.appendChild(li) }) }) }, bindEvents: function () { this.form.addEventListener('submit', (e) => { e.preventDefault() this.saveMessage() }) }, saveMessage: 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).then(function (object) { let li = document.createElement('li') li.innerText = `${object.attributes.name} : ${object.attributes.content}` let messageList = document.querySelector('#messageList') messageList.appendChild(li) myForm.querySelector('input[name=content]').value = '' console.log(object) }) } } controller.init(view, model)}.call()對 MVC（這里應(yīng)該是 MVP 模式，但是為了方便直接用了 Controller ，并不影響我們學(xué)習(xí)這一思想，MVP 可以說是 MVC 的演變， MVC 和 MVP 的主要區(qū)別在于 M 和 V 是否交互，有興趣可以查看相關(guān)博客） 的總結(jié)：




將原本混亂的 js 代碼分成三個模塊
1.View：用戶界面
2.Controller：業(yè)務(wù)邏輯
3.Model：數(shù)據(jù)保存

當(dāng)用戶點(diǎn)擊 View ，View 就會傳送指令到 Controller

Controller 完成業(yè)務(wù)邏輯后，要求 Model 改變狀態(tài)

Model 向 Server（服務(wù)器）發(fā)起請求，服務(wù)器返回響應(yīng)

Model 將新的數(shù)據(jù)發(fā)送到 Controller，Controller 更新 View ，用戶得到反饋




完整代碼可見 github

本文僅供個人學(xué)習(xí)使用

關(guān)鍵詞：數(shù)據(jù),留言,簡單

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉