使用vue搭建应用五引入Mock.js

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

为了模拟后台接口提供页面所需的数据，引入Mock.js

Mock.js是一个模拟数据生成器，可帮助前端开发和原型与后端进度分开

特性：

前后端分离

增加单元测试的真实性

数据类型丰富

方便扩展

1.安装

yarn add mockjs

2.简单使用

在src下，新建目录mock，添加index.js

模拟接口 http://localhost:8081/test

import Mock from 'mockjs'Mock.mock('http://localhost:8081/test', {
'list|1-5': [{
'id|+1': 1,
'name': '@name',
'email': '@email',
'age|20-60': 5,
'registData': '@date'
}]});

修改Home.vue，通过import mock from "@/mock/index.js"; 引入mock模块

<template>
<div class="page">
<h2>Home Page</h2>
<el-button type="primary" @click="test()">测试</el-button>
</div>
</template><script>
import axios from "axios";
import mock from "@/mock/index.js";
export default {
name: "Home",
methods: {
test() {
axios
.get("http://localhost:8081/test")
.then(res => {
console.log(res.data);
})
.catch(function(error) {
console.log(error);
});
}
}
};
</script>