【融职培训】Web前端学习 第7章 Vue基础教程9 数据交互

1、概述

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

2、安装axios

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

npm install axios --save

在要引用axios的页面引用

1 import axios from 'axios'

3、发送请求

若是但愿页面加载时便显示数据，能够直接将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的语法，咱们在上一章已经讲解了，这里不作过多的说明。

4、封装请求方法

统一处理后台的验证信息

5、封装Api模块

6、课后练习

后台数据数据以下所示，

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

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

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

 

【融职教育】在工做中学习，在学习中工做