vue结合mockjs实现模拟axios请求

文章目录

• • 1、创建vue项目
  • 2、准备工作，下载依赖
  • 3、创建mockjs信息目录
  • 4、main.js引入mockjs
  • 5、主页app.vue发送请求
  • 6、效果图数据

1、创建vue项目

vue create 项目名称

2、准备工作，下载依赖

// 下载安装mockjs
npm install mockjs --save
// 下载安装axios
npm install axios

3、创建mockjs信息目录

import Mock from "mockjs";
const url = {
  // 自定义 axios 请求的地址
  test: "http://mock.test/test",
};
export default [
  Mock.mock(url.test, {
    // 从属性值中随机选取5个属性
    "data|10": [
      {
        // 1-100任意数值
        "holdShareNum|1-100": 100,
        // 从属性值随机选取一个元素，作为最终值
        "id|+1": 1,
        // 股东名称
        "shareName|1": ["张利东", "马化腾", "马云"],
        // 简称
        "calling|+1": ["张", "马", "马2"],
        // 实缴
        'realityMoney': /\d{5,10}/,
        // 出资金额
        'outMoney': /\d{3,10}/,

      },
    ],
  }),
];

4、main.js引入mockjs

5、主页app.vue发送请求

<template>
  <div id="app">
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  components: {},
  created() {
    this.a();
  },
  methods: {
    a() {
      this.$http.get("http://mock.test/test").then((resp) => {
        console.log(resp);
      });
    },
  },
};
</script>
<style></style>

6、效果图数据

标签：axios,http,vue,test,mockjs,mock
来源： https://blog.csdn.net/greek7777/article/details/120728893