详解在vue-cli项目中使用mockjs(请求数据删除数据)

在vue中请求

methods: {
   setNewsApi: function() {
    this.$http.post("/news", "type=top&key=123456").then(res => {
     console.log(res.data);
     this.newsListShow = res.data.data;
    });
   }
  }

效果预览

再做一个删除的处理

模拟数据

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代码地址