SpringBoot项目无缝集成SkyWalking：实现分布式追踪与日志透传实战

技术细节-继续配置

提示：你以为这样就完了吗,其实还有很多东西需要我们自己手写的

例如：

• element-ui的配置
• 样式重置配置
• src使用@的配置
• elinst配置
• axios异步请求的二次封转配置
• 语言国际化配置(这个看需求,我这里就不用配置了)
• vuex的配置
• mixins的配置
• 开发环境的配置

  继续: 

axios异步请求的二次封转配置

 这个是每一个项目中都必须要的:

    首先下载axios 插件

   其实在项目的src目录中新建 utils目录,然后再新建request.js

        src --> utils --> request.js 

代码: 

import Vue from 'vue'
import axios from 'axios'

// 设置超时时长
axios.defaults.timeout = '30000'

// request拦截器
axios.interceptors.request.use((config) => {
  return config
}, (error) => {
  return Promise.reject(error)
})

// responese拦截器
axios.interceptors.response.use((res) => {
  return res.data
}, (error) => {
  Vue.$message.error(error.toString())
  return Promise.reject(error)
})

/**
 * 设置请求header
 * @param {Object} headers
 */
const setHeader = (headers) => {
  for (const key in headers) {
    axios.defaults.headers[key] = headers[key]
  }
}

/**
 * POST请求
 * @param {String} url 地址
 * @param {Object} params 参数
 * @param {Object} headers headers
 */
export const request= (url, params, method,headers = {}) => {
  return new Promise((resolve, reject) => {
    setHeader(headers)
    axios({
        url,
        method,
        data: method == 'post'? params:"",
        params: method =='get'?params:"" 
     }).then((response) => {
      resolve(response.data)
    }).catch((error) => {
      reject(error)
    })
  })
}

/**
 * 文件上传
 * @param {String} url 地址
 * @param {File} file 文件
 */
export const uploadFile= (url, file) => {
  return new Promise((resolve, reject) => {
    const formData = new FormData()
    formData.append('file', file)
    formData.append('currentDate', Date.now())
    axios.post(url, formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }).then((response) => {
      resolve(response.data)
    }).catch((error) => {
      reject(error)
    })
  })
}

vuex的配置 (项目自动完成了)

这个项目已经配置完成

mixins的配置 (这个主要是放公共的方法)

在src目录中新建mixins文件夹,然后再新建index.js

src  --> mixins  ---> index.js

export default {
  data() {
    return {};
  },
 created(){
 },
  methods: {},
};

在使用mixins的时候要注意了: 他的方法 和 vue的方法 的先后使用问题

开发环境的配置 (这里的开发环境是指当前是 开发 ,  生产,  测试)

  配置如下:在项目的根目录新建三个文件

 都写相同的代码:

小结

提示：跨域我就没有写了,这个百度就有

项目搭建完成之后,希望大家自己启动然后测试一下,有问题的哈,可以在想交流,