想發(fā)表看法？來看看如何使用LeanCloud開發(fā)網頁上簡易的評論留言功能

時間：2023-09-28 12:42:01 | 來源：網站運營

時間：2023-09-28 12:42:01 來源：網站運營

想發(fā)表看法？來看看如何使用LeanCloud開發(fā)網頁上簡易的評論留言功能：學習筆記：使用LeanCloud開發(fā)網頁上簡易的評論留言功能

示例效果:

關于LeanCloud

LeanCloud 是國內領先的針對移動應用的一站式云端服務,可以為開發(fā)提供強而有力的后端支持，它包含數(shù)據存儲，即時通訊等多種服務，拿網頁的comment評論留言功能為例，目前很多個人博客的留言功能都是由LeanCloud支持的。在注冊完LeanCloud賬號，并創(chuàng)建好新應用后，我們就需要安裝或在線CDN引入LeanCloud的SDK了。本示例選擇了通過script標簽引入SDK的方式，即：

<!-- 存儲服務 --><script src="//cdn.jsdelivr.net/npm/leancloud-storage@3.13.2/dist/av-min.js"></script>如果使用了CDN加載LeanCloud的SDK,那么第一步需要進行初始化：

var APP_ID = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';var APP_KEY = 'xxxxxxxxxxxxxxxxxxxxx';AV.init({ appId: APP_ID, appKey: APP_KEY});值得一提的是，在LeanCloud首頁的快速入門項中關于初始化一項所給的示例則會自動替換成我們當前應用的APP_ID和APP_Key?？焖偃腴T的鏈接在這里：quickStart 。

初始化完畢后，如果我們能在控制臺上打印出"AV"這個對象，則說明LeanCloud的SDK引入成功。

提交數(shù)據到LeanCloud數(shù)據庫

本示例的HTML結構如下：

<div class="message"> <h1>Comment</h1> <hr> <ul class="messageList"></ul> <form action=""> <label for="">name</label> <input type="text" name="name"> <label for="">comment</label> <input type="text" name="comment"> <input type="submit" value="submit"> </form></div>首先我們要完成的功能是點擊submit提交按鈕后，兩個input標簽輸入的內容能夠上傳至我們在LeanCloud新建的數(shù)據表Comment中。所以很顯然我們需要綁定form表單的submit事件，實現(xiàn)代碼如下:

var form = document.querySelector('div.message>form'); form.addEventListener('submit',(e)=>{ // 首先要阻止 form表單默認功能 e.preventDefault(); // 在LeanCloud中已經創(chuàng)建了 Comment 數(shù)據表 var Comment = AV.Object.extend('Comment'); var c = new Comment(); let name = document.querySelector('input[name=name]').value; let comment = document.querySelector('input[name=comment]').value; c.save({ 'name': name, 'comment':comment }).then(function(object) { // 將數(shù)據新增到頁面上 let ul = document.querySelector('.messageList'); let li = document.createElement('li'); li.innerText = name+' : '+comment; ul.appendChild(li); // 將兩個input輸入框的內容清空 document.querySelector('input[name=name]').value = ''; document.querySelector('input[name=comment]').value = ''; }) })關于此段代碼，需要說明的是對于form表單來說，每次提交都會刷新頁面所以需要阻止form表單的默認功能,即 e.preventDefault(); 。

將數(shù)據顯示在頁面上

我們可以通過查看LeanCloud的javascript文檔查找相關的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) { // 異常處理 });如果將 query.find() 的結果打印在控制臺上，我們就知道其結果是一個數(shù)組，并且數(shù)組的每一項的attributes中則存放著我們存儲的用戶留言名以及留言信息。我們只需要將數(shù)據庫中的數(shù)據生成在頁面上即可，代碼如下：

var query = new AV.Query('Comment'); query.find().then((e)=>{ let array = e.map((item)=>{return item.attributes}); let ul = document.querySelector('.messageList'); array.forEach((e)=>{ let li = document.createElement('li'); li.innerText = e.name+' : '+e.comment; ul.appendChild(li); }) })

使用MVC思想整合代碼

MVC是什么？其實MVC很簡單,它只是一種思想。 MVC將代碼分為Model,View,Controller三種格局 Model層只跟數(shù)據庫打交道，負責數(shù)據的部分 View視圖層則獲取可視化頁面上的元素信息 Controller邏輯層則負責調用視圖層及Model層進行邏輯交互 拿本示例的留言功能為例： Model層負責獲取服務器數(shù)據庫內的數(shù)據，并交互給邏輯層的代碼 邏輯層的代碼則通過視圖層將數(shù)據顯示在頁面上。 如果用戶點擊submit,則一樣 form表單被提交，View層通知Controller層，通過 Model層將數(shù)據寫入數(shù)據庫，并更新視圖層。這就是MVC?，F(xiàn)在對代碼整合結果如下：

!function () { var view = document.querySelector('div.message'); var model = { init:function () { var APP_ID = 'xxxxxxxxxxx-xxxxxx'; var APP_KEY = 'xxxxxxxxxxxxxx'; AV.init({ appId: APP_ID, appKey: APP_KEY }); }, // 獲取數(shù)據 fetch:function () { var query = new AV.Query('Comment'); return query.find()// 返回 Promise對象 }, // 保存數(shù)據 save:function (name,comment) { var Comment = AV.Object.extend('Comment'); var c = new Comment(); return c.save({ 'name': name, 'comment': comment }) // 返回 Promise對象 } }; var controller = { view:null, model:null, init: function(view,model) { this.view = view; this.model = model; this.model.init(); this.loadMessage(); this.bindEvents(); }, bindEvents:function(){ var form = this.view.querySelector('form'); form.addEventListener('submit',(e)=>{ e.preventDefault(); this.saveMessage(); }) }, saveMessage:function(){ let name = this.view.querySelector('input[name=name]').value; let comment = this.view.querySelector('input[name=comment]').value; this.model.save(name,comment) .then(function(object) { // 將數(shù)據新增到頁面上 let ul = this.view.querySelector('.messageList'); let li = this.view.createElement('li'); li.innerText = name+' : '+comment; ul.appendChild(li); // 將兩個input輸入框的內容清空 this.view.querySelector('input[name=name]').value = ''; this.view.querySelector('input[name=comment]').value = ''; }) }, loadMessage:function(){ this.model.fetch() .then((e)=>{ let array = e.map((item)=>{return item.attributes}); let ul = document.querySelector('.messageList'); array.forEach((e)=>{ let li = document.createElement('li'); li.innerText = e.name+' : '+e.comment; ul.appendChild(li); }) }) } } controller.init.call(controller,view,model);}.call()