頁面渲染過程（渲染和不渲染的區別圖片對比）

昨天的文章已經將后臺數據查詢出來，前端拿到數據之后應該將數據渲染到頁面上，那么如何通過異步請求獲取數據呢？大家用得最多的是ajax，ajax的話是jq里面的，但是由于是vue項目，引入一個jq，那就有點太重了！

所以vue里面用jq的話實在是太奢侈浪費了，那么vue里面的異步請求有一個組件叫axios，其實這個語法看起來也差不多，請看下面的事例代碼。

axios有兩種請求方式最常見，一種是get，一種是post，那么分別的寫法是什么樣子的呢？下面是get請求

下面是post請求：

注意，POST請求傳參，不需要像GET請求那樣定義一個對象，在對象的params參數中傳參。post()方法的第二個參數對象，就是將來要傳遞的參數

對于axios，不可能每個頁面都加載一次，現在進行一下全局配置：這樣就可以直接引用http了

說明一下：http.js中導入了config的配置，還記得嗎？

http.js對axios進行了全局配置：baseURL=config.api，即
http://local.leyou.com/api。因此以后所有用axios發起的請求，都會以這個地址作為前綴。通過Vue.property.$http = axios，將axios賦值給了 Vue原型中的$http。這樣以后所有的Vue實例都可以訪問到$http，也就是訪問到了axios了。

說太多無用來把測試吧，將這個axios引用到品牌模塊中，看是否能發起請求

返回了結果：就是存在品牌表里面的，拿出來渲染就可以了

剛才其實只是測試是不是通了，但是沒有攜帶任何參數，這是不對的，對于頁面來說，你得告訴他當前第幾頁，搜索關鍵字是什么，是什么排序的，這些都要搞清楚，所以，分析起來還需要這些參數：

• page：當前頁，int
• rows：每頁大小，int
• sortBy：排序字段，String
• desc：是否為降序，boolean
• key：搜索關鍵詞，String

有了這些參數，后臺取出來以后可以相應地進行查詢，返回數據

同時將數組的值取出來，賦值給vuetity的tabel組件的數組，分頁數據賦值給每一行，這個交給這個框架了，不用你操心的

看一下效果：

好了，數據就這樣請求出來了，下面我們來看一下搜索和排序等功能開發，咱們下一章見！