昨天的文章已經將後台數據查詢出來，前端拿到數據之後應該將數據渲染到頁面上，那麼如何通過異步請求獲取數據呢？大家用得最多的是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組件的數組，分頁數據賦值給每一行，這個交給這個框架了，不用你操心的
看一下效果：
好了，數據就這樣請求出來了，下面我們來看一下搜索和排序等功能開發，咱們下一章見！
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/268907.html
微信掃一掃 
支付寶掃一掃 