迭代项目前端编码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'