vue中使用mockjs批量模拟接口

最新推荐文章于 2023-08-14 18:00:00 发布

我五岁啦!

最新推荐文章于 2023-08-14 18:00:00 发布

阅读量371

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_45466389/article/details/117560799

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何使用mockjs在Node.js项目中创建mock服务，通过mockMsg.js提供预定义的响应消息，mock/index.js模块化管理并动态替换src/service下的真实API。详细展示了如何模拟`getUserInfo`和`queryUser`接口，便于单元测试和本地开发环境中的快速响应。

摘要由CSDN通过智能技术生成

1. npm install -D mockjs

2. 在src文件下建文件夹，mock

3. mockMsg.js

const msgObj = {
  '100': 'ok',
  '101': 'Parameter error',
  '104': ''
}
export default msgObj

4. mock/index.js

import mockMsg from './mockMsg.js'
const Mock = require('mockjs')

const requireServices = require.context('./service', false, /[a-zA-Z]\w+\.js/)
let mockServices = {}
requireServices.keys().forEach(fileName => {
  const serviceConfig = requireServices(fileName)
  const serviceName = fileName
    .split('/')
    .pop()
    .replace(/\.\w+$/, '')
  mockServices[serviceName] = serviceConfig.default || serviceConfig
})

export default {
  install() {
    Object.keys(mockServices).forEach(serviceName => {
      let mockService = mockServices[serviceName]
      Object.keys(mockService).forEach(api => {
        let url = '/' + serviceName + '/' + api
        let result = mockService[api](Mock)
        Mock.mock(url, result.type || 'get', function() {
          return {
            code: result.code,
            msg: mockMsg[result.code],
            data: result.data
          }
        })
      })
    })
  }
}

5. mock/service/user.js

const userInfoDefault = [
  { name: 'fff', account: 'f333' },
  { name: 'ggg', account: 'g111' }
]
const userInfo = localStorage.userInfo || userInfoDefault
export default {
  getUserInfo() {
    return {
      code: '100',
      data: userInfo
    }
  },
  queryUser(param) {
    const certainUser =
      param &&
      userInfo.find((user) => {
        return Object.keys(user).some((key) => {
          return user[key].includes(param)
        })
      })
    return {
      type: 'post',
      code: param ? '100' : '101',
      data: certainUser || []
    }
  }
}