zoukankan      html  css  js  c++  java
  • vue使用全局变量来定义axios请求地址

    在使用vue时,免不了要使用axios来经常请求数据、调用开发好的webapi,但是webapi在调试模式和部署模式下两者的地址和端口都是不一样的,这就需要我们在vue中定义一个全局的地址了,方便打包和调试用。

    1、正常的使用方式

    var url='http://192.168.3.11:5000/api/user/login'

           this.axiosPost(url,params)
              .then(res=>{
                  if (res===401){
                      this.$message.error('哦,对不起,你所输入的用户名或密码有误!');
                  }else{
                      localStorage.setItem("token",res);
                      this.$router.push('/list');
                  }
              })

    这种是把请求地址写成固定的了,也是最不方便的一种方式了,如果请求的接口地址变了,那么需要替换掉所有的url,只适合单页面来做个例子,不适合在实际中使用。

    2、相对地址使用

    var url='/api/user/login'

    这种相对地址使用时,在使用vs code调试时,接口前面的网址就是调试时打开的网址和端口,会发现它和webapi不能是一个端口号,自然不能使用。

    但是可以在打包时使用,然后把前端和后端部署到一个网站里。

    3、vue.prototype全局变量

    想要实现改一个参数就改变所有的url,就需要用到全局变量了,网上有各种各样的实现方式,不过我感觉最简单的还是通过main.js中的vue.prototype来实现最方便了,调用也方便。

    Vue.prototype.$baseUrl='http://192.168.3.11:5000'

    然后在需要使用此地址的vue页面中直接使用就可以了

              var url=this.$baseUrl+'/api/User/UserLogin';
             
              this.axiosPost(url,params)
              .then(res=>{
                  if (res===401){
                      this.$message.error('哦,对不起,你所输入的用户名或密码有误!');
                  }else{
                      localStorage.setItem("token",res);
                      this.$router.push('/list');
                  }
              })

    等需要正式打包发布的时候只需要在main.js中更改一下$baseurl的值就可以了。

  • 相关阅读:
    HDU 1069 Monkey and Banana
    HDU 1029 Ignatius and the Princess IV
    HDU 1024 Max Sum Plus Plus
    Gym100923H Por Costel and the Match
    Codeforces 682C Alyona and the Tree
    Codeforces 449B Jzzhu and Cities
    Codeforces (ccpc-wannafly camp day2) L. Por Costel and the Semipalindromes
    Codeforces 598D (ccpc-wannafly camp day1) Igor In the Museum
    Codeforces 1167c(ccpc wannafly camp day1) News Distribution 并查集模板
    快乐数问题
  • 原文地址:https://www.cnblogs.com/wjbych/p/12892821.html
Copyright © 2011-2022 走看看