前端模拟数据---mockjs

源于https://gitee.com/vsdeveloper/heima_76

使用步骤：基于vue下使用mockjs

一：安装依赖

安装mockjs: npm install mockjs

安装axios ：npm install axios

二、建立有关文件夹mock（index.js  books.js exend.js） components (mock.vue)

新建mock目录与main.js同级  ->index.js

import Mock, {

  Random

} from 'mockjs' // 引入mockjs

// 通过random.extend()自定义函数 另单导引入Random

Random.extend({

  fruit: function () {

    const arr = ['榴莲', '苹果', '葡萄', '西瓜', '香蕉']

    return this.pick(arr)

  }

})

 

// const Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数据

// let data = [] // 用于接受生成数据的数组

// let size = [

//   '300x250', '250x250', '240x400', '336x280',

//   '180x150', '720x300', '468x60', '234x60',

//   '88x31', '120x90', '120x60', '120x240',

//   '125x125', '728x90', '160x600', '120x600',

//   '300x600'

// ] // 定义随机值

// for (let i = 0; i < 10; i++) { // 可自定义生成的个数

//   let template = {

//     'Boolean': Random.boolean, // 可以生成基本数据类型

//     'Natural': Random.natural(1, 10), // 生成1到100之间自然数

//     'Integer': Random.integer(1, 100), // 生成1到100之间的整数

//     'Float': Random.float(0, 100, 0, 5), // 生成0到100之间的浮点数,小数点后尾数为0到5位

//     'Character': Random.character(), // 生成随机字符串,可加参数定义规则

//     'String': Random.string(2, 10), // 生成2到10个字符之间的字符串

//     'Range': Random.range(0, 10, 2), // 生成一个随机数组

//     'Date': Random.date(), // 生成一个随机日期,可加参数定义日期格式

//     'Image': Random.image(Random.size, '#02adea', 'Hello'), // Random.size表示将从size数据中任选一个数据

//     'Image2': Random.dataImage(Random.size, '#02adea', 'Hello'), // Random.size表示将从size数据中任选一个数据

//     'Color': Random.color(), // 生成一个颜色随机值

//     'Paragraph': Random.paragraph(2, 5), // 生成2至5个句子的文本

//     'Name': Random.name(), // 生成姓名

//     'Url': Random.url(), // 生成web地址

//     'Address': Random.province() // 生成地址

//   }

//   data.push(template)

// }

 

Mock.mock('/api/booklist', 'get', {

  status: 200,

  message: '获取书籍列表成功',

  // data: [{

  //   id: 0,

  //   name: '西游记',

  //   author: '吴承恩',

  //   price: 100,

  //   count: 100

  // },

  // {

  //   id: 1,

  //   name: '红楼梦',

  //   author: '曹雪芹',

  //   price: 100,

  //   count: 100

  // },

  // {

  //   id: 2,

  //   name: '品三国',

  //   author: '易中天',

  //   price: 100,

  //   count: 100

  // }

  // ]

  'data|5-10': [{ // Mock.Random隐式调用使用 @

    id: '@increment(1)', // 自增的id值

    //  'id|+1': 0, // 这也是模式id自增

    name: '@cword(2,8)', // 随机生成中文字符串

    author: '易中天',

    price: '@natural(2,20)', // 自然数

    count: '@natural(100,999)',

    img: '@dataImage(100x100)' // 指定宽高的64位图片

  }]

})

 

Mock.mock('/api/addbooks', function (option) { // 这里的Mock.mock()是拦截ajax的

  // 这里的option是post请求的提交的参数

  console.log(option)

  // return {

  //   status: 200,

  //   message: '提交书籍成功'

  // // message: '@cword(2,8)' 这样不生效

  // }

  return Mock.mock({

    status: 200,

    message: '@cword(2,8)'

  })

})

// Mock.mock('/api/getbooks/1', 'get', {

Mock.mock(/\/api\/getbooks/, 'get', function (option) {

  console.log(option)

  const res = /\/api\/getbooks\/(\d+)/.exec(option.url) // 这里要接收id，需要使用正则匹配.exec(),从字符串总提取需要的数据

  return Mock.mock({

    data: {

      id: res[1] - 0,

      name: '@fruit()', // Random.extend()自定义的fruit

      author: '易中天',

      price: 100,

      count: 100,

      img: '@dataImage(100x100)'

    },

    status: 200,

    message: '@cword(2,8)'

  })

})

 

mock模块化时，拆分成 index.js  books.js  extend.js 

index.js

import './exend'

import './books'

 

books.js 

import Mock from 'mockjs'

Mock.mock('/api/booklist', 'get', {

  status: 200,

  message: '获取书籍列表成功',

  'data|5-10': [{ // Mock.Random隐式调用使用 @

    id: '@increment(1)', // 自增的id值

    //  'id|+1': 0, // 这也是模式id自增

    name: '@cword(2,8)', // 随机生成中文字符串

    author: '易中天',

    price: '@natural(2,20)', // 自然数

    count: '@natural(100,999)',

    img: '@dataImage(100x100)' // 指定宽高的64位图片

  }]

})

 

Mock.mock('/api/addbooks', function (option) { // 这里的Mock.mock()是拦截ajax的

  // 这里的option是post请求的提交的参数

  console.log(option)

  return Mock.mock({

    status: 200,

    message: '@cword(2,8)' // @要在Mock.mock()生效

  })

})

Mock.mock(/\/api\/getbooks/, 'get', function (option) {

  console.log(option)

  const res = /\/api\/getbooks\/(\d+)/.exec(option.url) // 这里要接收id，需要使用正则匹配.exec(),从字符串总提取需要的数据

  return Mock.mock({

    data: {

      id: res[1] - 0,

      name: '@fruit()', // Random.extend()自定义的fruit

      author: '易中天',

      price: 100,

      count: 100,

      img: '@dataImage(100x100)'

    },

    status: 200,

    message: '@cword(2,8)'

  })

})

extend.js 

import {

  Random

} from 'mockjs' // 引入mockjs的Random

// 通过random.extend()自定义函数 

Random.extend({

  fruit: function () {

    const arr = ['榴莲', '苹果', '葡萄', '西瓜', '香蕉']

    return this.pick(arr)

  }

})

 

 

main.js: 引入axios

import Vue from 'vue'

import App from './App'

import router from './router'

import axios from 'axios'

require('./mock/index')

Vue.config.productionTip = false

Vue.prototype.$http = axios

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  components: { App },

  template: ''

})

components -> mock.vue