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