vue+mockjs模拟数据的增删改查功能

这一部分讲述了mock.js在vue中的详细使用(https://blog.youkuaiyun.com/yw00yw/article/details/81272632)。

在vue-cli项目中使用Mock模拟数据的增删改查操作：

mock.js：

// 模拟数据列表
var arr = [];
for(let i = 0 ; i < 10 ; i++){
    let newArticleObject = {
        name: Random.cname(),
        content: Random.csentence(5,10),
        id: i
    }
    arr.push(newArticleObject);  //将模拟的数据放到数组中
}

// 数据的删除操作
let list = function(options){
    // console.log(options.type);
    let rtype = options.type.toLowerCase(); //获取请求的类型并转换为小写
    switch (rtype) {
        case 'get':
            break;
        case 'post':
            let id = parseInt(JSON.parse(options.body).params.id); // 获取请求的id，将options.body转换为JSON对象
            arr = arr.filter(function(val) {
                return val.id != id;  // 过滤掉前台传过来的id对应的相应数据，并重新返回
            });
            break;
        default:
            break;
    }
    return {
        data: arr
    }
}
Mock.mock('/list',/get|post/i,list);

// 数据的添加操作
let listAdd = function(options){
//  console.log("传过来的数据"+JSON.parse(options.body).params.obj);
    let rtype = options.type.toLowerCase(); //获取请求的类型
    switch (rtype) {
        case 'get':
            break;
        case 'post':
            let obj = JSON.parse(options.body).params.obj;
            // console.log("数据获取"+ obj);
            arr = arr.concat(obj);  // 将前台返回来的数据，拼接到数组中。
            break;
        default:
            break;
    }
    return {
        data: arr
    }
}
Mock.mock('/listAdd',/get|post/i,listAdd);

// 数据的修改操作
let listUpdate = function(options){
    let rtype = options.type.toLowerCase(); //获取请求的类型
    switch (rtype) {
        case 'get':
            break;
        case 'post':
            let obj = JSON.parse(options.body).params.obj;
            // console.log(JSON.parse(options.body).params);
            // let id = parseInt(JSON.parse(options.body).params.obj.id);
            arr = arr.map(val => {  // 将需要替换的数据替换掉
                return val.id === obj.id ? obj : val ;
            });
            break;
        default:
            break;
    }
    return {
        data: arr
    }
}
Mock.mock('/listUpdate',/get|post/i,listUpdate);

test.vue：

<template>
  <div>
      <div class="add">
        <input type="number" v-model="obj.id">
        <input type="text" v-model="obj.name">
        <input type="text" v-model="obj.content">
        <button @click="addList">添加</button>
        <button @click="updateList">修改</button>
      </div>
     <ul>
       <li v-for="item in list">{{item.id}}:*****:{{item.name}}:{{item.content}}--------<button @click="deleteList(item.id)">删除</button></li>
     </ul>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        list: [],
        obj: {  //将添加的数据存到obj对象中
          id: 0,
          name: '',
          content: ''
        }
      }
    },
    created(){
      this.getData();
    },
    methods: {

      // 查询列表数据
      getData(){
        this.$http.get('/list').then(res => {
          this.list = res.data.data;
        });
      },

      // 删除列表数据
      deleteList(id){
        this.$http.post('/list',{
          params: {
           id: id
          }
        }).then(res => {
            this.list = res.data.data;
        });
      },

      // 增加列表数据
      addList(){
        // console.log("****"+this.obj);
        this.$http.post('/listAdd',{
          params: {
            obj: this.obj
          }
        }).then(res => {
            // console.log("请求成功"+res.data.data);
            this.list = res.data.data;
        });
      },

      // 修改列表数据
      updateList(){
        var that = this;
        this.$http.post('/listUpdate',{
          params: {
            obj: this.obj
          }
        }).then(function(res){
          // console.log("请求的数据"+res.data.data);
          that.list = res.data.data;
        });
      }
    }

  }
</script>

<style>
  *{
    padding: 0;
    margin: 0;
  }
  li{
    list-style: none;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
</style>

效果预览：