1、安装 mock axios
npm install mockjs axios --save
2、安装axios-mock-adapter
axios-mock-adapter 是axios与mock配置器，简单来说就是把二者结合在一起的工具
npm install axios-mock-adapter --save-dev
二、使用mock
1、在src目录下，创建mock文件夹，在下面再创建data文件夹，创建数据文件，比如user.js，用于模拟生成用户信息数据，初始化我们需要的数据，这里举例初始化用户信息数据
//user.jsimport 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};2、创建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); ?????}); ???}); ?}};3、导出 mock
新建src/mock/index.js，并且复制以下代码，这里的index作用在于方便其他文件引入。
import mock from ‘./mock‘; export default mock; // 导入同级下mock.js的内容，并且导出4、引入 mock
打开 src/main.js，并且复制以下代码，这里的作用就是全局加载mock，执行初始化函数函数，这样的本地我们设定的接口，就可以在全局调用了。
import Mock from ‘./mock‘; // 引入mock模块Mock.start(); //并且执行初始化函数5、封装api函数
- 新建 src/api/api.js
- 我们把所有需要调用的接口，全部写到一个文件里面，封装成一个一个的函数，需要使用的时候我们直接调用这个函数即可,这里写的话，逻辑就比较清晰，接口需要改动的时候也能快速定位，维护成本就降低了。
- 复制下面代码到 src/api/api.js
import axios from ‘axios‘; //导入axios模块export const getTodoList = params => { //封装一个函数，名为getTodoListreturn axios.get(`/todo/list`, { // 请求路径 ‘/todo/list’params: params});};export const addTodo = params => {return axios.post(`/todo/addTodo`, params).then(res => res.data);};6、调用接口
- 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>
vue使用mock.js模拟数据
原文地址：https://blog.51cto.com/9161018/2356559