Vue框架使用Mock随机生成数据详细方法

1.首先需要安装mockjs，axios

mock安装命令：npm install mockjs

axios安装命令： npm i axios

2.选择一个目录创建一个mock文件夹，文件夹下创建一个index.js文件。

3.index.js文件内：首先导入mockjs

导入命令：import Mock from mockjs;

使用导入的Mock随机生成一个对象

Mock.mock(http://localhost:8080/user,

{

id: @id(),

username: @cname(),

date: @date(yyyy-MM-dd),

description: @paragraph(),

email: @email(),

age|18-40: 0

});

4.随机生成一个对象后可以在main.js

全局导入"../mock/index.js"

也可以局部导入"../mock/index.js"

//具体路径看自己的目录结构

本文中直接在App.vue导入使用。

局部导入mock.js和axios

import "../../../mock/mock.js";

import axios from "axios";

5.创建一个数组接收mock随机生成的数据

data() {

return {

tableData: [], //用来接收mock随机生成的数据

};

},

6.使用axios获取mock随机生成的数据，并将获取到的数据传入res中，使用consol.log(res)打印res可以发现res中有一个属性data，data中的数据就是从mock中获取的随机生成的值，使用this.tableData接收数据，使用生命周期created，在创建时调用方法将数据传给.tableData,

methods:{

async getUser() {

const res = await axios.get("http://localhost:8080/user");

this.tableData = res.data;

this.page(this.cur);

},

},

created() {

this.getUser();

},

7.最后，使用tableData即可使用mock随机生成的数据，并且每次刷新页面都会生成不同的数据。

8.如果需要在固定的几个数据中随机，请看