使用mockjs模拟生成数据 不用等后端接口啦

最近发现mockjs用来模拟假数据是一个大大减少了联调时间的一件事情。真是太赞了

先上效果图：以下都是使用mockjs随机生成的数据

1. 在vue项目中 安装mockjs。。官网有安装教程，在此就不赘述了，地址：mock官网 -安装教程

npm i mockjs

2. 在main.js中引入mockjs

注：在自己写界面的时候可以引入，但是在前后联调的时候 ，直接注释就可以了。

import '@/mockjs/index.js'

3. 新建mockjs文件夹 —>新建index.js（当然了，这个文件夹和文件可以自己命名） 内容就是返回的假数据

import Mock from 'mockjs'

// 生成4次字符串
// const data = Mock.mock({
//     "string|4": "yx！"
// })
// 生成长度为10的数组
// const data = Mock.mock({
//     'list|10':[
//         {
//             name: '@cname()',
//             address: '@city(true)',
//             id: '@increment(1)' // 每次都增加1
//         }
//     ]
// })
// 拦截请求get 不携带参数  返回数据
// const data =Mock.mock('/api/get/user','get',()=>{
//     return {
//         status: 200,
//         message: '获取get 不携带参数 数据成功'
//     }
// })
// 拦截请求post 不携带参数  返回数据
// const data =Mock.mock('/api/post/user','post',()=>{
//     return {
//         status: 200,
//         message: '获取post 不携带参数 数据成功'
//     }
// })
const {list} = Mock.mock({
    'list|10-30': [
        {
            'id': '@increment(1)', // 每次都增加1
            'date': '@date(yyyy-MM-dd hh:mm:ss)',
            'name': '@cname(3-4)',
            'address': '@city(true)',
            // 图片大小 背景色 前景色 图片格式 文字
            'img': "@image('100x100','#EE6AA7','#000','png','哈哈')",
            'randomImg':"@image('100x100','@color()')",
            'randomImg2':"@image('100x100','@color()')"
        }
    ]
})
// 请求接口 请求方式 返回的数据
Mock.mock('/api/post/list', 'get', () => {
    return {
        status: 200,
        msg: '获取数据成功',
        list:list
    }
})

4. 进行假数据模拟时，，需要用到axios的请求（首先安装axios）

• 安装axios

 npm i axios

• 在main.js中引入，（或者是在 页面中引入。一般全局用到，在main中引入 方便使用）

import axios from 'axios';
// 以下使用axios是错误的（axios并不是插件，不能使用引用插件的方式 引用axios，所以说是错误的额）
// Vue.use(axios) 
// 正确使用方式
Vue.prototype.$https = axios

在页面使用

<template>
  <div style="padding: 20px">
    <div class="top-box">
      <el-table :data="tableData" stripe 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="address" label="地址"> </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <img :src="scope.row.img" alt="" />
          </template>
        </el-table-column>
        <el-table-column label="随机图片">
          <template slot-scope="{ row }">
            <el-image :src="row.randomImg"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="随机图片2">
          <template slot-scope="props">
            <el-image :src="props.row.randomImg2"></el-image>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.$https.get("/api/post/list").then((res) => {
        console.log(res);
        this.tableData = res.data.list;
      });
    },
  },
};
</script>

<style scoped lang="less">
</style>

其中涉及到的作用域插槽的问题，请移步官网进行查看
vue插槽官网地址
里面有详细的介绍使用

另外
还可以使用mock.Random 对象 生成数据

// 引入mockjs
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;

//使用方式
'randomImg3': Random.image(),