vue-cli項目中使用mockjs（基礎使用和全局配置使用）

vue-cli項目中使用mockjs（基礎使用和全局配置使用）

很多時候前後端分離的項目在開發過程中前端所需數據和後端接口並不會同步開發，此時在接口對接之前就可以使用mockjs來自定義模擬數據

vue項目中的請求一般也是使用Axios進行請求，而axios的的一個特點就是會自動攔截請求，今天搞了一下午，也參考了很多文章，差不多完成了demo

axios的使用參考官網。

腳手架搭建好之後

npm install mockjs // 安裝mockjs
npm install axios  // 安裝axios

一、基礎使用（單獨頁面中使用）

<button @click="getData"> 生成數據 </button> 

import Mock from 'mockjs' // node方式引入 (CommonJS)

export default {
  name: 'HelloWorld',
  data () {
    return {
      mockData: [] // 生成數據
    }
  },
  methods: {
    getRandom () {
      this.mockData = Mock.mock({ //生成數據規則
        'list|1-10': [{
          'id|+1': 1
        }]
      })
      document.body.innerHTML += '<pre>' + JSON.stringify(this.mockData, null, 4) + '</pre>' // 展示到頁面中
    }
  }

二、全局配置（main.js中引入）

項目目錄構成（myapp下的src文件夾）

先看http—request.js

import axios from 'axios'
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-urlencoded'
const http = axios.create()

http.defaults.timeout = 3000

http.interceptors.request.use(config => { // 請求攔截器配置 // 可不配置
    // do sth
    return config
}, error => {
    console.log(error)
    return Promise.reject(error)
})

http.interceptors.response.use(response => { // 響應攔截器配置 // 可不配置
    // do something
    return response
}, error => {
    console.log(error)
    return Promise.reject(error)
})

export function fetch(url, params) { // 封裝axios的post請求
    return new Promise((resolve, reject) => { // promise 用法,自行查閱
        axios.post(url, params).then(response => {
            resolve(response.data) // promise相關
        }).catch(error => {
            reject(error) // promise相關
        })
    })
}

export default { // 暴露htto_mock方法，即後面頁面中用到的方法
    http_mock(url, params) {
        return fetch(url, params)
    }
}

然後配置mock(mock.js文件)

import Mock from 'mockjs'

const Random = Mock.Random

var listData = function() {
    let _data = []
    for (let i = 0; i < 20; i++) {
    let newList = { // 詳細 規則 參照mockjs官網
      title: Random.csentence(5, 30), //  Random.csentence( min, max )
      imgSrc: Random.dataImage('200x160', '這是圖片中的文本'), // Random.dataImage( size, text ) 生成圖片（base64位數據格式）
      author_name: Random.cname(), // Random.cname() 隨機生成中文名
      date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默認爲yyyy-MM-dd；Random.time() 返回一個隨機的時間字符串
    }
      _data.push(newList)
  }
  return {_data: _data}
}
// url爲要攔截的請求地址  請求方式  請求數據（規則） （此處api會被mockjs攔截）
Mock.mock('http://route.showapi.com/60-27', 'post', listData)

main.js中 只需引入即可

import mock from './mock'

最後就是頁面中的使用了

引入request.js

import request from '@/http/request'

mock攔截並生成，我使用的是created時直接生成，事件觸發一樣

created () {
    this.getData()
},
method: {
    getData() { // 假裝要使用http_mock發送請求（#手動滑稽#）（mock自動攔截請求並生成數據）
         request.http_mock('http://route.showapi.com/60-27','api_id=63114&api_sign=3847b0').then(response => {
            console.log(response._data)         })
    }  
}

最後出現的數據：

完事其他頁面中引入下就能使用了，後臺接口對接好之後，mockjs直接取消使用就ok了。