Mock.js语法使用与学习

mock语法

生成字符串

生成指定次数符串

// 生成指定的数据
const data = Mock.mock({
  'string|4': '哎呦!'
})
console.log(data);

生成范围次数字符串

// 生成指定的数据
const data = Mock.mock({
  'string|1-4': '哎呦!'
})
console.log(data);

生成文本

生成一个随机字符串

// 生成文本
const dataText = Mock.mock({
  string: '@cword(3)'  //传递的数值表示生成字符串的个数  ()默认一个
})
console.log(dataText)

生成范围随机字符串

// 生成文本
const dataText = Mock.mock({
  string: '@cword(3, 10)'  //传递的数值表示生成字符串的个数  包括3 和 10
})
console.log(dataText)

生成标题和句子

// 生成标题和句子
const titleText = Mock.mock({
  title: '@ctitle(5)',
  sentence: '@csentence(5)'
})
console.log(titleText);

不带c时生成英文

// 生成标题和句子
const titleText = Mock.mock({
  title: '@title(5)',
  sentence: '@sentence(5)'
})
console.log(titleText);

生成段落

// 生成随机段落
const paragraphdata = Mock.mock({
  content: '@cparagraph(5, 10)'
})
console.log(paragraphdata);

生成数字

// 生成数字
const num = Mock.mock({
  'number|1-100': 10
})
console.log(num);

生成增量id

// 递增生成数字
const num1 = Mock.mock({
  id: '@increment(1)'
})
console.log(num1)
const num2 = Mock.mock({
  id: '@increment(1)'
})
console.log(num2);

生成姓名-地址-身份号

// 生成姓名-地址-身份号
const message = Mock.mock({
  name: '@cname()',
  idCard: '@id()',
  address: '@city(true)'  // true 省＋市  没true 只输出市
})
console.log(message);

生成图片

// 生成图片
const img = Mock.mock({
  img_url: '@image("250x250", "#ffa07a", "#ffbbff", "png", "坤坤")' 
})
console.log(img);

生成时间

// 生成时间
const date = Mock.mock({
  date: '@date(yyyy-MM-dd hh:mm:ss)'
})
console.log(date);

生成数组（重点）

// 生成数组
const arr = Mock.mock({
  "list|8-20": [
    {
      name: '@cname()',
      address: '@city(true)',
      id: '@increment(1)'
    }
  ]
})
console.log(arr);

mock拦截请求

定义get请求

index.js

// 定义拦截get请求
Mock.mock('/api/news', 'get', {
  status: 200,
  msg: '获取get数据成功'
})

app.vue

axios.get('/api/news').then(res => {
        console.log(res);
      })

定义post请求

index.js

// 定义拦截post请求
Mock.mock('/api/post/news', 'post', {
  status: 200,
  msg: '获取post数据成功'
})

app.vue

axios.post('/api/post/news').then(res => {
        console.log(res);
      })