vue之mock模拟后台接口

vue之mock模拟后台接口

1. 安装依赖
   npm install mockjs

2.src下创建目录 mock/mock.js,在里面模拟两个接口，代码及注释如下：

import Mock from 'mockjs'

Mock.mock("http://xxxxx:8081/user",{
    'name': '@name', //随机生成姓名
    'email': '@email', //随机生成邮箱
    'age|1-10': '1', //随机生成年龄 //1为字符串表样式，生成1-10个1
})

Mock.mock("http://xxxxxx:8081/menu",{
    'id': '@increment', //id自增
    'name': 'menu', //名称为menu
    'order|1-10': 2, //随机生成排序号 // 2为数字表样式，生成1-10数字
}) 

3. 页面中添加两个按钮，触发自己模拟的两个接口进行访问，代码及注释如下

<template>
    <div id="app-6">
      <el-button type="primary" v-on:click="getUser()" round>获取用户信息</el-button>
      <el-button type="primary" @click="getMenu()" round>获取菜单信息</el-button>
    </div>
</template>

<script>
import axios from 'axios';
import mock from '@/mock/mock.js'

export default {  
  metaInfo: {
      title: 'This is the test',  
    },
  data() {
    return {
    };
  },
  methods: {
     getUser(){
      axios.get('http://xxxxxxx:8081/user').then(res => { alert(JSON.stringify(res.data)),
      console.log(res.data)})
    },
     getMenu(){
      axios.get('http://xxxxxx:8081/menu').then(res => { alert(res.data),
      console.log(res.data)})
    },
  },
};
</script>

4. JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串