vue學習之路 —— vue+mock 前后端分離隨機生成數據

寫在前面的話：

　　自學Vue中，手寫json數據，被同事看到，問我你怎么不用mock，忽然覺得自己太落后了

　　永遠不能停止學習

　　啊啊啊

　　立馬上手去學習mock，真的很方便

　　學習過程中還是遇到了很多問題，最終搞出來了，在此記錄，防止自己忘記

——————————————————————————————————————————————————————————

一、安裝mock

　　npm install mockjs --save-dev

二、實例（舉個小栗子）

　　1、新建一個mock文件夾，里面創建index.js，table.js()

　　目錄如下：

　　

 

　　2、在main.js中引入mock

import '@/mock/index.js';

　　

　　3、在mock/index.js中寫如下代碼：　　

import mockjs from 'mockjs'; import TableApi from './table.js' //引入生成數據的js const Mock = require('mockjs') // Mock函數 // 使用攔截規則攔截命中的請求
 Mock.mock('api/getTableData','get',TableApi.getTableData);//此處url要與使用數據的組件中請求的url一致 //api/getTableData 為組件頁面請求的url，攔截此url，使用table.js中的getTableData生成的虛擬數據
 export default mockjs

　　

　　4、在mock/table.js中寫入如下代碼　　

·

import Mock from 'mockjs'

const code = 200 // 狀態碼 項目同一

export default{
  getTableData () {
    let data = Mock.mock({
      'list|10': [{
        'userID|+1': 1,
        'userName':'@cname',
        'date':'@date',
        'address':"@region"
      }]
    })
    return {
      code,
      data
    }
  }
}

 

 

 

　　5、在需要引入數據的組件內寫如下代碼（此處html使用了element）

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="userName" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="address" label="地址">
    </el-table-column>
  </el-table>
</template>

<script> export default { data() { return { tableData: [] } }, mounted(){ this.createTable(); }, created(){ //組件實例創建完成，此時dom還未生成
 }, methods:{ createTable(){ let $this = this; // getTableData(data)
        this.$axios.get('api/getTableData') //此處地址為mock/index.js文件中.mock函數中的路徑 .then(response => { let $data = response.data.data; $this.tableData = $data; }) } } } </script>

　　6、npm run dev運行，效果如下圖

　　

 

TableApi.getTableData