使用LeanCloud開發網頁簡易的留言功能

學習筆記：使用LeanCloud開發網頁上簡易的評論留言功能

示例效果:

關於LeanCloud

LeanCloud 是國內領先的針對移動應用的一站式雲端服務,能夠爲開發提供強而有力的後端支持，它包含數據存儲，即時通信等多種服務，拿網頁的comment評論留言功能爲例，目前不少我的博客的留言功能都是由LeanCloud支持的。在註冊完LeanCloud帳號，並建立好新應用後，咱們就須要安裝或在線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。快速入門的連接在這裏：quickStart 。
初始化完畢後，若是咱們能在控制檯上打印出"AV"這個對象，則說明LeanCloud的SDK引入成功。

提交數據到LeanCloud數據庫

本示例的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新建的數據表Comment中。因此很顯然咱們須要綁定form表單的submit事件，實現代碼以下:

var form = document.querySelector('div.message>form');

    form.addEventListener('submit',(e)=>{
        // 首先要阻止 form表單默認功能
        e.preventDefault();
        // 在LeanCloud中已經建立了 Comment 數據表
        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) {
            // 將數據新增到頁面上
            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();。

將數據顯示在頁面上

咱們能夠經過查看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()的結果打印在控制檯上，咱們就知道其結果是一個數組，而且數組的每一項的attributes中則存放着咱們存儲的用戶留言名以及留言信息。咱們只須要將數據庫中的數據生成在頁面上便可，代碼以下：

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層只跟數據庫打交道，負責數據的部分 View視圖層則獲取可視化頁面上的元素信息 Controller邏輯層則負責調用視圖層及Model層進行邏輯交互 拿本示例的留言功能爲例： Model層負責獲取服務器數據庫內的數據，並交互給邏輯層的代碼 邏輯層的代碼則經過視圖層將數據顯示在頁面上。 若是用戶點擊submit,則同樣 form表單被提交，View層通知Controller層，經過 Model層將數據寫入數據庫，並更新視圖層。這就是MVC。如今對代碼整合結果以下：

!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
            });
        },
        // 獲取數據
        fetch:function () {
            var query = new AV.Query('Comment');
            return query.find()// 返回 Promise對象
        },
        // 保存數據
        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) {
                    // 將數據新增到頁面上
                    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()

複製代碼