vue中用mockjs模拟webapi服务

npm install mockjs --save-dev

安装完成之后，我们写个例子测试一下。

在 src 目录下新建一个 mock 目录，创建 mock.js，在里面我们模拟了两个接口，分别拦截用户和菜单的请求，并返回相应的数据。

如下图所示：

修改 Home.vue，在页面放置两个按钮，分别触发用户和菜单的处理请求，成功后弹出获取结果。

浏览器访问：http://localhost:8080/#/，分别点击两个按钮，mock 会根据请求 url 拦截对应请求并返回模拟数据。

获取用户信息

获取菜单信息

==================

mock.js文件内容如下：

<template>

  <div>

    <el-button @click="show = !show">Click Me</el-button>

 

    <div style="display: flex; margin-top: 20px; height: 100px;">

      <transition name="el-fade-in-linear">

        <div v-show="show" class="transition-box">.el-fade-in-linear</div>

      </transition>

      <transition name="el-fade-in">

        <div v-show="show" class="transition-box">.el-fade-in</div>

      </transition>

    </div>

      <el-button @click="getUser()" type="primary">获取用户信息</el-button>

       <el-button @click="getMenu()" type="primary">获取菜单信息</el-button>

  </div>

</template>

 

<script>

import axios from 'axios'

import mock from '@/mock/mock.js'

  export default {

    data: () => ({

      show: true

    }),

    methods: {

        getUser() {

            axios.get('http://localhost:8080/user')

            .then(function(res){

                alert(JSON.stringify(res.data))

            }).catch(function(res){

                alert(res)

            })        

        },

        getMenu() {

            axios.get('http://localhost:8080/menu')

            .then(function(res){

                alert(JSON.stringify(res.data))

            }).catch(function(res){

                alert(res)

            })

        }

 

    },

    created () {

        this.$message({type: 'warning',message:'你好'})

    }

  }

</script>

 

<style>

  .transition-box {

    margin-bottom: 10px;

    width: 200px;

    height: 100px;

    border-radius: 4px;

    background-color: #409EFF;

    text-align: center;

    color: #fff;

    padding: 40px 20px;

    box-sizing: border-box;

    margin-right: 20px;

  }

</style>