mock的使用——生成表格数据并展示

别Null.了

已于 2022-08-19 14:23:29 修改

阅读量2.1k

点赞数 7

分类专栏： mock 文章标签：前端 vue.js

于 2022-08-17 09:37:37 首次发布

本文链接：https://blog.csdn.net/TangJing_/article/details/126366220

版权

mock 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

mock官方文档示例：http://mockjs.com/examples.html

为什么使用mock

在团队开发时，前端完成页面设计后想要测试自己的页面是否符合需求，但是后端还没完成接口，没有接口就只好写静态模拟数据。将静态数据写在js文件里，再引用url完成页面渲染。等到后端完成接口后又需要修改我们前面自己写的url，这样会使开发过程变得麻烦。使用mock会自动生成模拟数据，不需要我们自己编写js数据文件。mock对象就是真实对象在调试期间的代替品。

使用mock的优点

1、前后端分离，前端工程师可以独立于后端进行开发；

2、增加测试的真实性。通过随机数据可以模拟各种场景；

3、不需要修改已有的代码就可以拦截ajax请求，返回模拟的响应数据；

4、生成的数据类型丰富，包括随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色、图形等；

5、支持扩展更多的数据类型，支持自定义的函数和正则表达式；

6、对后续开发影响很小。在已有接口文档情况下直接按照接口文档开发，在接口开发完成后只需要改变引入的url地址就可以了；

7、不用考虑跨域问题。

mock使用步骤

下载安装mockjs和axios模块

下载安装mockjs模块：npm install mockjs -S

下载安装axios模块：npm install axios --save

创建index.js

在src下创建一个文件夹用来存放模拟的数据文件，例如 /src/mock/index.js

编写模拟数据

在文件中编写所需要生成的模拟数据。

更多写法可参考mock官方文档示例Mock.js

我的mock数据文件为：

/* eslint-disable prettier/prettier */
import Mock from "mockjs"
let data = Mock.mock({
  //生成10条数据，数组形式
  "data|10": [
    {
      "shopId|+1": 1, //生成id，自增1
      "shopName": "@cname", //生成姓名(这里生成的是中文名称)
      "shopImg": "@Image('100*40','#c33','#ffffff','商品')", //生成随机图片(大小/背景色/字体颜色/文字信息),打印的是图片地址
      "shopVolume|30-1000": 30, //随机生成30至1000的数字(价格)
      "shopAddress": "@county(true)", //随机生成地址
      "shopDate": "@date('yyyy-MM-dd')", //随机生成yyyy-MM-dd格式的日期
      "shopPhone": /^1(5|3|7|8)[0-9]{9}$/, //随机生成电话号码
      "shopStart|1-5": "★", //随机生成1至5个指定的图形(★)
    },
  ],
});
//导出mock数据文件，指定此数据文件的接口url后缀为：/shop/shopList
// eslint-disable-next-line no-unused-vars
export default Mock.mock('/shop/shopList', (req, res) => {
  return data
})

引用mockjs文件和axios

在main.js文件中引入编写的mockjs文件和axios

import "./mock/index.js";
import axios from "axios";
Vue.prototype.axios = axios;

主页面引入mock数据实现功能

这里每一列的prop属性值要和编写的mockjs文件里的数据对应属性一致

<template>
  <div>
    <h1 align="center">商品信息表</h1>
    <!-- <el-button @click="chaxun">查询信息</el-button> -->
    <el-table ref="table" :data="tableData" stripe max-height="500" border>
      <el-table-column label="选择" type="selection" />
      <el-table-column label="编号" prop="shopId" align="center" />
      <el-table-column label="名称" prop="shopName" align="center" />
      <el-table-column label="图片" prop="shopImg" align="center" />
      <el-table-column label="商品价格" prop="shopVolume" align="center" />
      <el-table-column label="地址" prop="shopAddress" align="center" />
      <el-table-column label="生产日期" prop="shopDate" align="center" />
      <el-table-column label="商家联系方式" prop="shopPhone" align="center" />
      <el-table-column label="推荐指数" prop="shopStart" align="center" />
    </el-table>
  </div>
</template>
<script>
import axios from "axios";
// import reqMock from "../mock/reqMock";
export default {
  name: "Table",
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    //console.log(1111);
    axios.get("/shop/shopList").then((res) => {
      //console.log("2222", res);
      this.tableData = res.data.data; //第二个data是我写的mock数据data
    });
  },
};
</script>