在项目中经常会遇到这种情况，前端页面写完了，服务端接口还没弄好，没有数据没法看页面具体的效果，贼尴尬，总不能说让后端小哥哥先给造点数据吧，人家这会儿忙着了，哪有空搭理你啊。

这时候 Mock 派上用场了，我们可以使用 Mock 来拦截 axios 请求，模拟出我们需要的数据。

先来说说它的基本用法：

比如要随机生成一个列表，返回 5-10 条数据，可以这样：

{
	"list|5-10": [
		{
			"id|+1": 1,          
			name: "@cname",             // 生成一个中文名字
			age: "@integer(10-20)",     // 返回10-20间的整数
		}
	]
}

数据占位符：

// 随机返回一个布尔值
@boolean(min?, max?, current?)     

// 返回一个随机自然数（大于等于0的整数）
@natural(min?, max?)               

// 返回一个随机的整数
@integer(min?, max?)               

/*
返回一个随机的浮点数
min：整数部分的最小值；
max：整数部分的最大值；
dmin：小数部分位数的最小值，默认为0；
dmax：小数部分位数的最大值，默认值17
*/
@float(min?, max?, dmin?, dmax?)   

/* 
返回一个随机字符。pool表示字符池，将从中选择一个字符返回，如果传入了 'lower' 或 'upper'、'number'、'symbol'，表示从内置的字符池从选取
{
    lower: "abcdefghijklmnopqrstuvwxyz",
    upper: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
    number: "0123456789",
    symbol: "!@#$%^&*()[]"
}
*/
@character(pool?)   

/*
返回一个随机字符串
pool表示字符池，
min表示随机字符串最小长度，默认3。
max表示随机字符串的最大长度，默认为7
*/
@string(pool?, min?, max?)        

/*
返回一个整型数组
start表示数组的起始值
stop表示数组的结束值（不包含在返回值中），必选值。
step表示整数间的步长，默认为1
*/
@range(start?, stop, step?)      


/* 
返回一个随机的日期字符。
format表示生成的日期字符串的格式，默认格式yyyy-MM-dd    
*/
@date(format?)                      

// 返回一个随机的时间字符串，默认格式HH:mm:ss
@time(format?)                  

// 返回一个随机的日期和时间字符串,默认格式yyyy-MM-dd HH:mm:ss
@datetime(format?)              

/* 
返回当前的日期和时间字符串。
unit：时间单位，用于对当前日期和时间进行格式化。可选值有：year、month、day、hour、minute、second、week，默认不会格式化。
format：生成的日期和时间字符串的格式。默认值为 yyyy-MM-dd HH:mm:ss
*/
@now(unit?, format?)            


/*
生成一个随机的图片地址。
size：指示图片的宽高，格式为 '宽x高'
background：指示图片的背景色
foreground：指示图片的前景色
format：指示图片的格式。默认值为 'png'，可选值包括：'png'、'gif'、'jpg'
text：指示图片上的文字。默认值为参数 size。
*/
@image(size?, background?, foreground?, format?, text?) 

/*
生成一段随机的 Base64 图片编码。
size：指示图片的宽高，格式为 '宽x高'
text：指示图片上的文字。默认值为参数 size。
*/
@dataImage(size?, text?)

@color()                   // 随机生成一个有吸引力的颜色，格式为 '#RRGGBB'。

@hex()                     // 随机生成一个有吸引力的颜色，格式为 '#RRGGBB'。

@rgb()                     // 随机生成一个有吸引力的颜色，格式为 'rgb(r, g, b)'。

@rgba()                    // 随机生成一个有吸引力的颜色，格式为 'rgba(r, g, b, a)'。

@hsl()                     // 随机生成一个有吸引力的颜色，格式为 'hsl(h, s, l)'。


/*
随机生成一段英文文本
@paragraph()
@paragraph(len)
@paragraph(min, max)
len：指示文本中句子的个数。默认值为 3 到 7 之间的随机数。
min：指示文本中句子的最小个数。默认值为 3。
max：指示文本中句子的最大个数。默认值为 7。
*/
@paragraph(min?, max?)

/*
随机生成一段中文文本。
@cparagraph()
@cparagraph(len)
@cparagraph(min, max)
*/
@cparagraph(min?, max?)

/*
随机生成一个英文句子，第一个单词的首字母大写。
@sentence()
@sentence(len)
@sentence(min, max)
len：指示句子中单词的个数。默认值为 12 到 18 之间的随机数。
min：指示句子中单词的最小个数。默认值为 12。
max：指示句子中单词的最大个数。默认值为 18。
*/
@sentence(min?, max?)

/*
随机生成一句中文文本。
@csentence()
@csentence(len)
@csentence(min, max)
*/
@csentence(ming?, max?)

/*
随机生成一个单词
@word()
@word(len)
@word(min, max)
len：指示单词中字符的个数。默认值为 3 到 10 之间的随机数。
min：指示单词中字符的最小个数，默认为3
max：指示单词中字符的最大个数，默认为10
*/
@word(min?, max?)

/*
随机生成一个汉字
@cword()
@cword(pool)
@cword(length)
@cword(pool, length)
@cword(min, max)
@cword(pool, min, max)
pool：汉字字符串。表示汉字字符池，将从中选择一个汉字字符返回。
min：随机汉字字符串的最小长度。默认值为 1。
max：随机汉字字符串的最大长度。默认值为 1。
*/
@cword(pool?, min?, max?)

/*
随机生成一个英文标题，每个单词的首字母大写。
@title()
@tilte(len)
@title(min, max)
len：指示单词中字符的个数。默认值为 3 到 7 之间的随机数。
min：指示单词中字符的最小个数。默认值为 3。
max：指示单词中字符的最大个数。默认为7.
*/
@title(min?, max?)

/*
随机生成一句中文标题。
@ctitle()
@ctitle(len)
@ctitle(min, max)
len：指示字数。默认值为 3 到 7 之间的随机数。
min：指示标题中字的最小个数。默认值为 3。
max：指示标题中字的最大个数。默认为7.
*/
@ctitle(min?, max?)

// 随机生成一个常见的中文姓名。
@cname()

// 随机生成一个常见的中文姓。
@cfirst()

// 随机生成一个常见的中文名。
@clast()

// 随机生成一个常见的英文名。middle可选，布尔值。指示是否生成中间名。
@name(middle?)

// 随机生成一个常见的英文名。
@first()

// 随机生成一个常见的英文姓。
@last()

/*
随机生成一个 URL。
@url()
@url(protocol, host)
protocol：指定 URL 协议。例如 http
host：指定 URL 域名和端口号。例如 nuysoft.com。
*/
@url(protocol?, host?)

/*
随机生成一个 URL 协议。返回以下值之一：'http'、'ftp'、'gopher'、'mailto'、'mid'、'cid'、'news'、'nntp'、'prospero'、'telnet'、'rlogin'、'tn3270'、'wais'。
*/
@protocol()

// 随机生成一个域名
@domain()

// 随机生成一个顶级域名
@tld()

/*
随机生成一个邮件地址。
@email()
@email(domain)
domain：指定邮件地址的域名。例如 qq.com。h.pqpneix@qq.com"
*/
@email( domain? )

// 随机生成一个IP地址
@ip()

// 随机生成一个（中国）大区。如，华中、华北
@region()

// 随机生成一个（中国）省（或直辖市、自治区、特别行政区）。
@province()

/*
随机生成一个（中国）市。
@city()
@city(prefix)
prefix：布尔值。指示是否生成所属的省。
*/
@city(prefix?)

/*
随机生成一个（中国）县。
prefix：布尔值。指示是否生成所属的省、市。
*/
@county(prefix?)

// 随机生成一个邮政编码（六位数字）。
@zip()

// 把字符串的第一个字母转换为大写。
@capitalize(word)

// 把字符串转换为大写
@upper(str)

// 把字符串转换为小写
@lower(str)

// 从数组中随机选取一个元素，并返回。
@pick(arr)

// 打乱数组中元素的顺序，并返回。
@shuffle(arr)

// 随机生成一个GUID。如662C63B4-FD43-66F4-3328-C54E3FF0D56E
@guid()

// 随机生成一个 18 位身份证。
@ID()

// 生成一个全局的自增整数。step可选，整数自增步长，默认为1
@increment(step?)

使用 mock 拦截 axios 请求：

import Mock from 'mockjs'
import axios from 'axios'
axios.get('http://192.168.10.187:8089/api/mg/mall/goods', {}).then(res => {
  console.log('res', res)
})
Mock.mock('http://192.168.10.187:8089/api/mg/mall/goods', {
  "list|5-10": [
    {
      "suid|+1": 1,
      name: "@cname",
      age: "@integer(10-20)",
      address: "@province @city @county",
      id: "@ID",
      img: "@image(100x100, #eee)",
      text: "@cparagraph"
    }
  ]
})

结果如下：