vue+vuecli+webpack中使用mockjs模拟后端数据

mockjs的简介：

使用mockjs可以事先模拟数据，前提是和后端约定好了数据接口，怎样的数据。使用mock就可以生成你要的数据了，从而实现开发时前后端分离。

其主要功能是：

1. 基于数据模板生成模拟数据。
2. 基于HTML模板生成模拟数据。
3. 拦截并模拟 ajax 请求。

使用背景

在我们的生产实际中，后端的接口往往是较晚才会出来，并且还要写接口文档，于是我们的前端的许多开发都要等到接口给我们才能进行，这样对于我们前端来说显得十分的被动，于是有没有可以制造假数据来模拟后端接口呢，答案是肯定的。应该有人通过编写json文件来模拟后台数据，但是很局限，比如增删改查这些接口怎么实现呢，于是今天我们来介绍一款非常强大的插件Mock.js，可以非常方便的模拟后端的数据，也可以轻松的实现增删改查这些操作。

vue+vue-cli+webpack+axios+mockjs的使用方法

1. mockjs和axios的安装：

npm install mockjs --save-dev
npm install axios --save

2. 新建一个mock.js的文件

3. 在main.js中引入新建的mock.js文件和axios

import axios from 'axios';
import Mock from './mock.js';

在main.js将axios添加到vue原型

Vue.prototype.$http = axios;
使用方法：this.$http.get()

4. 在mock.js文件中导入安装的mockjs

import Mock from 'mockjs';

5. 在mock.js文件中编写响应数据

// test2
const objTest = {
    a:"aa",
    b:"bb",
    c:"cc",
    d:"dd"
}
var arr = [11,22,33];
var fun = function(x){
    return x + 10;
}
Mock.mock("http://text.com",{
    "name1|1-3":  'a',
    "name2|2": 'b',
    "name3|+1": 3,
    "name4|1-4": 2,
    "name5|1-4.5-8": 1,
    "name6|1": true,
    "name7|1-3": true,
    "name8|1-4": objTest,
    "name9|2": objTest,
    "name10|1": arr,
    "name11|1-3": arr,
    "name12|2": arr,
    "name13": fun(10),
    "name14": /[a-z][A-Z]/,
    "name15": /\d{1,3}/,
    "name16": "@FIRST",
    "name17": "@LAST",
    "name18": "@email",
    "name19": "@date",
    "name20": "@image"
});

6. 使用axios请求数据

created(){
    this.getTest();
},
methods: {
    getTest(){
        this.$http.get('http://text.com').then(function(res){
            console.log(res.data);
        });
    }
}

7. 请求的数据结果

mockjs语法

博客： https://segmentfault.com/a/1190000010211622#articleHeader19
官网： http://mockjs.com/