前提：创建好的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请求。