Node項目之需求收集平臺（三）- 使用cookie實現點贊功能

又是一個臨時YY出來想要添加的功能，需求收集平臺旨在收集用戶的需求，而後給出基本的答覆以及更新需求狀態，可是針對那些重複的需求，也就沒有必要要求不一樣的用戶重複的去提交，可是又爲了讓收集者知道哪些需求是用戶頻繁提出的，這樣就要求有個相似於點讚的功能，若是看到相同的需求，不須要從新添加一條需求，只須要在該需求上點個贊便可。

首先從用戶的角度簡單分析一下這個功能：

1. 須要給每一個需求條目添加點贊按鈕來觸發點贊動做

2. 點過讚的條目與沒有點過讚的條目樣式要不同

3. 不容許重複點贊

4. 點贊能夠取消

再來分析一下系統如何實現：

1. 數據庫：後臺表須要有記錄每一個需求條目點贊數量的字段，添加完成後初始值爲1，點贊+1，取消點贊-1

2. 重複點贊：這個問題實現的方法其實挺多，比較靈活。比較常見的一種實現方法應該是經過用戶名來查重，該用戶針對一個需求條目只能點贊一次，若是點過贊再次點擊則爲取消點贊。

可是這個項目剛開始並無考慮設計用戶登錄功能，由於需求收集可能就是一個開放的平臺，在公司內網環境下，均可以經過需求收集平臺來提交用戶的問題或者建議，並不須要登錄。因而這裏我想到是否能夠經過cookie的方式來實現這個功能，正好最近學習jQuery看到cookie那塊。

大致思路：

1. 頁面加載後，檢查需求條目是否有對應的cookie，若是沒有即沒有點過贊，設置樣式A；若是找到對應的cookie，證實已經點過贊，設置樣式B；

2. 點擊動做同理，一樣是判斷是否有對應條目的cookie，有的話，點擊即爲-1；沒有的話，點擊即爲+1;

想到就動手實踐了，首先下載carhartl/jquery-cookie插件，並在項目中引入以備後用。

前臺樣式以下動畫：

第一次點贊+1，背景變成淺紅色；再次點贊-1，樣式恢復；而且點贊後，刷新頁面後依然是點贊狀態。

接下來看看js是怎麼實現的：

/* 已經贊過的message 樣式設置，防止刷新頁面後樣式恢復原樣 */
  $('.message-list-item').each(function(){
    var mid = $(this).attr('mid');
    var cookie = $.cookie('haveUp'+mid);
    if(cookie && cookie == 2){ // 2表明贊過，1表明沒有贊過
      $(this).find('div.up').addClass('up-yes'); // up-yes爲紅色背景樣式
    }
  });
/* up a message 贊一個需求 */
  $('.qa-rank .up').click(function () {
    var messageId = $(this).attr('data-messageId');
    var $plus = $('<span id="plus"><strong>+1</strong></span>');
    var $minus = $('<span id="minus"><strong>-1</strong></span>');
    var $this = $(this);
    var bool = $.cookie('haveUp'+messageId); // 是否Up
    if(!bool || bool == 1){ // 贊一個需求
      $plus.insertAfter($this).css({
        'position': 'relative',
        'z-index': '1',
        'color': '#C30'
      }).animate({
        top: -30 + 'px',
        left: +30 + 'px'
      }, 'slow',function(){
        $(this).fadeIn('slow').remove();
      });
      $.ajax({
        url: '/ajax/up/' + messageId,
        method: 'POST',
        global: false,
        success: function (result) {
          $this.addClass('up-yes');
          $.cookie('haveUp'+messageId, 2, {path: '/', expires: 1});
        }
      });
      return false;
    }else{
      $minus.insertAfter($this).css({  // 取消贊
        'position': 'relative',
        'z-index': '1',
        'color': '#5cb85c'
      }).animate({
        top: -30 + 'px',
        left: +30 + 'px'
      }, 'slow',function(){
        $(this).fadeIn('slow').remove();
      });
      $.ajax({
        url: '/ajax/cancel/'+ messageId,
        method: 'POST',
        global: false,
        success: function(result){
          $this.removeClass('up-yes');
          $.cookie('haveUp'+messageId, 1, {path: '/'});
        }
      });
      return false;
    }
  });

代碼邏輯很簡單，主要就是判斷是否點贊，若是點讚了，那麼建立id爲minus的span節點插入到DOM中，而後給個動畫效果；若是沒有點贊，那麼建立id爲plus的span節點插入到DOM中，一樣給個動畫效果；同時，經過ajax異步請求數據到後臺更新數據庫中的點贊數量。

好了，這個小功能算是基本實現了，思路是否是對的暫不清楚，若是不對，請指正，學習就是不斷嘗試的過程。後面再繼續介紹該項目的一些內容。