mock的调试与应用

现在公司很多项目都是 实行的前后端分离的开发模式 而这个导致的往往是前后端并行开发

如果前端已经开发完了 后端还没有准备好接口 我们这个时候就没有测试办法了么 答案是 no

mock.js 是一个不错的选择 生成随机数据，拦截 Ajax 请求 这是mock.js官方 的描述

1.在项目中安装mockjs
npm i mockjs -D

2.在src文件夹 新建一个 mock文件夹 创建一个文件mock/index.js

import Mock from 'mockjs'

Mock.mock('/user',/get|post/i,{
    list:[
        {id:1,name:'jack',age:18},
        {id:2,name:'rose',age:20},
    ]
})

3.main.js中导入mock/index.js文件

import Vue from 'vue'
import App from './App.vue'
+ import './mock'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

4.在App.vue中测试模拟数据

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import axios from 'axios'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  async created(){
    const res = await axios.get('/user')
    console.log(res);
  }
}
</script>

<style>
</style>

mock提高 详情查看mockjs.com/

import Mock from 'mockjs'

//数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
Mock.mock('/user',/get|post/i,{
    'list|1-10':[
        {
            'id|+1':1,
            'name':/\w{2,4}/,
            'age|1-100':1
        }
    ]
})