Web前端学习 第7章 Vue基础教程9 数据交互

一、概述

基于Vue的web项目显示的所有服务端数据，都是通过Ajax获取的。官方推荐使用Axios作为Ajax库，所以本节主要讲解在Vue项目中，如何安装和使用Axios。

二、安装axios

Vue项目中使用如下命令安装

npm install axios --save

在要引用axios的页面引用

1 import axios from 'axios'

三、发送请求

如果希望页面加载时便显示数据，可以直接将axios方法写在created函数中。

1 created(){
2     axios.get('/data').then(function(res){
3         this.goodsList = res.data;
4     }).catch(function (error) {
5         console.log(error);
6     });
7 }

关于axios的语法，我们在上一章已经讲解了，这里不做过多的说明。

四、封装请求方法

统一处理后台的验证信息

五、封装Api模块

六、课后练习

后台数据数据如下所示，

["香蕉","苹果","鸭梨"]

在Vue项目中使用axios实现后台数据列表的增删改查，要求如下：

1. get方法获取数据列表
2. post添加数据，然后重新查询
3. put修改数据，然后重新查询
4. delete删除数据，善后重新查询