Vue项目：创建一个Vue项目写前端

在前端使用axios做AJAX请求：

1.安装axios：在小黑窗中敲 `npm install axios --save`

2.导入axios，并在页面中使用：

1.第一种方法（也是最常见的一种方法：在所有组件中都可以使用axios做网络请求）：

1. 在main.js中import axios from 'axios'
2. 在main.js中将axios挂载到Vue原型 Vue.prototype.$axios = axios;

所有组件继承Vue，因此Vue的原型属性中绑定的值，所有组件都能使用。

3.在页面中使用axios进行网络请求this.$axios.get/post()

2.第二种方法（但是只能在当前组件内使用axios做网络请求）：

1.在vue文件(也就是组件文件)中import axios from 'axios'
2.页面中使用axios做网络请求axios.get/post()

EGG框架：创建一个EGG项目写后端

在后端接收前端请求的数据包，并返回一个数据

1.在router.js文件中注册前端请求的路由router.get("/login",controller.home.login)

2.在controller文件夹中的home.js文件中写login的后端：

async login(){
//后端给前端返回一个数据
    this.ctx.body={数据}
    }

注意：当我们运行代码以后，发现会出现跨域的问题

原理图：

解决跨域问题：

参考：juejin.cn/post/712837…

1.CORS解决跨域问题：

2.代理服务配置：

在vue.config.js文件中配置：

//代理配置,这里只是配置,不用写代理服务器的代码(配置好了它帮我们实现)
	proxy: {
		'/api': 'http://localhost:7001',
	},
	 // proxy: {
	 //      '/api': {
	 //        target: 'http://localhost:7001',
     //        secure:true,//如果代理的target是https接口,需要配置它 
	 //        pathRewrite: { '^/api': '/chongxie' },//请求时重写pathname
	 //      },
	 //    },
   }

但是在网址上，我们并不想写/api,感觉它很多于。

怎么实现这个效果？

在main.js文件中：配置公共url： axios.defaults.baseURL="网址"

建议：将上面本端服务器（网址）写成：http://localhost:8081/api

前端使用后端返回的数据：

1.用一个变量来接收返回的数据

2.再用这个变量将数据驱动到页面

Vue——网络请求、解决跨域问题