vue使用mock.js模拟数据

1、安装
一、安装 mock axios
npm install mockjs axios --save
二、安装axios-mock-adapter
axios-mock-adapter 是axios与mock配置器，简单来讲就是把两者结合在一块儿的工具
npm install axios-mock-adapter --save-dev

2、使用mock
一、在src目录下，建立mock文件夹，在下面再建立data文件夹，建立数据文件，好比user.js，用于模拟生成用户信息数据，初始化咱们须要的数据，这里举例初始化用户信息数据

//user.js
import Mock from 'mockjs'; // 导入mockjs 模块
let Users = []; // 定义咱们须要的数据，后面导出
const COUNT = [1, 2, 3, 4, 5]; // 定义咱们须要数量，即生成几条模拟数据
for (let i = 1; i <= COUNT.length; i++) {
  Users.push(Mock.mock({ // 根据数据模板生成模拟数据。
    id: Mock.Random.guid(), // 随机id
    title: Mock.Random.first(), // 随机标题
        name:Mock.Random.cname(),  //随机中文名
        addr: Mock.mock('@county(true)'),  //随机地址
    'age|18-60': 1,  //随机年龄
    birth: Mock.Random.date(),  //随机生日
    sex: Mock.Random.integer(0, 1)  //随机性别
    isDelete: false, //是否删除
    locked: Mock.Random.boolean(), // 随机锁定
    record: COUNT.map(() => { // ×××单项列表的数据
      return {
        text: Mock.Random.cparagraph(2), // 随机内容
        isDelete: false, //是否删除
        checked: Mock.Random.boolean()  //是否完成
      };
    })
  }));
}
export { // 导出用户数据
  Users
};

二、建立mock,js
核心文件，它的做用就是模拟ajax请求的接口，生成并返回模拟数据.

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import Mock from 'mockjs';
import { Users } from './data/user.js'; // 导入Users数据
export default {
  /**
   * mock start
   */
  start() { // 初始化函数
    let mock = new MockAdapter(axios); // 建立 MockAdapter 实例

        //获取用户列表
    mock.onGet('/user/list').reply(config => { //  config 指 前台传过来的值  网址本身随意定义，访问时要和这个网址一致就能够，这个'/user/list'，就是get请求时的url地址
      let {name} = config.params;
      let mockUsers = Users.filter(user => {
        if (name && user.name.indexOf(name) == -1) return false;
        return true;
      });
      return new Promise((resolve, reject) => {  //响应请求，返回数据给前台
        setTimeout(() => {
          resolve([200, {
            users: mockUsers
          }]);
        }, 1000);
      });
    });

    mock.onGet('/todo/list').reply(config => { //  config 指 前台传过来的值
      let mockTodo = Todos.map(tode => { // 重组 Todos数组，变成咱们想要的数据
        return {
          id: tode.id, 
          title: tode.title,
          count: tode.record.filter((data) => {
            if (data.checked === false) return true;
            return false;
          }).length, // 过滤到record里面 ‘checked’ 为true的数据，由于它们已经被完成了
          locked: tode.locked,
          isDelete: tode.isDelete
        };
      }).filter(tode => {
        if (tode.isDelete === true) return false; // 过滤掉 ‘isDelete’为true，由于已经被删除了。
        return true;
      });
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([200, {
            todos: mockTodo // 返回状态为200，而且返回todos数据
          }]);
        }, 200);
      });
    });
        // 新增一条todo
    mock.onPost('/todo/addTodo').reply(config => {
      Todos.push({
        id: Mock.Random.guid(),
        title: 'newList',
        isDelete: false,
        locked: false,
        record: []
      });
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([200]);
        }, 200);
      });
    });
  }
};

三、导出 mock
新建src/mock/index.js，而且复制如下代码，这里的index做用在于方便其余文件引入。

import mock from './mock'; 
export default mock; // 导入同级下mock.js的内容，而且导出

四、引入 mock
打开 src/main.js，而且复制如下代码，这里的做用就是全局加载mock，执行初始化函数函数，这样的本地咱们设定的接口，就能够在全局调用了。

import Mock from './mock'; // 引入mock模块
Mock.start(); //而且执行初始化函数

五、封装api函数

• 新建 src/api/api.js
• 咱们把全部须要调用的接口，所有写到一个文件里面，封装成一个一个的函数，须要使用的时候咱们直接调用这个函数便可,这里写的话，逻辑就比较清晰，接口须要改动的时候也能快速定位，维护成本就下降了。
• 复制下面代码到 src/api/api.js

  import axios from 'axios'; //导入axios模块
  export const getTodoList = params => { //封装一个函数，名为getTodoList
  return axios.get(`/todo/list`, { // 请求路径 ‘/todo/list’
  params: params
  });
  };
  export const addTodo = params => {
  return axios.post(`/todo/addTodo`, params).then(res => res.data);
  };

  六、调用接口

• vue生命周期
• created()函数,通常是实例建立完成，可是dom尚未开始渲染时候执行，若是咱们想在页面渲染以前就请求数据，那么咱们就把ajax放在里面。
• 绑定class
• 复制如下代码到 src/components/menus.vue

  <template>
  <!--绑定点击事件goList),而且判断当todoId 时候 item.id时,文字高亮度-->
  <div class="list-todos">
  <!-- 绑定class，当items循环中的id等于咱们设置的选中todoId时候,就会加上active这个calss,这样样式就会发生变化。-->
  <a @click="goList(item.id)" class="list-todo list activeListClass" :class="{'active': item.id === todoId}" v-for="item in items">
    <span class="icon-lock" v-if="item.locked"></span>
    <span class="count-list" v-if="item.count > 0">{{item.count}}</span>
    {{item.title}}
  </a>
  <a class=" link-list-new" @click="addTodoList">
    <span class="icon-plus">
    </span>
    新增
  </a>
  </div>
  <template/>
  <script>
  import { getTodoList, addTodo } from '../api/api'; // 引入咱们 封装好的两个接口函数。
  export default {
  data() {
  return {
    items: [], // 菜单数据
    todoId: '' // 默认选中id
  };
  },
  created() { // 调用请求菜单列表数据的接口
  getTodoList({}).then(res => {
    const TODOS = res.data.todos; // 数据都会返回在res.data里面。
    this.items = TODOS; // 个人把菜单数据赋值给定义的this.items
    this.todoId = TODOS[0].id; // 把菜单数据的默认的第一个对象的id赋值给默认选中的id
  });
  },
  methods: {
  goList(id) { // 点击菜单时候,替换选中id
    this.todoId = id;
  },
  addTodoList() { // 点击新增按钮时候
  // 调用新增菜单的接口，在接口调用成功在请求数据
    addTodo({}).then(data => {
      getTodoList({}).then(res => {
        const TODOS = res.data.todos;
        this.todoId = TODOS[TODOS.length - 1].id;
        this.items = TODOS;
      });
    });
  }
  }
  };
  </script>