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