玩玩 vue+mock.js 的使用

mockjs 你可以理解爲模擬數據的一個工具庫，由Mock.mock()方法它可以攔截一個URL地址，然後通過Mock.Random.xxx()方法去隨機生成具有一定格式的數據。可以說具備了攔截和僞造的功能。讓我一個搞後端的人也忍不住想看看這是啥玩意。
官網地址：http://mockjs.com/

第一步：構建 vue 項目。
可使用 vue ui 創建項目。

項目結構如下 這裏除了(Mock.js 是後面加的其它都是自動生成的)

這裏需要安裝兩個以來

npm install axios
npm install mockjs --dev-save 

引入一個 類似於 AJAX 的庫，和引入 mockjs
新建 Mock.js

const Mock = require('mockjs')
const Random = Mock.Random
const newsData = function () {
    let articles = []
    for (let i = 0; i < 10; i++) {
        let newsObj = {
            date: Random.date(),  //年月日
            longDate: Random.datetime(), //精確到時分秒
            number: Random.natural(201, 205),  //數字
            image: Random.image(),      //圖片
            flag: Random.boolean(),  // true-false
            name: Random.cname(),     //姓名
            url: Random.url(),       //url地址
            province: Random.province(),  //省
            city: Random.city(),     //市
            county: Random.county()  //區
        }
        articles.push(newsObj)
    }

    return {
        code: 0,
        msg: "操作成功",
        data: articles,
    }

}

Mock.setup({
    timeout: 500
})


// ``請嚴格注意get請求的地址``
Mock.mock('/api/user/myTranferRecord', 'post', newsData)   //post請求
Mock.mock(RegExp("/api/user/myTranferRecord" + ".*"), 'get', newsData)   //get請求

注意要在 main.js 中註冊
import axios from ‘axios’
Vue.prototype.$axios = axios
import ‘./Mock.js’

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false
import axios from 'axios'
Vue.prototype.$axios = axios
import './Mock.js'
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

然後找到HelloWorld 頁隨意加個按鈕，主要是爲了觸發點擊時間，使用 axios 發起一個請求，然後讓 mock.js 去攔截它。最後返回 Mockjs 僞造回來的數據。

<template>
  <div class="hello">
    // 此處加了一個按鈕
    <button @click="testAxios()">button</button>
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods:{
    testAxios: function () {
      this.$axios.post('/api/user/myTranferRecord').then(res=>{
        console.log(res) //這裏返回的就是我們在mock中自定義的數據
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

頁面如下：

看到一個 Button 按鈕沒，我加的。。。
還加了一個 methods 方法

testAxios: function () {
      this.$axios.post('/api/user/myTranferRecord').then(res=>{
        console.log(res) //這裏返回的就是我們在mock中自定義的數據
      })

結果：

源碼： https://github.com/weijieqiu/iStudy/tree/master/studyVue/vuemock