封裝和使用mock.js和easy-mock

1.封裝和使用mock+axios

1.封裝mock

新建api.js

// 引入mockjs
import Mock from 'mockjs'
// 使用mockjs模擬數據
Mock.mock(
  'http://mockjs', {
    'userName': '@name', // 模擬名稱
    'age|1-100': 100, // 模擬年齡(1-100)
    'color': '@color', // 模擬色值
    'date': "@date('yyyy-MM-dd')", // 模擬時間
    'url': '@url()' // 模擬url
  }
)

2.通過axios來使用mock

<template>
<div id="testAxios" ref="kk">

</div>

</template>

<script>
import axios from 'axios'
import '../../../mock/api'
export default {
  data () {
    return {
      msg: 'Shopping Mall'
    }
  },

  mounted () {
    axios.get('http://mockjs').then((res) => {
      if (res.status === 200) {
        console.log(res)

        this.$refs.kk.innerHTML = res.data.url
      }
    })
  }

}
</script>

3.查看結果：

2.使用easy-mock

是mock在線服務，網址： https://www.easy-mock.com/

1.登錄後點擊右下角的加號，添加新數據：

2.創建mock項目

3.進入項目添加數據

4.創建接口

5 複製easy-mock項目地址

6.使用axios來獲取數據

<template>
<div id="testAxios" ref="kk">

</div>

</template>

<script>
import axios from 'axios'
import '../../../mock/api'
export default {
  data () {
    return {
      msg: 'Shopping Mall'
    }
  },

  mounted () {
    axios.get('https://www.easy-mock.com/mock/5edb7c85fe044e6979063dcb/first').then((res) => {
      if (res.status === 200) {
        console.log(res)

        this.$refs.kk.innerHTML = res.data.data
      }
    })
  }

}
</script>

<style>

</style>

7 .查看結果

恰好測試的時候easy-mock崩了，看不到結果了。。。
後續添加上