[JavaScript知识库] vue结合mockjs实现模拟axios请求

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue结合mockjs实现模拟axios请求 -> 正文阅读

[JavaScript知识库]vue结合mockjs实现模拟axios请求

文章目录

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>