vue使用mock.js模擬數(shù)據(jù)

一、安裝
1、安裝 mock axios
npm install mockjs axios --save
2、安裝axios-mock-adapter
axios-mock-adapter 是axios與mock配置器，簡(jiǎn)單來(lái)說(shuō)就是把二者結(jié)合在一起的工具
npm install axios-mock-adapter --save-dev

二、使用mock
1、在src目錄下，創(chuàng)建mock文件夾，在下面再創(chuàng)建data文件夾，創(chuàng)建數(shù)據(jù)文件，比如user.js，用于模擬生成用戶信息數(shù)據(jù)，初始化我們需要的數(shù)據(jù)，這里舉例初始化用戶信息數(shù)據(jù)

//user.js
import Mock from 'mockjs'; // 導(dǎo)入mockjs 模塊
let Users = []; // 定義我們需要的數(shù)據(jù)，后面導(dǎo)出
const COUNT = [1, 2, 3, 4, 5]; // 定義我們需要數(shù)量，即生成幾條模擬數(shù)據(jù)
for (let i = 1; i <= COUNT.length; i++) {
  Users.push(Mock.mock({ // 根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)。
    id: Mock.Random.guid(), // 隨機(jī)id
    title: Mock.Random.first(), // 隨機(jī)標(biāo)題
        name:Mock.Random.cname(),  //隨機(jī)中文名
        addr: Mock.mock('@county(true)'),  //隨機(jī)地址
    'age|18-60': 1,  //隨機(jī)年齡
    birth: Mock.Random.date(),  //隨機(jī)生日
    sex: Mock.Random.integer(0, 1)  //隨機(jī)性別
    isDelete: false, //是否刪除
    locked: Mock.Random.boolean(), // 隨機(jī)鎖定
    record: COUNT.map(() => { // ×××單項(xiàng)列表的數(shù)據(jù)
      return {
        text: Mock.Random.cparagraph(2), // 隨機(jī)內(nèi)容
        isDelete: false, //是否刪除
        checked: Mock.Random.boolean()  //是否完成
      };
    })
  }));
}
export { // 導(dǎo)出用戶數(shù)據(jù)
  Users
};

2、創(chuàng)建mock,js
核心文件，它的作用就是模擬ajax請(qǐng)求的接口，生成并返回模擬數(shù)據(jù).

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import Mock from 'mockjs';
import { Users } from './data/user.js'; // 導(dǎo)入U(xiǎn)sers數(shù)據(jù)
export default {
  /**
   * mock start
   */
  start() { // 初始化函數(shù)
    let mock = new MockAdapter(axios); // 創(chuàng)建 MockAdapter 實(shí)例

        //獲取用戶列表
    mock.onGet('/user/list').reply(config => { //  config 指 前臺(tái)傳過(guò)來(lái)的值  網(wǎng)址自己隨意定義，訪問(wèn)時(shí)要和這個(gè)網(wǎng)址一致就可以，這個(gè)'/user/list'，就是get請(qǐng)求時(shí)的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) => {  //響應(yīng)請(qǐng)求，返回?cái)?shù)據(jù)給前臺(tái)
        setTimeout(() => {
          resolve([200, {
            users: mockUsers
          }]);
        }, 1000);
      });
    });

    mock.onGet('/todo/list').reply(config => { //  config 指 前臺(tái)傳過(guò)來(lái)的值
      let mockTodo = Todos.map(tode => { // 重組 Todos數(shù)組，變成我們想要的數(shù)據(jù)
        return {
          id: tode.id, 
          title: tode.title,
          count: tode.record.filter((data) => {
            if (data.checked === false) return true;
            return false;
          }).length, // 過(guò)濾到record里面 ‘checked’ 為true的數(shù)據(jù)，因?yàn)樗鼈円呀?jīng)被完成了
          locked: tode.locked,
          isDelete: tode.isDelete
        };
      }).filter(tode => {
        if (tode.isDelete === true) return false; // 過(guò)濾掉 ‘isDelete’為true，因?yàn)橐呀?jīng)被刪除了。
        return true;
      });
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([200, {
            todos: mockTodo // 返回狀態(tài)為200，并且返回todos數(shù)據(jù)
          }]);
        }, 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);
      });
    });
  }
};

3、導(dǎo)出 mock
新建src/mock/index.js，并且復(fù)制以下代碼，這里的index作用在于方便其他文件引入。

import mock from './mock'; 
export default mock; // 導(dǎo)入同級(jí)下mock.js的內(nèi)容，并且導(dǎo)出

4、引入 mock
打開(kāi) src/main.js，并且復(fù)制以下代碼，這里的作用就是全局加載mock，執(zhí)行初始化函數(shù)函數(shù)，這樣的本地我們?cè)O(shè)定的接口，就可以在全局調(diào)用了。

import Mock from './mock'; // 引入mock模塊
Mock.start(); //并且執(zhí)行初始化函數(shù)

5、封裝api函數(shù)

• 新建 src/api/api.js
• 我們把所有需要調(diào)用的接口，全部寫(xiě)到一個(gè)文件里面，封裝成一個(gè)一個(gè)的函數(shù)，需要使用的時(shí)候我們直接調(diào)用這個(gè)函數(shù)即可,這里寫(xiě)的話，邏輯就比較清晰，接口需要改動(dòng)的時(shí)候也能快速定位，維護(hù)成本就降低了。
• 復(fù)制下面代碼到 src/api/api.js

  import axios from 'axios'; //導(dǎo)入axios模塊
  export const getTodoList = params => { //封裝一個(gè)函數(shù)，名為getTodoList
  return axios.get(`/todo/list`, { // 請(qǐng)求路徑 ‘/todo/list’
  params: params
  });
  };
  export const addTodo = params => {
  return axios.post(`/todo/addTodo`, params).then(res => res.data);
  };

  6、調(diào)用接口

• vue生命周期
• created()函數(shù),一般是實(shí)例創(chuàng)建完成，但是dom還沒(méi)有開(kāi)始渲染時(shí)候執(zhí)行，如果我們想在頁(yè)面渲染之前就請(qǐng)求數(shù)據(jù)，那么我們就把a(bǔ)jax放在里面。
• 綁定class
• 復(fù)制以下代碼到 src/components/menus.vue

  <template>
  <!--綁定點(diǎn)擊事件goList),并且判斷當(dāng)todoId 時(shí)候 item.id時(shí),文字高亮度-->
  <div class="list-todos">
  <!-- 綁定class，當(dāng)items循環(huán)中的id等于我們?cè)O(shè)置的選中todoId時(shí)候,就會(huì)加上active這個(gè)calss,這樣樣式就會(huì)發(fā)生變化。-->
  <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'; // 引入我們 封裝好的兩個(gè)接口函數(shù)。
  export default {
  data() {
  return {
    items: [], // 菜單數(shù)據(jù)
    todoId: '' // 默認(rèn)選中id
  };
  },
  created() { // 調(diào)用請(qǐng)求菜單列表數(shù)據(jù)的接口
  getTodoList({}).then(res => {
    const TODOS = res.data.todos; // 數(shù)據(jù)都會(huì)返回在res.data里面。
    this.items = TODOS; // 我的把菜單數(shù)據(jù)賦值給定義的this.items
    this.todoId = TODOS[0].id; // 把菜單數(shù)據(jù)的默認(rèn)的第一個(gè)對(duì)象的id賦值給默認(rèn)選中的id
  });
  },
  methods: {
  goList(id) { // 點(diǎn)擊菜單時(shí)候,替換選中id
    this.todoId = id;
  },
  addTodoList() { // 點(diǎn)擊新增按鈕時(shí)候
  // 調(diào)用新增菜單的接口，在接口調(diào)用成功在請(qǐng)求數(shù)據(jù)
    addTodo({}).then(data => {
      getTodoList({}).then(res => {
        const TODOS = res.data.todos;
        this.todoId = TODOS[TODOS.length - 1].id;
        this.items = TODOS;
      });
    });
  }
  }
  };
  </script>