vue 自定义mock数据

方法一：在vue.config.js中进行配置本地数据服务（不常用）

注意：此方法在浏览器network中可查看接口信息

1. 在vue.config.js中配置devServer对象

每次配置完需要重启本地服务才生效

module.exports = {
  devServer: {
    before(app) {
        app.get('/api/get/detail', (req,res) => {
            setTimeout(() => {
                const result = {
                    code: 200,
                    data: {
                        msg: 'vue config配置本地数据服务',
                    }
                }
                res.json(result)
            }, 500)
        })
    },
    proxy: 'http://localhost:3000'
  },
}

2. 在组件中通过axios封装的get方法调用这个接口

不涉及跨域

 async requestGet() {
      const id = 1
      const result = await get('/api/get/detail', id)
      this.detail = result.data.msg
    },

方法二：使用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: 'wwjwwjwwjjwwj',
        },
      }
    }
  },
  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. 安装依赖：cnpm 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)

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

module.exports = {
  devServer: {
    proxy: 'http://localhost:3000'
  },
}

6.在组件中通过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
    },

6.mockjs启用和关闭原理

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