mock数据

雨点打透心脏的1/2处 2022-12-06 01:23 221阅读 0赞

## 前端mock数据 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ_size_16_color_FFFFFF_t_70_pic_center]

## 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 ##

## 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();

## main.js 引入 axios ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/01f54312ff37480c93cbb32e96bd4b34.png