美文网首页
基于vue-cli的vue项目之axios的使用2--最基础的请

基于vue-cli的vue项目之axios的使用2--最基础的请

作者: sirai | 来源:发表于2018-05-07 15:51 被阅读16次
    1.config/index.js的配置:解决跨域  
     dev: {  
            env: require('./dev.env'),  
            port: 8008,  
            autoOpenBrowser: false,  
            assetsSubDirectory: 'static',  
            assetsPublicPath: '/',  
            proxyTable: {  
                '/ajaxurl': {  
                    target: 'https://www.aaaaaaa.com/',  
                    changeOrigin: true,  
                    pathRewrite: {  
                        '^/ajaxurl': '/'  
                    }  
                }  
      
            }  
          
        }  
          
    2.main.js的配置:使用axios:注意第二十五行,将其添加到原型链中,而不是使用use方法  
    import Vue from 'vue'  
    import App from './App'  
    import axios from 'axios'  
    Vue.prototype.$http=axios;  
    new Vue({  
        el: '#app',  
        render: h => h(App)  
    })  
      
    3.app.vue:调用ajax:第四十五行,axios支持promise方法,这样写方便点  
    <template>  
        <div id="app">  
            huoqu  
            <button @click="myajax">获取首页信息</button>  
        </div>  
    </template>  
    <script>  
        export default {  
            name: 'app',  
            components: {},  
            data: function() {},  
            methods: {  
                myajax: function() {  
                    this.$http.get("/ajaxurl/welfare/gpa/index/index").then(response => {  
                        console.log("获取信息成功")  
                        console.log(response);  
                    }, response => {  
                        console.log("获取信息失败")  
                        console.log(response);  
                    })  
                }  
            }  
        }  
    </script>  
    <style>  
    </style>  
    

    效果


    image.png

    相关文章

      网友评论

          本文标题:基于vue-cli的vue项目之axios的使用2--最基础的请

          本文链接:https://www.haomeiwen.com/subject/incvrftx.html