迭代項目前端編碼bug總結（持續補充）

1. 數組，map，對象定義爲全局時，注意考慮，再次使用時先清空。

map方法：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345007434430758e3ac6e1b44b1865178e7aff9082e000

2. 前後臺傳參注意事項：

在寫代碼時注意，如果數據不是從自己代碼中來，注意進行判空等驗證，如果前端控件需要唯一主鍵時，此時應爭取從自己代碼中找唯一，有時後臺傳的值不一定唯一。

1）如果是後臺傳的數組，map，對象等在使用時注意判空 (arr&&arr.length)；

2）（iview+Vue框架）在使用iview 的select控件使用v-for時，注意，爲保證option的key值唯一，使用index來作爲key值，防止後臺的值不唯一（有重複的id）導致前臺報錯，寫法如下：

<Select v-model="searchDevType"
              style="width:180px;margin-right:10px"
              placeholder="類型"
              clearable
              transfer
              @on-open-change="search_open_change($event,'devType')"
              @on-clear="select_clear_event('devType')">
        <Option v-for="(item,index) in devTypeDataList"
                :value="item.value"
                :key="index">{{item.label}}</Option>
      </Select>

3）傳給後臺的參數注意進行檢查

a. input輸入框：

• 注意設置可輸入字符最大長度的限制；
• 注意檢查輸入字符是否包含首尾空格

//去除首尾空格
    removeBeginEndSpace(value) {
      if (value) {
        return value.replace(/(^\s*)|(\s*$)/g, "");
      } else {
        return ''
      }
    },

 

3. ajax 方法

1）上傳：post方法兼容文件和json串 

// post請求公共方法定義：

var Ajax = {
    //post方法
    post(api, data, success, error) {
    // 將文件和json兼容
    var contentTypeValue = 'application/json';
    var processDataValue = true;
    if (data instanceof File) { // 如果傳過來的data是文件
      contentTypeValue = false;
      processDataValue = false;
      var formData = new FormData();
      formData.append('file', data);
      data = formData;
    } else {
      data = JSON.stringify(data);
    }
    $.ajax({
      url: api,
      type: 'post',
      timeout: 10000,
      beforeSend: function (xhr) {
        // xhr.setRequestHeader('Authorization', 'Bearer ' + user.access_token)
      },
      contentType: contentTypeValue,
      data: data,
      processData: processDataValue,
      // contentType: 'application/json',
      // data: JSON.stringify(data),
      success: function (response, status, xhr) {
        success && success(response, status, xhr);
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        if (textStatus === 'error') {
          textStatus = 'Network error';
        }
        Message.error(textStatus || errorThrown);
        error && error();
      }
    });   
  },
}

// post請求調用： 

// 將用戶上傳的excel文件傳給後臺
    importExcelPostRequest(file) {
      let that = this;
      Ajax.post(Ajax.baseUrl.XXX + '/import', file, function(
        response,
        status,
        xhr
      ) {
        if (response.statuscode === 0) {
          that.$Message.success('文件上傳成功');
          that.getDevTreeDataList(); // 成功後重刷一次
        } else {
          that.$Message.error(response.message);
        }
      });
    }

 

2）下載：get請求

// get請求公共方法定義：

var Ajax = {
   //get方法
   get(api, success, error) {
    $.ajax({
      url: api,
      type: 'get',
      crossDomain: true,
      success: function(response, status, xhr) {
        success && success(response, status, xhr)
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        if (textStatus === 'error') {
          textStatus = 'Network error'
        }
        Message.error(textStatus || errorThrown)
        error && error()
      }
    })
  },
}

// get請求調用： 

Ajax.get(url,function(response, status, xhr) {
          if (status === 'success'&&(!response||!response.statuscode)) {
            var stream = xhr.getResponseHeader('content-type').search("application/octet-stream") !== -1;
            if (stream) {
              window.location.href = url;
            }
          } else {
            _this.$Message.error(response.message);
          }
        })

4. 容易忽略的時間段查詢

    要查某一個時間段內（2019.3.1到2019.3.31號之間）的數據，邏輯應該寫爲：結束時間大於等於2019.3.1並且開始時間小於2019.3.31；SQL寫法如下：

SELECT * FROM 表名 WHERE stop_time>='2019-03-01' AND start_time<'2019-03-31'