Mockjs在vue中生成数据

1.安装

npm install mockjs --save-dev

2.创建mock文件夹，并创建mocke.js以及数据文件(这里以data.json为例)

/data.json中的数据/
{
  "list":[
    {
      "name":"微创",
      "age":15,
      "height":180
    },{
      "name":"王五",
      "age":20,
      "height":190
    }
  ]
}

/mock.js/
import Mock from 'mockjs'
import data from './data.json'

//注意第一个参数是url地址，这要与ajax请求中的地址一致
Mock.mock('http://www.weichuang.com/getList',{data:data.list})

3.main.js引入mack.js

import "@/mock/mock.js"

4.测试

这里我用axios为例。

/在组件模块中使用/
import axios from 'axios'
export default {
  created(){
    axios.get('http://www.weichuang.com/getList')
      .then(res=>{
        console.log(res)
      })
  }
}

成功。

其他：mockjs的随机生成

Mock.mock('http://www.weichuang.com/getUser',{
  //重复两次
  'name|2':'weichuang',
  //18-35之间的数， 后面的20起到数据类型的作用
  "age|18-35":20
})

Mock.mock('http://www.weichuang.com/regxp',{
  //使用正则表达式
  'regexp':/[a-z][A-Z][0-9]/,
  'regexp2':/\d{5,10}/
})

Mock.mock('http://www.weichuang.com/list',{
  //生成10-20个数
  'info|10-20':[
    {
      //从1开始自增1
      'index|+1':1,
      //生成随机名字
      'name':'@first @last',
      //生成随机id
      'id':'@integer(10000,99999)',
      //生成随机时间
      'date':'@datetime',
      //生成200*200的图片
      'img':'@image("200*200")',
      //生成6到22字符的文本
      "text":'@sentence(6,22)'
    }
  ]
})

具体写法

let Random =Mock.Random;
let productData = () =>{
  let productList=[];//存放信息的数组
  for(let i=0;i<100;i++){
    let product = {
      name:Random.ctitle(5,20),
      img:Random.dataImage('100x100','猫猫'+Random.integer(1,100)),
      price:Random.integer(1000,10000),
      owner:Random.cname()
    }
    productList.push(product)
  }
  return  productList
}
Mock.mock('http://www.weichuang.com/getVarietyItem',productData)