经常在实际的开发过程中,需要避免将空值传递给后台.比如在实际开发过程中遇到的问题,
eg:在进行查询功能的处理的时候,需要将获取到的各种查询条件传入后台(vue实际项目)
所以这时候,会对页面上获取到的值进行去空的处理
//对传入后台的值进行去空的处理,这里是自定义的方法
filter(){
for(var i in xxxx){
if( xxxx[i] == ''){
delete xxxx[i];
}
}
},
//请求数据,只是模拟的请求,非真实函数处理
getList(){
this.filter();
//发起ajax请求
})
},
通过遍历该数据,当所遍历到的属性为空的时候,将此属性删除
最近遇到的一个项目,用户pc端+小程序端+管理员后台管理系统
问题:
当用户在pc端进行项目编辑的时候,有一段上传视频的编辑处理,后台会记录下用户进行的节点标注,几分几秒,但是这里有一个bug,当用户没有进行时间节点的标注处理的时候,那么会将时间的空值传入后台,但此时对应的时间节点的介绍又是存在的.
当前端进行小程序视频详情页面渲染的时候,会有每段视频的截点标注介绍,但并没有对应的截点标注时间.
实际的需求:
- 当有时间节点标注,渲染节点标注介绍,
- 没有时间节点标注.不渲染节点介绍
解决问题:
在获取到页面传入的数据之后,遍历当前渲染的数组,如果时间都为空,那么删除当前遍历想,否则进行字符串的拼接,在发起请求后,传入该参数给后台
页面
<div class="components-container" style="width:100%;margin-bottom:20px;" v-for="(item, index) in markData" :key="item.index">
<Button style="float:left;margin-right:55px;width:130px;">{{item.name}}</Button>
<span style="margin-right:12px;">时间 :</span>
<InputNumber v-model="item.min" type="number" :max="999" :min="0" size="large" class="markInput"/>
<span style="margin:0 10px;">分</span>
<InputNumber v-model="item.sec" type="number" :max="60" :min="0" size="large" class="markInput"/>
<span style="margin:0 10px;">秒</span>
<Icon type="md-close" style="font-size:20px;margin-left:20px;cursor:pointer;" title="删除" @click="deleteMark(index)"/>
</div>
数据与方法部分
data() {
return {
markData:[]
}
},
upload(){
//这里只写了对数据进行去空部分的处理,其余部分已经省略
//标注
var breakPoint = '';
var len = this.markData.length;
for(var i = 0; i < len; i++){
if(this.markData[i].min == "" && this.markData[i].sec == ""){
delete this.markData[i]
}else{
breakPoint+=this.markData[i].name+':'+this.markData[i].min+':'+this.markData[i].sec+','
}
// console.log(breakPoint)
}
}