vue结合插件mock.js使用

vue 专栏收录该内容
14 篇文章 0 订阅

一、前言

mock.js可以通过随机数据来模拟各种场景,不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据;支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等;支持支持扩展更多数据类型,支持自定义函数和正则,非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型。

二、基础语法

http://mockjs.com/examples.html

三、结合vue使用

1.安装

使用npm安装

npm install mockjs --save

使用yarn安装

yarn add mockjs --save

2.引入mock.js

通过vue脚手架搭建的项目,在src目录下创建mock文件夹区分,在mock文件夹下面创建文件index.js,以及模拟接口服务services文件夹,其中index.js内容如下:

// 判断环境不是 prod 或者 preview 是 true 时,加载 mock 服务
if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') {
  // 使用同步加载依赖
  const Mock = require('mockjs2')
  require('./services/user')
  Mock.setup({
    timeout: 500 // 请求延时时间
  })
  console.log('mock mounted')
}

在services文件夹下面创建接口模拟服务user.js

import Mock from "mockjs2";

//获取登录
Mock.mock(/\/api\/user\/login/, "get", {
  status: 200,
  message: "success",
  data: {
    id: "@string(10)", // 随机字符串id
    name: "@cname()" // 中文名称
  }
});

//获取用户列表数据
Mock.mock(/\/api\/user\/userList/, "get", {
  status: 200,
  message: "success",
  "data|5-10": [
    // data|n-m 随机生成 多少个
    {
      "id|+1": 1, // 模拟自增+1
      id: "@increment(1)", // 自增的数字
      name: "@cname()", // 中文名称
      introduce: "@cword(10,20)", // 中文字
      img: "@dataImage(64x64)" // 图片
    }
  ]
});

在main.js中引入mock

import './mock'

3.使用测试

创建测试页面测试一下

<template>
  <div class="MockTest">
    <button @click="this.getUserInfo">获取用户信息</button>
    <button @click="this.getUserList">获取用户列表数据</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  components: {},
  data: function() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    //获取用户信息
    getUserInfo() {
      axios.get("/api/user/login").then(res => {
        console.log(res);
      });
    },
    //获取用户列表数据
    getUserList() {
      axios.get("/api/user/userList").then(res => {
        console.log(res);
      });
    }
  }
};
</script>

点击获取用户信息,结果如下
在这里插入图片描述

点击获取用户列表数据,结果如下
在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值