很早就想總結(jié)下關(guān)于mock data 這部分的內(nèi)容，現(xiàn)在剛好把它總結(jié)一下吧想邦。
首先之前完成的許多項目都是自己獨立完成前端開發(fā)這部分內(nèi)容的峡捡，不過要完成一個完整的包含后端的項目，臣妾做不到阿~~~~~~~（主要是時間也不允許哈哈）所以呢逢捺，這個時候mock data就發(fā)揮它的作用啦~
簡單介紹下mock.js谁鳍，是一款非常強大的插件，可以模擬服務(wù)端的數(shù)據(jù)劫瞳，也可以進行增刪改查這些操作倘潜。
小聲bb：在實際項目開發(fā)過程中，后端完成接口一般較晚柠新，而我們可以使用mock data來模擬數(shù)據(jù)窍荧，這樣可以大大提高效率。
OK恨憎，接下來一起玩轉(zhuǎn)mock吧蕊退！
第一步，當然是在項目中安裝我們的mock插件憔恳，如圖所示瓤荔，這里的axios是為了可以模擬后臺接口。
可以看到輸入“npm install mockjs --save”的時候提示出錯啦钥组。
在我的環(huán)境中也安裝了cnpm输硝，在這里我重新輸入“cnpm install mockjs --save”回車，沒有錯誤程梦，安裝成功点把；接著安裝了axios插件；
好的屿附，安裝成功郎逃。
第二步：建立如圖所示的文件夾axios，并添加api.js文件挺份；以及在components中添加mock.vue文件
第三步：修改main.js文件
第四步：mock.js
import Mock from 'mockjs' // 引入mockjs
const Random = Mock.Random // Mock.Random 是一個工具類褒翰，用于生成各種隨機數(shù)據(jù)
let data = [] // 用于接受生成數(shù)據(jù)的數(shù)組
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 ++) { // 可自定義生成的個數(shù)
? let template = {
? ? 'Boolean': Random.boolean, // 可以生成基本數(shù)據(jù)類型
? ? 'Natural': Random.natural(1, 10), // 生成1到100之間自然數(shù)
? ? 'Integer': Random.integer(1, 100), // 生成1到100之間的整數(shù)
? ? 'Float': Random.float(0, 100, 0, 5), // 生成0到100之間的浮點數(shù),小數(shù)點后尾數(shù)為0到5位
? ? 'Character': Random.character(), // 生成隨機字符串,可加參數(shù)定義規(guī)則
? ? 'String': Random.string(2, 10), // 生成2到10個字符之間的字符串
? ? 'Range': Random.range(0, 10, 2), // 生成一個隨機數(shù)組
? ? 'Date': Random.date(), // 生成一個隨機日期,可加參數(shù)定義日期格式
? ? 'Image': Random.image(Random.size, '#02adea', 'Hello'), // Random.size表示將從size數(shù)據(jù)中任選一個數(shù)據(jù)
? ? '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('/data/index', 'post', data) // 根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)
第五步：api.js
import axios from 'axios'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
// 請求攔截器
axios.interceptors.request.use(function(config) {
? ? return config;
? }, function(error) {
? ? return Promise.reject(error);
? })
? // 響應(yīng)攔截器
axios.interceptors.response.use(function(response) {
? return response;
}, function(error) {
? return Promise.reject(error);
})
// 封裝axios的post請求
export function fetch(url, params) {
? return new Promise((resolve, reject) => {
? ? axios.post(url, params)
? ? ? .then(response => {
? ? ? ? resolve(response.data);
? ? ? })
? ? ? .catch((error) => {
? ? ? ? reject(error);
? ? ? })
? })
}
export default {
? mockdata(url, params) {
? ? return fetch(url, params);
? }
}
第六步：mock.vue
<template>? <div>
? </div>
</template>
<script>
import api from './../axios/api.js'
export default {
? name: 'Mock',
? data () {
? ? return {
? ? ? dataShow: []
? ? }
? },
? created () {
? ? this.getdata()
? },
? methods: {
? ? getdata: function() {
? ? ? api.mockdata('/data/index')
? ? ? .then(res => {
? ? ? ? console.log(res);
? ? ? ? this.dataShow = res.data;
? ? ? })
? ? }
? }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
基本上就可以滿足開發(fā)的需要了~~~~挖個坑得空再來補充+完善。
