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

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

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'

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值