在你的项目中使用mock

八月更文第五弹， 开始啦！ 🍦

这是我参与8月更文挑战的第5天，我们前端往往在开发中，都会遇到和后端开发处于一个并行开发或者进度比后端快的时候，这种情况下我们没有测试数据，总不能干等后台出接口吧。作为一个高效的开发，我们怎么能容忍这种情况呢，mock数据便帮我们解决了这个问题。
那么如何在项目中接入mock数据呢，我们接着往下看吧~

安装mock依赖

npm install mockjs

创建mock目录

在根目录下创建mock目录，同时建立index.js,api目录，node目录

index.js

入口文件，用来引入mock，读取mock数据目录并注册生成mock接口

/* eslint-disable */
const Mock = require('mockjs');
import store from '@/store'

const mockPaths = []

// 动态读取modules下面的文件，添加到路由中
const files = require.context('./api', true, /\.ts$/)
files.keys().forEach(key => {
  const file = files(key).default
  mockPaths.push(...file)
})

// 存储mock地址
store.dispatch('common/setMockPath', mockPaths)

// 注册mock接口
mockPaths.map((item: any) => {
  Mock.mock(item.url, item.type, require(`./json${item.path}`));
})

store中建立存储mock接口

  namespaced: true,
  state: {
    mockPath: []
  },

  mutations: {
    MOCKPATH(state: any, val: any) {
      state.mockPath = val
    }
  },

  actions: {
    setMockPath({ commit }: any, fn: any) {
      commit('MOCKPATH', fn)
    }
  }
}

api目录

存放api的目录级，进行层级拆分，可与真实api目录保持一致
user.js

/* eslint-disable */
export default [
  { name: 'userInfo', type: 'get', url: '/user/userInfo', path: '/user/userInfo' }
]

node目录级

存放mock的json数据
user->userInfo.json

{
  "result": "success",
  "data": {
    "userSn": "01",
    "username": "寇寇菌",
    "age": 25,
    "imgUrl": ""
  },
  "msg": ""
}

vue使用

在vue项目中使用mock数据

引入mock配置文件

在main.js进行文件引入

// 引入mock数据，关闭则注释该行
require('./mock')

axios 中进行mock与非mock的请求接口判断

具体的使用场景中我们会遇到某些接口要使用mock，有些不使用的情况，这里就要对mock的接口进行判断。

/*
 * 请求拦截器
 */
axios.interceptors.request.use(
  (config: any) => {
    // 更改mock数据url
    const mockPath = store.state.common.mockPath
    mockPath.map((item: any) => {
      if (item.url == config.url) {
        config.baseURL = ''
      }
    })
})

在页面中测试

在page中使用当前配置mock的url进行访问，就可以得到mock的数据了

• handleClick 为独立axios测试
• handleClickCommon 为全局axios测试

<template>
  <div>
    <van-button type="primary" @click="_handleClick">mock请求</van-button>
    <hr />
    <div>
      {{ resMsg }}
    </div>
    <hr />
    <van-button type="primary" @click="_handleClickCommon">mock请求全局axios</van-button>
    <hr />
    <div>
      {{ resMsgCommon }}
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      resMsg: '',
      resMsgCommon: ''
    }
  },
  methods: {
    _handleClick() {
      axios
        .get('/user/userInfo')
        .then(res => {
          console.log(res)
          this.resMsg = res.data
        })
        .catch(err => {
          console.error(err)
        })
    },
    _handleClickCommon() {
      this.$Request
        .requestGet({}, this.$api.app.userInfo)
        .then(res => {
          console.log(res)
          this.resMsgCommon = res
        })
        .catch(err => {
          console.error(err)
        })
    }
  }
}
</script>

总结

本文到此结束，希望对你有帮助 😉