一、前言

前后端分离开发模式，前端专注于视觉层、后端专注于业务层，彼此之间的交互通过 ajxa 来进行。

vue 中发起 ajax 请求的的插件，目前流行使用 axios、vue-resource。

二、借助axios

1.安装

npm install axios

官方：

2.配置

在 main.js 中，引入 axios，同时可以配置请求的前缀，绑定其到 $http 中等。

// 导入第三方ajax请求方法import axios from 'axios'// 设置全局请求前缀axios.defaults.baseURL = ';// 绑定ajax请求Vue.prototype.$http = axios

3.示例

async onSubmit() {    const {    	data: res    } = await this.$http.post('/blog/addBlog', this.addBlogVO)    if (res.code == 200) {    	this.$message.success(res.msg)    	this.$router.push("/blog")    } else {    	this.$message.error(res.msg);    }}

1.安装

npm install vue-resource

官方：

2.配置

在 main.js 中，引入 vue-resource，同时可以配置请求的前缀，绑定其到 $http 中等。

import VueResource from 'vue-resource'Vue.use(VueResource)// 如果我们通过全局配置了，请求的数据接口 根域名，则 ，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 /  ，否则 不会启用根路径做拼接；Vue.http.options.root = ';;// 全局启用 emulateJSON 选项:如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。Vue.http.options.emulateJSON = true;

3.示例

this.$http.delete("deleteBlogById/" + row.id).then(result => {    if (result.body.code === 200) {      // 删除成功      this.listAllBlog();    } else {      alert("删除失败！");    }});

本文中，介绍下目前流行的 ajax 请求插件 axios（推荐）、vue-resource（不推荐） 。