mock数据

最新推荐文章于 2024-05-09 09:49:32 发布

原创最新推荐文章于 2024-05-09 09:49:32 发布 · 231 阅读

CC 4.0 BY-SA版权

本文详细介绍了如何在前端项目中使用mock数据，包括通过mockServer.js实现对不同HTTP请求的响应模拟，以及在vue.config.js中配置Webpack和DevServer以支持mock数据请求。同时，展示了axios.js中对axios请求库的封装，以及bus.js中事件总线的创建。

前端mock数据

在这里插入图片描述

mockServer.js

module.exports = function (req, res, next) {
    const method = (req.method || 'GET').toLowerCase();
    const url = req.url.split('?')[0];
    if (req.headers['x-requested-with'] === 'XMLHttpRequest') {
        const base = `../src/mock/${method}${url}/index.js`;
        delete require.cache[require.resolve(base)];
        const json = require(base)();
        res.send(json);
    }
    next();
};

vue.config.js

let path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
};
let IS_PRODUCTION = process.env.NODE_ENV === 'production';
module.exports = {
    publicPath: '/',
    lintOnSave: false,
    filenameHashing: false,
    pages: {
        index: {
            // page 的入口
            entry: 'src/main.js',
            // 模板来源
            template: 'public/index.html',
            // 在 dist/index.html 的输出
            filename: 'index.html',
            title: '水浦蓝物联网云平台',
            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        }
    },
    productionSourceMap: !IS_PRODUCTION,
    configureWebpack: (config) => {
      if (IS_PRODUCTION) {
        //为生产环境进行配置 如：去除console.log ,debugger
        config.optimization.minimizer.map((arg) => {
          const option = arg.options.terserOptions.compress;
          option.drop_console = true; // 打开开关
          return arg;
        });
      } else {
        //为开发环境进行配置
      }
    },
    chainWebpack: config => {
      //设置别名  路径优化，但是若要引用static文件夹下文件，则要用一般设置
      config.resolve.alias
        .set("@", resolve("src"))
        .set("@assets", resolve("src/assets"))
        .set("@components", resolve("src/components"))
        .set("@store", resolve("src/store"))
        .set("@pages", resolve("src/pages"))
        .set("@utils", resolve("src/utils"))
    },
    devServer: {
        port: 8080,
        // proxy: {
        //   '/api-admin': {
        //     target: 'http://192.168.3.139:9400', // 代理接口
        //     changeOrigin: true,
        //     pathRewrite:{
        //       '^/api': ''
        //     }
        //     // pathRewrite: {
        //     //     '^/api': '/mock' // 代理的路径
        //     // }
        //   }
        // },
        before: function (app) {
          app.use(require('./server/mockServer'));
        },
        overlay: {
          warning: false,
          error: true
        }
    }
}

axios.js

import axios from 'axios';
import qs from 'qs';
import bus from './bus';

// 默认配置
let instance = axios.create({
  timeout: 30000,
  headers: {
    // 'Content-Type': 'application/x-www-form-urlencoded',
    'Content-Type': 'application/json',
    'x-requested-with': 'XMLHttpRequest'
  }
});

// 定义拦截器
instance.interceptors.request.use(config => {
  const token = window.localStorage.getItem('token');
  if (token) {
    config.headers.common.Authorization = token;
  }

  return config;
}, error => Promise.reject(error));
instance.interceptors.response.use(response => {
  const code = response.data && +response.data.code;
  if (code) {
    if (code === 401) {
      return bus.$emit('goto', '/login');
    }

    if (code === 409) {
      message({
        message: '你的的账号已经在其他地方登陆或退出登录，请重新登录！',
        type: 'warning'
      });
      return bus.$emit('goto', '/login');
    }

    if (code === 403) {
      return message({
        message: '你没有权限',
        type: 'warning'
      });
    }
  }

  return response;
}, error => {
  return Promise.reject(error);
});

// 封装请求对象
let baseUrl = process.env.VUE_APP_URL;
// console.log(baseUrl);
let request = options => new Promise((resolve, reject) => {
  const method = (options.type || 'GET').toLowerCase();
  let config = {
    method: options.type,
    url: baseUrl + options.url
  };
  if (method === 'post' && options.data) {
    config.data = options.data;
  }
  else {
    if (options.data && !options.params) {
      config.params = options.data;
      delete options.data;
    }
  }
  instance(config).then(data => {
    const result = data.data;
    if (+result.code === 200) {
      return resolve(result);
    }

    return reject(result);
  }).catch(error => {
    reject(error);
  });
});

export default {
  install(Vue) {
    Vue.prototype.$axios = request;
  }
};

bus.js

import Vue from 'vue';
export default new Vue();