【融職培訓】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刪除數據，善後從新查詢

 

【融職教育】在工做中學習，在學習中工做