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

Z时代
2024-01-10
分类：综合

vue

为了模拟后台接口提供页面所需的数据，引入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>