前端mock数据初学

前端mock数据的使用

一. 使用easy-mock

1. 此方法最为简便,下图为easy mock的截图
   
2. 例如在@vue/cli项目中,可以在vue.config.js中配置

    open: false,
    host: '0.0.0.0', // 允许外部ip访问
    port: 8022, // 端口
    https: false, // 启用https
    overlay: {
      warnings: false,
      errors: true
    }, // 错误、警告在页面弹出
    proxy: {
      '/api': {
        target: "https://www.easy-mock.com/mock/5d7e597f7632193bdf3fd0a1/example",//对应easy-mock中的BaseURL
        changeOrigin: true, // 允许websockets跨域
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    } // 代理转发配置，用于调试环境
  }

3. 注意:设置反向代理需配置不同环境下的baseURL 例如:’/api’设置为开发环境的 设置axios在不同环境下不同的baseurl

二.使用mock.js

1. npm i mockjs -D 安装mockjs依赖
2. 创建mock文件夹 index.js中配置mock接口规则

import Mock from 'mockjs';

const getTree =   require('./data.json')

Mock.mock("/strategy/tree", getTree)

3. main.js中引入
   if (process.env.NODE_ENV !== ‘production’) require(’@/mock’)
4. 缺点: 在浏览器中无法看到网络请求,需加入其它配置才可以

三.使用hm-middleware

1. vue.config.js中配置

 devServer: {
   after: function (app, server) {
     // 如果仅仅使用 http mock，这样写就可以了
     app.use(middleware({
       mockRules: {
         "/": ".data",
         "/ws/app1": {
           type: "websocket",
           dir: ".data/app1"
         }
       }
     }));
   }
 },

2. 根路径创建.data文件夹,请求接口对应相应的请求文件夹 例如:'strategy/tree’则对应.data文件夹下的strategy文件夹,tree.json文件