第七次迭代開發總結

突然之間冒出來一個第七次迭代總結看上去挺奇怪的，事實上因為學校專案的關係，我暑假留校繼續開發。在迭代的前半週期，團隊進行了一次技術遷移，捨棄LiveScript轉向了ECMAScript 6。有空的話會寫一些ECMAScript 6的學習筆記。
這次開發我主要負責兩個模組，一個主要從資料庫中讀取資料，另一個則是實現檔案上傳的功能。值得注意的是，因為採用的是My SQL, Express, Angular JS和NodeJS的MEAN（和普通的MongoDB MEAN不一樣，不過其實我不太懂為什麼不用My SQL這樣的關係型資料庫，因為感覺快一些啊）。團隊裡面的人都沒有在AngularJS下實現過檔案上傳，其實我是挺方的。

AngularJS下檔案上傳的實現

在寫之前我主要是在Stack Overflow上找到了File Upload using AngularJS這個問題，裡面提到了兩個比較好的外掛angular-upload和ng-file-upload,我看了他們的效果和實現的原理，其實也是使用FormData來實現的，所以我就覺得其實自己寫一個也是可以的。

jade:
form(enctype='multipart/form-data')
  input(type="file" name='file')

ECMAScript 6:
let formData = new FormData($('form'
 
)[0]);

      $.ajax({
        url: `\api`,
        type: 'POST',
        data: formData,
        cache: false,
        processData: false,
        contentType: false,
        success: (data, textStatus)=> {

          alert('Upload Successfully');

        },
        error: (err) => {

          alert('Fail to upload, please upload file again'
 
);

        }
      });

其實實現的時候並不難，可是因為一直無法插入到表中所以除錯了很久。後來才發現其實是API要求的資料應該放在formData而不是請求的params, body等地方的。這個坑有點大。
其實AngularJS本身的http模塊可以實現文件上傳功能的，這個在以後會改，可是其實ajax和http底層實現其實是一樣的，所以不會差很多。

非同步函式中對頁面DOM元素的改變如何生效？

同樣是檔案上傳頁面，非同步獲取檔名並顯示在頁面和成功上傳後頁面的另一模組顯示都詭異地不能通過$scope這樣來實現，如下：

ECMAScript 6
success: (data, textStatus)=> {


          alert('Upload Successfully');

          $('.feedback').addClass('choose');

          $scope.selectedTab = 'feedback';


}

程式碼是上文Ajax請求成功以後的回撥函式，事實上這樣執行的效果就是feedback這個類選擇器對應的元素會變化可是$scope.selectedTab這個值並不會改變。這個在獲取檔名並顯示上同樣存在。請教過師兄加了一行迷之程式碼以後就可以了。

$scope.$apply();

這個是在賦值完成以後再次對頁面DOM元素進行更新。。。。我看的書都不知道去哪裡了。。

這次迭代看出了我自己的缺點同時也讓我覺得如果你問的問題不是很白痴的話其實別人是很願意教你的。不過不知道為什麼總會有人覺得我有點伸手黨？看來做法上還是有點問題，以後要學習一下如何查詢資料。

如有問題歡迎發郵件到kcnnow(at)gmail.com一起討論，如需轉載，請註明出處。