vue+mock 前后端分离随机生成数据

写在前面的话：

　　自学Vue中，手写json数据，被同事看到，问我你怎么不用mock，忽然觉得自己太落后了

　　永远不能停止学习

　　啊啊啊

　　立马上手去学习mock，真的很方便

　　学习过程中还是遇到了很多问题，最终搞出来了，在此记录，防止自己忘记

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

一、安装mock

　　npm install mockjs --save-dev

二、实例（举个小栗子）

　　1、新建一个mock文件夹，里面创建index.js，table.js

扫描二维码关注公众号，回复： 6557254 查看本文章

　　目录如下：

　　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一致

export default mockjs

　　4、在mock/table.js中写入如下代码　　

import { Random } from 'mockjs'

const code = 200 // 状态码 项目同一

export default{
  getTableData () {
    let data = []
    Array.apply(null, { length: 10 }).forEach(_ => {
      data.push({
        name: Random.cname(), // 随机汉语名
        title: Random.csentence(8, 16), // 随机中文字符串
        date: Random.date() // 随机日期
      })
    })
    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="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="title"
      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运行，效果如下图

vue+mock 前后端分离随机生成数据

猜你喜欢