前端日常工作问题总结（持续更新）

前端日常工作问题总结（持续更新）

1. 由于项目需要，自己本地起服务，自己本地调接口，参数涉及中文等的时候怎么处理？

发送请求之前，需要对每个参数进行encode，再接收的地方再对每个参数decode。注意不能对整个url encode，浏览器无法解析。

// 请求的地方
let name = encodeURIComponent(params.name)
axios.get('http://xxxxxxxx?name='+name);
// 接收的地方，先拿出自己的参数，然后挨个解码
let res = decodeURIComponent(name);

encodeURI 和encodeURIComponent区别，自己看一下https://www.jianshu.com/p/a017e74ace19 这篇文章写的通俗易懂。

2. el-select @change事件下传递整个item，如何实现？

el-option的 :value 直接绑定整个item，:key设置你需要的value。el-select多绑定一个value-key即可，和:key绑定值对应。 这样既可以取到你想要的整个item，显示也不会出问题，label是什么就显示什么。

<el-select class="device_select" v-model="selectValue" placeholder="请选择" value-key="sn" @change="selectChange">
	<el-option v-for="item in diskInfo" :key="item.sn" :label="item.name" :value="item"></el-option>
</el-select>

--------------------------------------------------------------------------------2022年11月11日 -----------------------------------------------------------------------------

3. 格式化时间戳

const FormatDateTime = function (inputTime) {
    
    
  if (inputTime === '') {
    
    
    return '-';
  }
  let date = new Date(inputTime);
  let y = date.getFullYear();
  let m = date.getMonth() + 1;
  m = m < 10 ? ('0' + m) : m;
  let d = date.getDate();
  d = d < 10 ? ('0' + d) : d;
  let h = date.getHours();
  h = h < 10 ? ('0' + h) : h;
  let minute = date.getMinutes();
  let second = date.getSeconds();
  minute = minute < 10 ? ('0' + minute) : minute;
  second = second < 10 ? ('0' + second) : second;
  return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
}

4.计算时间差

function diffTime(startDate,endDate) {
    
    
  var diff = endDate - startDate; // 时间差的毫秒数

  //计算出相差天数
  var days = Math.floor(diff/(24*3600*1000));

  //计算出小时数
  var leave1 = diff%(24*3600*1000);    //计算天数后剩余的毫秒数
  var hours = Math.floor(leave1/(3600*1000));
  //计算相差分钟数
  var leave2 = leave1%(3600*1000);        //计算小时数后剩余的毫秒数
  var minutes = Math.floor(leave2/(60*1000));

  //计算相差秒数
  var leave3 = leave2%(60*1000);      //计算分钟数后剩余的毫秒数
  var seconds = Math.round(leave3/1000);
  if (seconds == 0) {
    
    
    seconds = Math.round((leave3/1000)*100)/100 
  }

  var returnStr = seconds + "秒";
  if(minutes > 0) {
    
    
      returnStr = minutes + "分钟";//+ returnStr;
  }
  if(hours > 0) {
    
    
      returnStr = hours + "小时";// + returnStr;
  }
  if(days > 0) {
    
    
      returnStr = days + "天" ;//+ returnStr;
  }
  return returnStr;
}

--------------------------------------------------------------------------------2022年11月18日 -----------------------------------------------------------------------------

4.获取文件目录最大层级（深度）。

folder: 路径
length： 初始length

function getFolderDepth(folder, length) {
    
    
  if (!length) {
    
    
    length = 1
  }
  let max = length
  let folders
  try {
    
    
    folders = fs.readdirSync(folder)
  } catch (e) {
    
    
    console.log(e)
    return
  }
  for (let i = 0; i < folders.length; i++) {
    
    
    const val = folders[i]
    const child = path.resolve(folder, val)
    let exist = false
    try {
    
    
      exist = fs.lstatSync(child).isDirectory()
    } catch (e) {
    
    
      // throw new Error(e);
    }
    if (exist) {
    
    
      const len = getFolderDepth(child, length + 1)
      max = Math.max(len, max)
    }
  }
  return max
}