详解在vue-cli项目中使用mockjs(请求数据删除数据(2)
效果预览
再做一个删除的处理
模拟数据
let arr = [] for (let i = 0; i < 30; i++) { let newArticleObject = { name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名 content: Random.csentence(5, 30), // Random.csentence( min, max ) id: i } arr.push(newArticleObject); } let list = function (options) { let rtype = options.type.toLowerCase(); //获取请求类型 switch (rtype) { case 'get': break; case 'post': let id = parseInt(JSON.parse(options.body).params.id) //获取删除的id arr = arr.filter(function(val){ return val.id!=id;//把这个id对应的对象从数组里删除 }); break; default: } return { data: arr } //返回这个数组,也就是返回处理后的假数据 } Mock.mock('/list', /get|post/i, list);//get用于请求数据,post用于删除数据
vue中使用
methods: { setNewsApi: function() { this.$http.get("/list", "").then(res => { this.data = res.data.data; }); }, deleteList(data) { //删除数据 let id = data.id; this.$http.post('/list', { params: { id: id } }).then(function(res) { console.log(res); this.data = res.data.data; alert(data.name + '删除成功'); }.bind(this)) .catch(function(error) { console.log(error) }); }, }
效果预览
github代码地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持黑区网络。