一、Mock使用背景
在前后端分析的开发模式中,需要前后端同时进入开发。前端在开发静态页面时,需要一些数据来模拟页面交互过程等,但是在后端完成接口开发之前,是没有接口提供给前端使用的。此时,就需要前端模拟一些数据,以供界面使用。但是在大型一点的项目中,自己模拟静态数据会比较麻烦,因此,需要借助一种简单快速模拟数据的方式来开发。
二、Mock简介
- 拦截ajax请求,生成伪数据
- 应用场景:在工作中,后端已经出接口文档,还没有实现数据
- 由前端依照接口文档模拟伪数据,实现前端开发功能
三、Mock安装
npm install mockjs --save-dev
npm install axios -S
四、Mock使用步骤
- 在src目录下创建mock文件夹,mock文件夹下的内容如下图所示
- api文件夹存放mock接口时对应的方法文件
- 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>