Vue-cli中用mockjs axios实现前后端分离

一，安装axios和mockjs

cnpm i axios -S

（注意：-S是--save的简写，也就是说，安装axios也可以用：cnpm i axios --save） 

 cnpm i mockjs -D

（注意：-D是--save-dev的简写，也就是说，安装mockjs也可以用：cnpm i mockjs --save-dev）  

二，在main.js中引入axios和mockjs

import axios from 'axios'
import './mock/mock.js'
 //全局注册axios
Vue.prototype.$axios = axios

注意：需要提前在src文件夹下面新建一个“mock”文件夹，再在mock文件夹里面新建一个mock.js文件

mock.js内容如下：（注意：mock.js中需要导入“mockjs”插件，一句代码就行：const Mock =require('mockjs');）

// const Mock =require('mockjs');//获取mockjs插件.这种方式也可以
import Mock from 'mockjs'

const Random =Mock.Random;
const produceData=function(opt){
    console.log('opt:',opt); //这里注意：不能用加号代替逗号，即不能写成：console.log('opt:'+opt);
    let articles=[];
    for(let i=0;i<10;i++){
        let newArticleObject={
            name:Random.cname(), //随机生成一个中文名
            email:Random.email(), //随机生成一个电子邮件
            date:Random.date()+' ' +Random.time() //随机生成日期和时间
        }
        articles.push(newArticleObject);
    }
    return{
        data:articles
    }
}
Mock.mock('/user',/post|get/i,produceData); //当post或get请求到/user路由时，mock会拦截请求并返回
// Mock.mock('/user','post',produceData); //这种方式就只能用post请求,注意post要加引号

HelloWorld.vue

运行结果如下：

控制台内容：

例2：