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

Posted 2022-11-13 别Null.了

目录

为什么使用mock

使用mock的优点

mock使用步骤

下载安装mockjs和axios模块

创建index.js

编写模拟数据

引用mockjs文件和axios

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

实现结果

---

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>

实现结果