接上文~~~~~~~~~~~~
在實(shí)現(xiàn)添加和刪除的功能時(shí),發(fā)現(xiàn)之前的api 用不了了,換了一個(gè)api實(shí)現(xiàn)荠呐。
在使用接口時(shí),每次都要寫(xiě)完整路徑砂客,所以偷懶使用了全局變量
以下時(shí)功能的具體實(shí)現(xiàn)
通過(guò)在methods中定義add方法泥张,并使用@click 綁定到按鈕上
在這里使用了post 方法,post方法有三個(gè)參數(shù):
1.要請(qǐng)求的URL地址
2.需要提交給服務(wù)器的數(shù)據(jù)鞠值,數(shù)據(jù)要以對(duì)象的形式船體給服務(wù)器{name:this.name}
3.第三個(gè)參數(shù)時(shí)配置對(duì)象媚创,說(shuō)明要以那種表單數(shù)據(jù)類(lèi)型傳遞,(emulateJSON:true)以普通表單格式彤恶,把數(shù)據(jù)交給服務(wù)器
格式:application/x-www-form-urlencoded
在post方法中使用了.then 來(lái)設(shè)置成功的回調(diào)函數(shù)钞钙,當(dāng)result.status === 201時(shí),添加數(shù)據(jù)成功
刪除數(shù)據(jù)時(shí)声离,設(shè)定以id為索引值刪除芒炼,此時(shí)需要獲取數(shù)據(jù)id, 然后判斷status 狀態(tài)碼是否為200术徊,若為200本刽,則將傳入的id和列表id比較,當(dāng)兩者相同時(shí),刪除id及對(duì)應(yīng)的數(shù)據(jù)子寓。
注:刪除數(shù)據(jù)時(shí)暗挑,只是刪除了本地?cái)?shù)據(jù),服務(wù)器的數(shù)據(jù)還是存在的斜友,但刷新頁(yè)面時(shí)窿祥,依舊可以看見(jiàn)原來(lái)的數(shù)據(jù)
?大體上實(shí)現(xiàn)了添加和刪除的功能,但是都存著bug蝙寨,在添加時(shí)時(shí)間沒(méi)有刷新晒衩;在刪除數(shù)據(jù)時(shí),id沒(méi)有重新排列墙歪,且都刪除的時(shí)第一個(gè)數(shù)據(jù)听系,與理論效果存在偏差,后續(xù)改進(jìn)虹菲。
最后感謝網(wǎng)友提供的api:http://jsonplaceholder.typicode.com/users
如果本文有幸被各位大佬看到靠胜,請(qǐng)給出一些建議,萌新在此謝謝啦~