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

文章目录

• • • 前后端分离
    • 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

发起网络请求的Vue demo

<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: {
          form.usernam: ''
        }
      }
    },
    methods: {
      submitClick() {
        console.log('submit!');
        var _this = this;
        this.loading = true;
        this.postRequest('blog/login', {
          username: this.form.username
        }).then(resp => {
          _this.loading = false;
          if (resp && resp.status == 200) {
            var data = resp.data;
            _this.$store.commit('/blog/login', data.obj);
            var path = _this.$route.query.redirect;
            _this.$router.replace({
              path: path == '/' || path == undifined ? '/blog/home' : path
            });
          }

        });
      }
    }
  }
</script>

<style>

</style>