全国职业院校技能大赛-大数据应用赛项-vue网络请求axios及相关配置（vue.config.js）

网络请求axios，该写法最为通用

 
import axios from 'axios'
 
axios({
    url:'/manager/getData',
    method:'get', //post
    header:{
        content-type:'application/json'
    },
    params:{
 
    }
}).then(({data}) =>{
    // 请求结果
    console.log(data)
})

post请求只需要将method改成'post',params改成data即可

vue相关配置（vue.config.js）

跨域问题配置

 
module.exports = {
    // 配置 webpack-dev-server 行为。
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
       // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
        proxy:{
            '/manager':{
                target: `http://192.168.20.1:8080/`,
                changeOrigin:true,
                secure:false
                //ws:true,
                // pathRewrite:{
                        // '^/api':'' // 请求数据路径别名,这里是注意将static/mock放入public文件夹
                // }
            } 
        },
            before: app => {}
        },
}
 

 
这个反向代理将以/manager开头的所有请求转发到http://192.168.20.1:8080/，并将请求地址修改为以/manager开头的地址。
例如，如果在项目中发送一个请求到/manager/api/data， 那么WebpackDevServer将会转发该请求到http://192.168.20.1:8080/api/data