mock入门学习

跟風遠走 提交于 2020-08-12 05:25:48

mockjs入门学习,自动生成数据

官网入口:http://mockjs.com/

  • 安装:npm i mockjs --save-dev

创建mock.js文件
在这里插入图片描述
mock.js

// 引入mockjs
import Mock from 'mockjs'

// 图片大小定义
let size = [
  '300x250', '250x250', '240x400', '336x280',
  '180x150', '720x300', '468x60', '234x60',
  '88x31', '120x90', '120x60', '120x240',
  '125x125', '728x90', '160x600', '120x600',
  '300x600'
]
// 数据规范设置
Mock.mock('/mock/data/', {
  'list|1-10': [{
    'id|+1': 1, //id自动加1,初始值为1。
    "nickname": "@cname", //随机生成中文名字
    "mtime": "@datetime", //随机生成日期时间
    "score|1-800": 800, //随机生成1-800的数字
    "rank|1-100": 100, //随机生成1-100的数字
    "stars|1-5": 5, //随机生成1-5的数字
    "color": "@color", //随机生成颜色
    "Address": "@province", //随机生成地址
    "Url": "@url('http')", //随机生成web地址
    "Image": "@image(Random.size, '#02adea', 'Hello')",//随机生成图片
    "Paragraph":"@cparagraph(2, 5)", //随机生成一段中文文本
    "guid":"@guid",//随机生成一个guid
    "increment":"@increment"//自增整数
  }]
})

main.js

import './assets/mock'//引入mockjs

mock.vue

created() {
    this.mock();
  },
  methods: {
    mock() {
      this.$http
        .get("/mock/data/")
        .then(response => {
          console.log(response.data.list);
        })
        .catch(error => {});
    }
  }
  • 获取到的数据:
    在这里插入图片描述
    在这里插入图片描述

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!