0.7、VUE-VUE 结合 axios 发起网络请求

小鱼儿 2023-01-23 05:50 210阅读 0赞

### 文章目录 ###

*   *   *  前后端分离
         *  VUE 发起网络请求
         *  最佳实践
         *   *  安装 axios
             *  封装本地 网络请求api
             *  在 main.js 引入 axios
             *  配置代理
             *   *  跨域不生效

### 前后端分离 ###

Vue作为前端项目，可以独立部署，也可以通过整合直接放入到后端项目中。

### VUE 发起网络请求 ###

借助 axios ，我们可以发起网络请求，这是一个不可避免的场景

### 最佳实践 ###

#### 安装 axios ####

npm i axios -S

#### 封装本地 网络请求api ####

> 可以参考 https://github.com/lenve/vhr/blob/master/vuehr/src/utils/api.js

import axios from 'axios'
    import {Message} from 'element-ui';
    import router from '../router'
    import {mymessage} from '@/utils/mymessage';
    
    axios.interceptors.response.use(success => {
        if (success.status && success.status == 200 && success.data.status == 500) {
            Message.error({message: success.data.msg})
            return;
        }
        if (success.data.msg) {
            Message.success({message: success.data.msg})
        }
        return success.data;
    }, error => {
        if (error.response.status == 504 ) {
            Message.error({message: '服务器内部错误'})
        } else if(error.response.status == 404){
    	Message.error({message: '路径不存在'})
    }else if (error.response.status == 403) {
            Message.error({message: '权限不足，请联系管理员'})
        } else if (error.response.status == 401) {
            mymessage.error({message: error.response.data.msg ? error.response.data.msg : '尚未登录，请登录'})
            router.replace('/');
        } else {
            if (error.response.data.msg) {
                Message.error({message: error.response.data.msg})
            } else {
                Message.error({message: '未知错误!'})
            }
        }
        return;
    })
    //可以设置基础访问地址
    //let base = 'http://localhost:8080/';
    let base = '';
    
    export const postKeyValueRequest = (url, params) => {
        return axios({
            method: 'post',
            url: `${base}${url}`,
            data: params,
            transformRequest: [function (data) {
                let ret = '';
                for (let i in data) {
                    ret += encodeURIComponent(i) + '=' + encodeURIComponent(data[i]) + '&'
                }
                return ret;
            }],
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        });
    }
    export const postRequest = (url, params) => {
        return axios({
            method: 'post',
            url: `${base}${url}`,
            data: params
        })
    }
    export const putRequest = (url, params) => {
        return axios({
            method: 'put',
            url: `${base}${url}`,
            data: params
        })
    }
    export const getRequest = (url, params) => {
        return axios({
            method: 'get',
            url: `${base}${url}`,
            params: params
        })
    }
    export const deleteRequest = (url, params) => {
        return axios({
            method: 'delete',
            url: `${base}${url}`,
            params: params
        })
    }

#### 在 main.js 引入 axios ####

> 以 property 的形式引入

import {getRequest} from './utils/api'
    import {postRequest} from './utils/api'
    import {deleteRequest} from './utils/api'
    import {putRequest} from './utils/api'
    Vue.prototype.getRequest = getRequest;
    Vue.prototype.postRequest = postRequest;
    Vue.prototype.deleteRequest = deleteRequest;
    Vue.prototype.putRequest = putRequest;

#### 配置代理 ####

> 使用 vue init webpack \[项目名称\] 命令行方式初始化的 Vue 项目会有 config/index.js 文件

需要注意的是，Vue 是通过代理模式来进行网络请求的，这里不可避免的涉及到跨域的问题，需要后端支持跨域请求。  
此外，Vue的代理模式访问在浏览器中是看不到 url 的变化的。  
比如 Vue 的启动端口为 ip1:8080  
后端服务端口为 ip2:8081，那么访问后端时，Vue代码层面依旧是访问ip1:8080，其会自动把影响配置映射到ip2:端口上

*  修改 config/index.js 中proxyTable 内容如下  
    Vue 中 /blog/开头的请求会被映射到 http://localhost:8081/blog/  
    注意确保 Vue 请求的路径是 Vue 的ip和端口  
    即  
    Vue 代码请求  
    http://localhost:8080/blog/aaa  
    后端会根据 路径中 blog 将请求映射到  
    http://localhost:8081/blog/aaa

proxyTable: {
           '/blog': {
                  target: 'http://localhost:8081/',  //这里后台的地址模拟的;应该填写你们真实的后台接口
                  changOrigin: true,  //允许跨域
                  pathRewrite: {
                    /* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/blog/aaa 时
                      实际上访问的地址是：http://localhost:8081/blog/aaa,因为重写了 /blog
                     */
                    '^/blog': '/blog'
                  }
                }
        },

##### 跨域不生效 #####

尝试运行 npm run dev

后端也需要配置

import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    @Configuration
    public class BeanConfig { 
    
        @Bean
        public WebMvcConfigurer crosConfigurer(){ 
            return new WebMvcConfigurer () { 
                @Override
                public void addCorsMappings(CorsRegistry registry) { 
                    registry.addMapping("/")
                            .allowedOrigins("*")
                            .allowedMethods("GET", "POST", "DELETE", "PUT", "OPTIONS")
                            .allowCredentials(true).maxAge(3600);
    
                }
            };
        }
    }

##### 发起网络请求的Vue demo
    ```xml
    <template>
    
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitClick">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </template>
    
    <script>
      export default {
          data() {
            return {
              form: {
                username: '必填',
                password:''
              }
            }
          },
          methods: {
            submitClick() {
              var _this = this;
              this.loading = true;
              this.postRequest('blog/login', {
                username: this.form.username,
                password: this.form.password
              }).then(resp => {
                _this.loading = false;
                console.log('resp='+resp);
                if (resp && resp.code == 0) {
                  var data = resp.data;
                  //_this.$store.commit('/blog/login', data.obj);
                  var path = _this.$route.query.redirect;
                  // _this.$router.replace({
                  //   path: path == '/' || path == undifined ? '/home' : path
                  // });
    
                  let routeUrl = this.$router.resolve({
                      path: "/home",
                      query: {id:96}
                    });
                    window.open(routeUrl.href, '_blank');
                }
    
              });
            }
          }
        }
    </script>
    
    <style>
    
    </style>