vue结合mockjs实现模拟axios请求

文章目录

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

1、创建vue项目

vue create 项目名称

vue结合mockjs实现模拟axios请求_第1张图片

2、准备工作,下载依赖

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

3、创建mockjs信息目录

vue结合mockjs实现模拟axios请求_第2张图片

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

vue结合mockjs实现模拟axios请求_第3张图片

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、效果图数据

vue结合mockjs实现模拟axios请求_第4张图片

你可能感兴趣的:(前端,vue.js)