源於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>