vue2 + Mock.js 操作指南

一、Mock使用背景

        在前后端分析的开发模式中，需要前后端同时进入开发。前端在开发静态页面时，需要一些数据来模拟页面交互过程等，但是在后端完成接口开发之前，是没有接口提供给前端使用的。此时，就需要前端模拟一些数据，以供界面使用。但是在大型一点的项目中，自己模拟静态数据会比较麻烦，因此，需要借助一种简单快速模拟数据的方式来开发。

二、Mock简介

• 拦截ajax请求，生成伪数据
• 应用场景:在工作中,后端已经出接口文档,还没有实现数据
• 由前端依照接口文档模拟伪数据,实现前端开发功能

三、Mock安装

npm install mockjs --save-dev
npm install axios -S

四、Mock使用步骤

1. 在src目录下创建mock文件夹，mock文件夹下的内容如下图所示
   1. api文件夹存放mock接口时对应的方法文件
   2. index.js存放Mock.js

     2. /src/mock/index.js

import Mock from 'mockjs'
import { getUserInfoApi } from "./api/userApi";

Mock.mock("/user/userInfo", 'get', getUserInfoApi)

     3. /src/mock/api/userApi.js

export function getUserInfoApi() {
    const json = {
        id: '@id()', // 得到随机id
        username: '@cname()', // 随机生成中文名字
        email: '@email()', // email
        ip: '@ip()', // ip地址
        description: '@cparagraph', // 描述
        date: '@date()' // 随机生成日期
    }
    return {
        result: json,
        code: 200,
        message: 'success'
    }
}

      4. 在main.js引入

import './mock/index.js'

      5. 组件界面发起请求

<template>
  <div>
    <button @click="getUserInfo">get user info</button>
    <button @click="login">login</button>
  </div>
</template>
<script>
import mock from '../../mock' // 方式1
import axios from axios 
export default {
  name: 'Mocker',
  data() {
    return {
      userInfo: {}
    }
  },
  methods: {
    getUserInfo() {
      axios.get('/user/userinfo')
      .then(res =>{
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
    },
    login() {
      axios.post("/login").then(res => {
        console.log(res.data);
        if (res.data) {
 
        }
      })
    }
  }
}
</script>

五、Mock使用手册参考

1. mockjs——mockjs定义、mockjs安装、mockjs使用、mockjs方法、mockjs语法、代码示例_大脸胖柴的博客-CSDN博客
2. Mock.js