?今天是劉小愛自學(xué)Java的第145天。
感謝你的觀看驻谆，謝謝你卵凑。
學(xué)習(xí)計劃安排如下：
打算從前端頁面到后臺服務(wù)器代碼完整地寫一遍，但顯然我高估了自己的實(shí)力胜臊，幾個小時的時間根本不夠用勺卢。
并且因?yàn)榻坛毯蛌ue現(xiàn)在最新的組件用法不一樣，我本來是打算自己完全獨(dú)立使用最新的用法的象对，但是太耗時間了黑忱，最終還是跟著教程走了。
想要求質(zhì)量，就得花費(fèi)大量時間甫煞；想要保持日更菇曲，質(zhì)量上就會差很多，目前還沒辦法解決這個問題抚吠。
頁面做出來了也沒時間詳講羊娃，排版的時間都沒有了，嘛就這樣吧埃跷，不管了蕊玷。
一、前端組件模板
看下劉小愛商城的后臺管理系統(tǒng)：
我們前幾天實(shí)現(xiàn)了商品分類管理弥雹，當(dāng)然在筆記中只說明了商品分類的查詢垃帅，至于增刪改實(shí)現(xiàn)思路是差不多的。
現(xiàn)在實(shí)現(xiàn)商品品牌管理這個業(yè)務(wù)剪勿。
打算從前端頁面到后臺代碼完整地實(shí)現(xiàn)一遍：
1創(chuàng)建我的品牌管理
學(xué)習(xí)資料中是提供的有前端代碼的贸诚，本來是不用自己寫的，但學(xué)了幾天的vue厕吉，總得用下吧酱固。
所以自行創(chuàng)建一個我的品牌管理，從0開始寫一個前端頁面出來：
在菜單頁面menu.js中头朱，我們可以自行添加一個菜單欄运悲，也就是上圖中我的品牌管理。
其對應(yīng)的映射路徑為MyBrand项钮，也就是說需要編寫一個MyBrand的Vue組件班眯。
同時在router中添加路由。
2vuetify框架的使用
使用vuetify框架找到想要的vue組件模板烁巫，找到服務(wù)端分頁和排序署隘。
我們可以通過右上角的圖標(biāo)查看對應(yīng)的代碼
下面顯示的為其對應(yīng)的樣式，因?yàn)樘L亚隙，我不便截圖磁餐，所以只截圖了一部分。
確認(rèn)好這個模板后阿弃，剩下的就是復(fù)制粘貼了诊霹，但是也要看得明白，從而修改數(shù)據(jù)：
比如模板中使用的例子是甜點(diǎn)dessert恤浪，而我們項(xiàng)目中使用的是品牌brand畅哑。
二肴楷、前端組件代碼編寫
前面指定了：我的品牌管理這個選項(xiàng)欄對應(yīng)的是MyBrand.vue這個文件水由。
所以創(chuàng)建MyBrand.vue文件，并將對應(yīng)的vue組件模板復(fù)制到該文件中即可赛蔫。
1Vue組件模板
template：模板的意思砂客，這是一個組件模板泥张。
v-data-table：表格的數(shù)據(jù)來源？通過v-bind指令取出對應(yīng)的屬性headers和brands鞠值。
①headers對應(yīng)的是表格的表頭信息媚创。
②brands對應(yīng)的是表格每行的數(shù)據(jù)。
③pagination對應(yīng)的也就是分頁相關(guān)的數(shù)據(jù)
④loading對應(yīng)的是頁面是否在加載中彤恶，這個后面我們可以根據(jù)響應(yīng)的數(shù)據(jù)做一個判斷：
- 如果響應(yīng)成功钞钙，將其置為false，不再顯示加載中声离。
- 如果響應(yīng)失敗芒炼，將其置為true，繼續(xù)顯示加載中术徊。
2Vue組件數(shù)據(jù)填充
上述只是提供了一個模板本刽，但具體是什么數(shù)據(jù)呢需要我們在data()方法中說清楚：
①brands：即模板中對應(yīng)的數(shù)據(jù)信息，命名要一一對應(yīng)赠涮，也就是表格中每一行對應(yīng)的數(shù)據(jù)子寓。
②headers：即表示表格對應(yīng)的表頭數(shù)據(jù)。
當(dāng)然brands中目前都是寫的假數(shù)據(jù)笋除，真的數(shù)據(jù)應(yīng)該是從數(shù)據(jù)庫中查詢了再渲染到這兒的斜友。
3頁面組件優(yōu)化
最終頁面如下圖：
其中還有搜索框的使用，并且其輸入的內(nèi)容和key這個值綁定垃它。
以及修改品牌和刪除品牌這兩個按鈕蝙寨，沒時間來說明了額。
三嗤瞎、發(fā)送Ajax請求
1發(fā)送請求
將其封裝成一個loadData()方法
①發(fā)送get請求：調(diào)用$http.get()方法即可墙歪。
②get請求參數(shù)：
第一個參數(shù)為發(fā)送請求的路徑。
params即為請求參數(shù)贝奇，分頁數(shù)據(jù)來自于模板中的pagination這個數(shù)據(jù)虹菲。
③接受請求
這不用多說，箭頭函數(shù)接受后臺響應(yīng)的數(shù)據(jù)掉瞳。
2生命周期鉤子和監(jiān)控
這個在第137天和第139天就有講到毕源，所以還很有印象：
①created鉤子函數(shù)
即vue實(shí)例一創(chuàng)建，就會調(diào)用loadData方法陕习，發(fā)送請求
②監(jiān)控
根據(jù)業(yè)務(wù)需求：因?yàn)槭欠猪擄@示的霎褐，并且還自帶排序功能，也就是說我們每次點(diǎn)擊下一頁该镣，或者點(diǎn)擊排序的時候冻璃，就會發(fā)送請求。
若是以前，我們可以在對應(yīng)的標(biāo)簽處添加一個點(diǎn)擊事件省艳，
但是現(xiàn)在都是使用的模板娘纷，所以加一個監(jiān)控即可，一旦pagination屬性發(fā)生了變化就再次發(fā)送請求跋炕。
最后
行有不得赖晶，反求諸己，我是劉小愛辐烂。
一個白天上班晚上學(xué)習(xí)的95后滬漂遏插，不為其它，只為學(xué)會自律做好自己纠修，也愿我的每日打卡能給你帶來勇氣涩堤，歡迎點(diǎn)贊關(guān)注和評論。
