Mock.js常用的随机数据以及vue脚手架中如何使用

1. 普通js中如何使用
   直接引用在线的mock
   连接

let user = Mock.mock({
            "list|10": [{
                "id|+1": 1001, //id会+1
                "gender|1": [1, 2], //随机生成1或者2
                "price": "@natural(2,8)", //生成最小2 最大8的自然数
                "isSelect": "@boolean", //布尔值
                "img": "@image('200x100','#ffcc33','加油'", //图片大小 颜色 文字
                "nickname": "@cname(1,3)", //中文名
                "isurl": "@url", //网页地址
                "address": "@county(true)", //加上true 指示是否生成所属的省，市
                "text": "@csentence(5,10)" //英文文本 csentence为中文文本
            }]
        })
        console.log(user.list)

2. 如何在vue中使用

• 先下载插件

npm install mockjs

• 在使用前可以在组件中先测试一下

import Mock from "mockjs"
console.log(Mock.Random.cname())

• 新建一个mock的文件夹里面新建一个index.js的文件

// index.js内容
// 引入mock
import Mock from "mockjs"
// 前面为接口地址
Mock.mock("/subjectlist",{
    "list|10":[
        {
            "id|+1":1001,   //id会+1
            "gender|1":[1,2],   //随机生成1或者2
            "price":"@natural(2,8)",  //生成最小2 最大8的自然数
        }
    ]
})

// main.js 中引入mock
import '@/mock'

• 组件中使用

//我这里之前封装过axios了
async created() {
    let res = await this.$get("/subjectlist")
    this.list = res.list
  }

• 补充
  可以使用在线mock平台
  连接