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.如果需要在固定的几个数据中随机，请看

https://blog.csdn.net/m0_62956518/article/details/124353752