vue结合mockjs实现模拟axios请求

2021-10-12 18:03:46 阅读：358 来源： 互联网

文章目录

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9