1.介绍

前端页面写好后，展示的都是静态数据，我们要调用后端服务来获取对应的数据丰富页面，从而可以实现数据的交互，Vue默认是不支持Ajax请求，我们需要使用第三方依赖实现Ajax请求，比较推荐使用axios

2.Axios实现

1.安装axios并引入

使用npm方式安装，在项目路径运行以下命令

npm install axios

axios就会被添加进依赖

2.引入axios

在main.js中添加以下代码

import axios from 'axios'
Vue.prototype.$http= axios

3.发送请求

我们写个Post请求，用于获取用户id的商品信息，请求路径是本地ip:端口+路径

  created() {
    // 页面加载时调用请求
    this.goods();
  },
  methods: {
	  goods(){
	      console.log("Post")
	      this.$http.post("/user",{id: 123456}).then((res)=>{
	        console.log(res);
	      }).catch(err=> {
	        console.log(err);
	      });
	    }
  }
    

在浏览器中刷新页面查看请求是否发出

并且也携带了我们请求的参数

我们也可以通过

      //发送post请求
      this.$http({method:'post',url:'/goods',data:{id:123,name:'item'}})
      //发送get请求
      this.$http({method:'get',url:'/user?id=1111'})

浏览器查看请求结果

Post请求示例

请求参数

Get请求示例

这个时候你会发现如果光设置请求路径,是远远不够的，我们的服务接口可能就不是我们项目的ip或端口，这样发送请求显然不能达到要求。

4.Axios设置请求地址

我们访问服务器获取数据无非就是通过域名+端口或者ip+端口服务后端服务，所以我们需要设置默认的请求地址服务后端服务

//设置默认的请求地址localhost代表本机ip
axios.defaults.baseURL='http://localhost:8080'
//设置默认请求post类型为application/json
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'

更改后记得重启下，可以看出虽然请求路径都是localhost都是端口已经从8081变成我们自己设置的请求路径了

响应数据也接收到了

3.优化Axios为模块化

     我们应该对Axios进行模块化，把属于请求的方法写在一个js里面以后需要对模块进行升级，比如我们在请求的接口如果出现错误数据，我们可以在js里面进行对请求返回的数据进行统一解析，并且拦截错误数据

在src目录下创建utils目录用于存放一些工具类，在里面创建模块request.js

把我们之前在main.js中写的Axios配置复制到request.js下

1.process.env介绍（懂的跳过）

然后对以上数据进行改造，其中会引入一些运行时环境变量的获取会使用process.env关键字来匹配对应环境的数据信息

process.env 是Node.js 中的一个环境

可以在命令行输入命令查看

而且process.env在Vue CLI 项目是一个重要的概念

有以下三种运行模式

• development 模式用于 vue-cli-service serve
• test 模式用于 vue-cli-service test:unit
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

我们查看package.json配置信息，运行命令，开发环境运行dev要部署服务器时运行build，他们正好对应Vue CLI中的development模式和production模式，当运行Vue CLI命令（npm run dev或npm run build）就会把该模式下的NODE_ENV载入其中了

那既然知道项目运行的是那个模式，是不是我们就可以在不同模式下运行不同的变量信息，如开发环境使用端口8080，线上（生产）环境的端口是80，这个时候你会想，我知道不同模式配置不同信息，那信息配置在那个文件呢？

你可以在你的项目根目录中放置下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

一个环境文件只包含环境变量的“键=值”对：

#设置端口号
port=9999
# 开发环境配置
ENV = 'development'

只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中

2.配置项目环境

示例：development模式

在项目根目录创建.env.development

.env.development文件内容

# 开发环境配置
ENV = 'development'

#设置端口号
port=8081

# 前端请求路径
VUE_APP_BASE_API = '/api'

#后端服务器地址不要忘记添加http或https
BASE_URL_REAR='http://127.0.0.1:8080/'

3.解决前后端不在同服务器

vue.config.js配置如下
为了解决前端和后端不太同一台服务器解决访问的问题，才需要配置vue.config.js
process.env当前运行的配置环境，用于读取对应配置文件的参数

//提示：process.env 是Node.js 中的一个环境，Vue CLI 项目中一个重要的概念
//:有以下三种运行模式
// development 模式用于 vue-cli-service serve
// test 模式用于 vue-cli-service test:unit
// production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

const port = process.env.port || 80 // 端口
// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分，具体配置参考文档
module.exports = {
  //build后的输出目录
  outputDir: 'dist',
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
  lintOnSave: false,
  configureWebpack: {
    // devtool 添加这个debugger可以看源码
    devtool: 'cheap-module-source-map'
  },
  // webpack-dev-server 相关配置
  devServer: {
    //本机地址
    host: 'localhost',
    port: port,
    open: true,
    //如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      //process.env.VUE_APP_BASE_API的参数会读取对应环境变量数据，如读取的数据是‘/api’,那么意思就是前端请求的/api路径都会被带来到，参数target的地址
      [process.env.VUE_APP_BASE_API]: {
        //代理的路径
        target: process.env.BASE_URL_REAR,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    disableHostCheck: true
  },
};

在request.js添加以下代码

import axios from 'axios'

//设置默认请求post类型为application/json
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
const service=axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: process.env.VUE_APP_BASE_API,
    //设置超时时间单位毫秒
    timeout: 10000
})

export default service

把request.js添加到main.js中

import request from "@/utils/request";
Vue.prototype.$http= request

使用方法和之前使用方式一样
运行项目：npm run dev

使用的环境是development所以使用的配置信息是.env.development

网页可以看出端口

可能请求接口也拼接了配置路径中的VUE_APP_BASE_API变量数据