Vue项目中引入mockjs

前提：创建好的vue项目

前言：

• 为什么引入mockjs：为了实现前后端分离，开发工作可以异步进行
• 其他工具：axios
• 一般的前后端交互过程：前端 --> ajax请求 --> 网络协议 --> 后端服务 --> 后端处理后返回请求结果给前端 --> 前端接收请求结果，做后续处理
• 前后端分离的交互过程：前端 --> axios --> 网络协议 --> mockjs模拟请求结果 --> 前端接收Mock出来的数据，做后续处理
• 相当于mockjs充当原本的后台服务的角色，axios充当api请求的角色。

1、安装 mockjs 和 axios
转到项目根目录，输入命令：

#npm install axios --save-dev

#npm install mockjs --save-dev

【慢的话用国内镜像，cnpm命令即可】

2、添加mock规则

/src/mock.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('/news/index', 'post', produceNewsData)　　

3、在 main.js 引入并注册

require('./mock.js')

4、其他：
Mock官网：Mock.mock(rurl, rtype, template)，记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求 时，将根据模板 template 生成模拟数据，并作为相应数据返回。

• rurl：表示需要拦截的 URL,可以是 URL字符串或 URL正则，如：‘/domin/list.json’    /\/domian\/list\.jsaon\
• rtype：表示需要拦截的Ajax请求类型。如 GET、POST、PUT、DELETE等。
• template：表示数据模板。可以是对象或字符串。如 {‘data|1-10’:[{}]}、‘@EMAIL’

所以说此时如果要想通过axios（模拟的是http请求）调用mockjs，那么需要用ajax请求。

资料：
1. vue+mockjs 模拟数据，实现前后端分离开发