目錄
-
-
- 一、前端元件模闆
- 二、前端元件代碼編寫
- 三、發送Ajax請求
- 最後
-
今天是劉小愛自學Java的第145天。
感謝你的觀看，謝謝你。
學習計劃安排如下：
- 打算從前端頁面到背景伺服器代碼完整地寫一遍，但顯然我高估了自己的實力，幾個小時的時間根本不夠用。
- 并且因為教程和vue現在最新的元件用法不一樣，我本來是打算自己完全獨立使用最新的用法的，但是太耗時間了，最終還是跟着教程走了。
- 想要求品質，就得花費大量時間；想要保持日更，品質上就會差很多，目前還沒辦法解決這個問題。
- 頁面做出來了也沒時間詳講，排版的時間都沒有了，嘛就這樣吧，不管了。
看下劉小愛商城的背景管理系統：
我們前幾天實作了商品分類管理，當然在筆記中隻說明了商品分類的查詢，至于增删改實作思路是差不多的。
現在實作商品品牌管理這個業務。
打算從前端頁面到背景代碼完整地實作一遍：
1建立我的品牌管理
學習資料中是提供的有前端代碼的，本來是不用自己寫的，但學了幾天的vue，總得用下吧。
是以自行建立一個我的品牌管理，從0開始寫一個前端頁面出來：
在菜單頁面menu.js中，我們可以自行添加一個菜單欄，也就是上圖中我的品牌管理。
其對應的映射路徑為MyBrand，也就是說需要編寫一個MyBrand的Vue元件。
同時在router中添加路由。
2vuetify架構的使用
使用vuetify架構找到想要的vue元件模闆，找到服務端分頁和排序。
我們可以通過右上角的圖示檢視對應的代碼
下面顯示的為其對應的樣式，因為太長，我不便截圖，是以隻截圖了一部分。
确認好這個模闆後，剩下的就是複制粘貼了，但是也要看得明白，進而修改資料：
比如模闆中使用的例子是甜點dessert，而我們項目中使用的是品牌brand。
前面指定了：我的品牌管理這個選項欄對應的是MyBrand.vue這個檔案。
是以建立MyBrand.vue檔案，并将對應的vue元件模闆複制到該檔案中即可。
1Vue元件模闆
template：模闆的意思，這是一個元件模闆。
v-data-table：表格的資料來源？通過v-bind指令取出對應的屬性headers和brands。
①headers對應的是表格的表頭資訊。
②brands對應的是表格每行的資料。
③pagination對應的也就是分頁相關的資料
④loading對應的是頁面是否在加載中，這個後面我們可以根據響應的資料做一個判斷：
- 如果響應成功，将其置為false，不再顯示加載中。
- 如果響應失敗，将其置為true，繼續顯示加載中。
2Vue元件資料填充
上述隻是提供了一個模闆，但具體是什麼資料呢需要我們在data()方法中說清楚：
①brands：即模闆中對應的資料資訊，命名要一一對應，也就是表格中每一行對應的資料。
②headers：即表示表格對應的表頭資料。
當然brands中目前都是寫的假資料，真的資料應該是從資料庫中查詢了再渲染到這兒的。
3頁面元件優化
最終頁面如下圖：
其中還有搜尋框的使用，并且其輸入的内容和key這個值綁定。
以及修改品牌和删除品牌這兩個按鈕，沒時間來說明了額。
1發送請求
将其封裝成一個loadData()方法
①發送get請求：調用$http.get()方法即可。
②get請求參數：
第一個參數為發送請求的路徑。
params即為請求參數，分頁資料來自于模闆中的pagination這個資料。
③接受請求
這不用多說，箭頭函數接受背景響應的資料。
2生命周期鈎子和監控
這個在第137天和第139天就有講到，是以還很有印象：
①created鈎子函數
即vue執行個體一建立，就會調用loadData方法，發送請求
②監控
根據業務需求：因為是分頁顯示的，并且還自帶排序功能，也就是說我們每次點選下一頁，或者點選排序的時候，就會發送請求。