在進行後臺傳值的時候注意----去空的處理
阿新 • • 發佈:2018-12-15
經常在實際的開發過程中,需要避免將空值傳遞給後臺.比如在實際開發過程中遇到的問題, 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)
}
}