vue脚手架之mockjs，前后端数据对接交互

1、安装 mockjs 和 axios

npm install mockjs

2、新建mock文件夹，底下建mocj.js文件，在文件新增两个Mock.mock内容作为等下页面触发读取的内容

mocj.js  内容

// 引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random
// mock一组数据
const produceNewsData = function () {
    let articles = [];
    for (let i = 0; i < 100; i++) {
        let newArticleObject = {
            title: Random.csentence(5, 30), //  Random.csentence( min, max )
            thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
            author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
            date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
        }
        articles.push(newArticleObject)
    }
  
    return {
        articles: articles
    }
}
  
// Mock.mock( url, post/get , 返回的数据)
Mock.mock('http://localhost:8080/user', {
    'name':'@name',
    'email':'@emai',
    'age|1-10':5
});
Mock.mock('http://localhost:8080/menu', {
    'id':'@increment',
    'name':'menu',
    'order|10-20':12
});
　

3、在main.js中引入require('./mock/mock.js')

4、修改 Home.vue文件，在页面放置两个button按钮，分别触发用户和菜单的处理请求，成功后弹出获取结果。

5、浏览器访问：http://localhost:8080/#/，分别点击两个按钮，mock 会根据请求 url 拦截对应请求并返回模拟数据。