vue项目中mockjs模拟后台接口数据

一.安装

在项目文件下的命令行窗口中输入：npm install mockjs --save-dev（或者用cnpm install mockjs --save-dev）

二.配置数据

在src文件中新建一个文件夹util，新建mock.js文件，内容如下，随便配置了三个接口，第三个引用mock的Random对象，随机生成图片和文字

import Mock from 'mockjs';  /*引用mockjs*/
/*配置接口：url地址及数据*/
Mock.mock('http://mysite/weblist', {
    weblist:[
        {type:'html'},
        {type:'css'},
        {type:'javascript'}
    ]
});
Mock.mock('http://mysite/userlist', {
    userlist:[
        {name:'Mary'},
        {name:'Tom'},
        {name:'Lucy'}
    ]
});

// 获取 mock.Random 对象
const Random = Mock.Random;
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('http://mysite/produceNews','post', produceNewsData);

三.使用mock接口

比如在vue组件中使用ajax请求接口。
vue2.0建议用axios，所以先安装npm install axios
在main.js中添加

import axios from 'axios'
Vue.prototype.$http=axios

在vue组件中使用

import data from '@/util/mock'  /*导入mock.js文件*/

vm.$http.get("http://mysite/userlist")
  .then(function(res){
      console.log（res.data.userlist）;
  })
  .catch(function(err){
      console.log(err)
  })