源于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: '<App/>'
})
components -> mock.vue
<template>
<div>
hahahahahh
<button @click="getbooklist">get数据</button>
<button @click="addbooks">post新增书籍</button>
<button @click="addbooksById(10)">根据id获取书籍</button>
</div>
</template>
<script>
export default {
name: 'Mock',
data () {
return {
dataShow: []
}
},
created () {
},
methods: {
async getbooklist() {
const {data: res} = await this.$http.get('/api/booklist')
console.log(res)
},
async addbooksById(id) {
const {data: res} = await this.$http.get(`/api/getbooks/${id}`)
console.log("id",res)
},
async addbooks() {
const {data: res} = await this.$http.post('/api/addbooks',{
name: '品三国',
author: '易中天',
price: 100,
count: 100
})
console.log(res)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>