vue httpを構成する.jsとapi.jsコードの詳細、axiosリクエストの使用(前後端分離-フロントエンドがバックエンドインタフェースアドレスをどのように調整するか)

http.js(axiosリクエストの作成、リクエストブロッカーの追加など)

import axios from 'axios'; //   axios
// import QS from 'qs'; //   qs  ，     post     ，     
// vant toast     ，        ui    。
import {Toast} from 'vant';

let mask = true;

const request = axios.create({
  // baseURL: apiConfig.baseUrl,//baseURL+    
  timeout: 15000,
});

// request.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// request.defaults.headers.post['Content-Type'] = 'application/json;chartset=uft-8';
request.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest';


//        
request.interceptors.request.use(
  config => {
    //            
    return config;
  },
  error => {
    return Promise.reject(error);
  });

//        
request.interceptors.response.use(
  response => {
    if (mask)
      Toast.clear();
    return response;
  },
  error => {
    if (mask)
      Toast.clear();
    return Promise.reject(error);
  });

/**
 *
 * @param url    url  
 * @param params         
 * @param isShowMask         。    
 * @param maskTitle          。    ：“   ...”
 * @returns {Promise}     promise  ， axios      resolve      ，     reject   
 */
function get(url, params, isShowMask = true, maskTitle = '   ...') {
  mask = isShowMask;
  return new Promise((resolve, reject) => {
    if (isShowMask) {
      Toast.loading({
        message: maskTitle,
        forbidClick: true,
        duration: 0,
      });
    }

    axios.get(url, {
      params: params
    }).then(res => {
      if (isShowMask)
        Toast.clear();
      resolve(res);
    }).catch(err => {
      if (isShowMask)
        Toast.clear();
      reject(err)
    })
  });
}


function post(url, params, isShowMask = true, maskTitle = '   ...') {
  mask = isShowMask;

  return new Promise((resolve, reject) => {
    if (isShowMask) {
      Toast.loading({
        message: maskTitle,
        forbidClick: true,
        duration: 0,
      });
    }

    // request.post(url,Qs.stringify(params))
    request.post(url, params)
      .then(res => {
        if (isShowMask)
          Toast.clear();
        resolve(res);
      })
      .catch(err => {
        if (isShowMask)
          Toast.clear();
        reject(err);
      })
  });
}

export {get, post};

バックエンドインタフェースアドレスの説明を調整

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
//vue         ,       ,      Nginx  
    proxyTable: {
      '/api': {
        target: 'http://localhost:8084',//    
        changeOrigin: true,
        pathRewrite: {
          // '^/api': 'api/'//    ，        api/             api/
          '^/api': ''
        },
        // secure: true,
      }
    },

    // webpack           
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8085, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-


    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },