mock学习2

最新推荐文章于 2024-07-23 19:22:22 发布

水蜜桃那么甜

最新推荐文章于 2024-07-23 19:22:22 发布

阅读量230

点赞数

分类专栏： vue

原文链接：https://blog.csdn.net/yangsi0706/article/details/107581140?utm_medium=distribute.pc_category.none-task-blog-hot-5.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-5.nonecase&request_id=

版权

vue 专栏收录该内容

63 篇文章 7 订阅

订阅专栏

官网入口：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 => {});
    }
  }

获取到的数据：