Vue项目自定义mock数据

唐饰
218 阅读3分钟
  • 作为一个前端开发，在我刚入门做个人练习项目时，都是直接拿取现有的后端接口进行调用，但是在平时公司项目中，大多数都是前后端同时进行开发。这就意味着，在我们写代码时，没有写好的后端接口供我们调用。所以我们可以利用mock自定义后端数据，模拟后端接口，来进行开发调用。

使用mockjs模拟数据

注：这种方法在浏览器的network中无法查看接口信息，每次修改mock对象不需要重启服务，使用mockjs前需要将axios配置的axios.defaults.baseURL 注释掉

1. 安装依赖：cnpm install mockjs -D

2. 新建src/mock/index.js，统一出口

import Mock from 'mockjs'
import user from './user'

/**
 *  延时响应
 */
Mock.setup({
  timeout: '100-1000',
})

/**
 *  如果是get请求，且传参，需要注意，url必须经过正则处理，否则报错404
 */

// 用户模块
Mock.mock('/api/user/login', 'post', user.login) // 登录
Mock.mock('/api/user/info', 'get', user.getInfo) // 获取用户信息
Mock.mock('/api/user/logout', 'post', user.logout) // 退出

3. 新建src/mock/user.js，定义对应模块的返回数据

export default {
  login: data => {
    if (data) {
      return {
        code: 0,
        data: {
          token: 'dydydydydydydydy',
        },
      }
    }
  },
  getInfo: token => {
    if (token) {
      return {
        code: 0,
        data: {
          name: '笛语',
          avatar: '#',
        },
      }
    }
  },
  logout: token => {
    if (token) {
      return {
        code: 0,
        data: {
          message: '退出成功',
        },
      }
    }
  },
}

4. 在main.js中引入 src/mock/index.js

通过开发环境变量文件.env.development中的 VUE_APP_MOCK_ENABLE变量来来控制是使用mockjs数据，还是使用服务器接口

// 是否使用mockjs
// 通过开发环境变量文件.env.development中的 VUE_APP_MOCK_ENABLE变量来来控制
if (process.env.VUE_APP_MOCK_ENABLE === 'ON') {
  require('@/mock/index.js')
}

5. 在.env.development文件中配置变量，控制mockjs开关

# 开发环境，运行调用的环境变量
# 当前文件配置的环境变量，会在运行 npm run dev 时调用
# 除非你明确知道此文件修改的含义，否则请勿修改

# axios 服务器请求地址
VUE_APP_BASEURL = 'http://localhost:3000/'

# 是否启用mock数据  ON：开启|OFF：关闭
VUE_APP_MOCK_ENABLE = ON
# VUE_APP_MOCK_ENABLE = OFF

6. 使用nodejs的express框架模拟跨域

  1. 安装依赖：npm install express --save
  2. 新建 src/serve/api.js，引入express模块创建服务，并监听3000端口
const express = require('express')
const app = express()
app.get('/api/get/data', (req, res) => {
    const result = {
      msg: 'express 启动后端服务',
    }
    res.json(result)
})
app.post('/api/post/data', (req, res) => {
  const result = {
    msg: 'express 启动后端服务',
  }
  res.json(result)
})

app.listen(3000)
  1. 启动这个跨域服务，运行命令：node ./src/serve/api.js
  2. 在vue.config.js中配置proxy:'http://localhost:3000'，所有接口如果可以匹配到则默认访问8080本地服务端口，如果匹配不到则会自动访问3000跨域端口，此操作在浏览器上不可见
module.exports = {
  devServer: {
    proxy: 'http://localhost:3000'
  },
}

7. 在组件中通过async、await的方式获取数据并传递给本地数据集

async mockjsGet() {
      const id = { id: 1 }
      const result = await get('/api/get/data',id)
      this.msg = result.msg
    },
    async mockjsPost() {
      const data = { a: 1 }
      const result = await post('/api/post/data', data)
      this.detail = result.msg
    },

8. mockjs启用和关闭原理

当 mockjs接口和跨域请求接口相同的时候，mockjs接口会覆盖跨域请求接口，因为匹配不到本地接口的时候就会自动访问跨域接口。所以我们可以通过控制是否使用mockjs来决定是使用mock数据还是后台接口。我们通过配置 .env.development 开发环境变量文件中VUE_APP_MOCK_ENABLE变量的方式来控制是否在main.js中引入mockjs文件

avatar
文章
阅读
粉丝