java-黑马头条 weex前端路由

路由分析

home/index.vuw

// 正常加载数据
      load : function(){
        Api.loaddata(this.params).then((d)=>{
          this.tanfer(d.data);
        }).catch((e)=>{
          console.log(e)
        })
      },

home/api.js

// 加载数据 get请求
    loaddata : function(params){
        let dir = params.loaddir
        let url = this.getLoadUrl(dir)
        return this.vue.$store.getEquipmentId().then(equipmentId=> {
            return new Promise((resolve, reject) => {
                this.vue.$request.get(url,params,{}).then((d)=>{
                    resolve(d);
                }).catch((e)=>{
                    reject(e);
                })
            })
        }).catch(e=>{
            return new Promise((resolve, reject) => {
                reject(e);
            })
        })

.....
 // 区别请求那个URL
    getLoadUrl : function(dir){
        let url = this.vue.$config.urls.get('load')
        if(dir==0)
            url = this.vue.$config.urls.get('loadnew')
        else if(dir==2)
            url = this.vue.$config.urls.get('loadmore')
        return url;
    }

common/conf.js

urls:{
        load:{url:'api/v1/article/load/',sv:'article'},
        loadmore:{url:'api/v1/article/loadmore/',sv:'article'},
        loadnew:{url:'api/v1/article/loadnew/',sv:'article'},

// 解决多访问地址的问题
        getBase : function(url){
            let sv = url.sv
            // 默认指向85服务器，并指向网关+服务名；否则走本地，不加服务名
            if(config.local[sv]){
                return "/"+sv;
            }else{
                return config.prefix.server_85+'/'+config.services[sv];
            }
        },
        get:function(name){
            let tmp = config.urls[name];
            if(tmp)
                return config.urls.getBase(tmp)+"/"+tmp.url;
            else
                return name;
        }
}

config.js 跨域路由

proxyTable: {
      '/server_85': {
        target: 'http://heima-app-java.research.itcast.cn', //源地址
        changeOrigin: true
      },'/article': {
        target: 'http://192.168.1.5:9003/', //源地址
        changeOrigin: true, //改变源
        pathRewrite: {
          '^/article': ''
        }
      },'/behavior': {
        target: 'http://192.168.1.5:9004/', //源地址
        changeOrigin: true, //改变源
        pathRewrite: {
          '^/behavior': ''
        }
      },'/user': {
        target: 'http://192.168.1.5:9005/', //源地址
        changeOrigin: true, //改变源
        pathRewrite: {
          '^/user': ''
        }
      },'/login': {
        target: 'http://192.168.1.5:9001/', //源地址
        changeOrigin: true, //改变源
        pathRewrite: {
          '^/login': ''
        }
      }

配置 proxyTable 来进行跨域
proxyTable 跨域的基本原理是:

在开发模式下,webpack 会为我们提供一个http代理服务器.
我们请求接口的时候,实际上是请求的webpack提供的这个http代理服务器.
在由这个代理服务器请求真是的数据服务器.
最后数据经由webpack代理服务器,最后转交给我们的vue程序.