前端之美-VueJsWEB前端前端开发总结

前后端联调

2019-11-05  本文已影响0人  泡杯感冒灵

我们在写前端代码的时候,可能后端接口还没有写好,这个时候,就需要我们自己mock数据,也就是说,前端的数据都是我们静态模拟的。比如,我们会在config文件夹下的 index.js文件中像下边这样配置proxyTable

//下边配置的意思是,在开发环境下当我们访问/api这个路径,它会帮你把这个路径的请求,打到localhost:8080这个端口上,这个端口是前端服务器的端口
module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api':{
        target:'http://localhost:8080',
        pathRewrite:{
          '^/api':'static/mock'
        }
      }
    },
但是当后端接口写好后,我们就需要请求后台数据进行测试了。这个时候,我们就不能让它把请求转到8080端口了,而是转到后台服务器端口上
module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api':{  
        //这种情况是后端服务器在本地80端口上
        target:'http://localhost:80',
      }
    },
但是真实的前后端联调,后端服务器有可能在后端开发人员自己的电脑上,或者在内网或外网的服务器上,这个时候代理就不能写localhost这个地址了,你可以写内网的IP地址,比如192.168.11...或者写外网的域名

通过这种形式,我们就可以把前端向/api这个地址的任何的请求,代理转发给任何一台后端服务器,从而非常方便的实现前后端联调

上一篇下一篇

猜你喜欢

热点阅读