?今天是劉小愛(ài)自學(xué)Java的第145天。

感謝你的觀看，謝謝你。

image

學(xué)習(xí)計(jì)劃安排如下：

• 打算從前端頁(yè)面到后臺(tái)服務(wù)器代碼完整地寫(xiě)一遍，但顯然我高估了自己的實(shí)力，幾個(gè)小時(shí)的時(shí)間根本不夠用。

• 并且因?yàn)榻坛毯蛌ue現(xiàn)在最新的組件用法不一樣，我本來(lái)是打算自己完全獨(dú)立使用最新的用法的，但是太耗時(shí)間了，最終還是跟著教程走了。

• 想要求質(zhì)量，就得花費(fèi)大量時(shí)間；想要保持日更，質(zhì)量上就會(huì)差很多，目前還沒(méi)辦法解決這個(gè)問(wèn)題。

• 頁(yè)面做出來(lái)了也沒(méi)時(shí)間詳講，排版的時(shí)間都沒(méi)有了，嘛就這樣吧，不管了。

一、前端組件模板

看下劉小愛(ài)商城的后臺(tái)管理系統(tǒng)：

image

我們前幾天實(shí)現(xiàn)了商品分類(lèi)管理，當(dāng)然在筆記中只說(shuō)明了商品分類(lèi)的查詢(xún)，至于增刪改實(shí)現(xiàn)思路是差不多的。

現(xiàn)在實(shí)現(xiàn)商品品牌管理這個(gè)業(yè)務(wù)。

打算從前端頁(yè)面到后臺(tái)代碼完整地實(shí)現(xiàn)一遍：

1創(chuàng)建我的品牌管理

學(xué)習(xí)資料中是提供的有前端代碼的，本來(lái)是不用自己寫(xiě)的，但學(xué)了幾天的vue，總得用下吧。

所以自行創(chuàng)建一個(gè)我的品牌管理，從0開(kāi)始寫(xiě)一個(gè)前端頁(yè)面出來(lái)：

image

在菜單頁(yè)面menu.js中，我們可以自行添加一個(gè)菜單欄，也就是上圖中我的品牌管理。

其對(duì)應(yīng)的映射路徑為MyBrand，也就是說(shuō)需要編寫(xiě)一個(gè)MyBrand的Vue組件。

同時(shí)在router中添加路由。

2vuetify框架的使用

使用vuetify框架找到想要的vue組件模板，找到服務(wù)端分頁(yè)和排序。

image

我們可以通過(guò)右上角的圖標(biāo)查看對(duì)應(yīng)的代碼

下面顯示的為其對(duì)應(yīng)的樣式，因?yàn)樘L(zhǎng)，我不便截圖，所以只截圖了一部分。

確認(rèn)好這個(gè)模板后，剩下的就是復(fù)制粘貼了，但是也要看得明白，從而修改數(shù)據(jù)：

比如模板中使用的例子是甜點(diǎn)dessert，而我們項(xiàng)目中使用的是品牌brand。

二、前端組件代碼編寫(xiě)

前面指定了：我的品牌管理這個(gè)選項(xiàng)欄對(duì)應(yīng)的是MyBrand.vue這個(gè)文件。

所以創(chuàng)建MyBrand.vue文件，并將對(duì)應(yīng)的vue組件模板復(fù)制到該文件中即可。

1Vue組件模板

image

template：模板的意思，這是一個(gè)組件模板。

v-data-table：表格的數(shù)據(jù)來(lái)源？通過(guò)v-bind指令取出對(duì)應(yīng)的屬性headers和brands。

①headers對(duì)應(yīng)的是表格的表頭信息。

②brands對(duì)應(yīng)的是表格每行的數(shù)據(jù)。

③pagination對(duì)應(yīng)的也就是分頁(yè)相關(guān)的數(shù)據(jù)

④loading對(duì)應(yīng)的是頁(yè)面是否在加載中，這個(gè)后面我們可以根據(jù)響應(yīng)的數(shù)據(jù)做一個(gè)判斷：

• 如果響應(yīng)成功，將其置為false，不再顯示加載中。
• 如果響應(yīng)失敗，將其置為true，繼續(xù)顯示加載中。

2Vue組件數(shù)據(jù)填充

上述只是提供了一個(gè)模板，但具體是什么數(shù)據(jù)呢需要我們?cè)赿ata()方法中說(shuō)清楚：

image

①brands：即模板中對(duì)應(yīng)的數(shù)據(jù)信息，命名要一一對(duì)應(yīng)，也就是表格中每一行對(duì)應(yīng)的數(shù)據(jù)。

②headers：即表示表格對(duì)應(yīng)的表頭數(shù)據(jù)。

當(dāng)然brands中目前都是寫(xiě)的假數(shù)據(jù)，真的數(shù)據(jù)應(yīng)該是從數(shù)據(jù)庫(kù)中查詢(xún)了再渲染到這兒的。

3頁(yè)面組件優(yōu)化

最終頁(yè)面如下圖：

image

其中還有搜索框的使用，并且其輸入的內(nèi)容和key這個(gè)值綁定。

以及修改品牌和刪除品牌這兩個(gè)按鈕，沒(méi)時(shí)間來(lái)說(shuō)明了額。

三、發(fā)送Ajax請(qǐng)求

1發(fā)送請(qǐng)求

將其封裝成一個(gè)loadData()方法

image

①發(fā)送get請(qǐng)求：調(diào)用$http.get()方法即可。

②get請(qǐng)求參數(shù)：

第一個(gè)參數(shù)為發(fā)送請(qǐng)求的路徑。

params即為請(qǐng)求參數(shù)，分頁(yè)數(shù)據(jù)來(lái)自于模板中的pagination這個(gè)數(shù)據(jù)。

③接受請(qǐng)求

這不用多說(shuō)，箭頭函數(shù)接受后臺(tái)響應(yīng)的數(shù)據(jù)。

2生命周期鉤子和監(jiān)控

這個(gè)在第137天和第139天就有講到，所以還很有印象：

image

①created鉤子函數(shù)

即vue實(shí)例一創(chuàng)建，就會(huì)調(diào)用loadData方法，發(fā)送請(qǐng)求

②監(jiān)控

根據(jù)業(yè)務(wù)需求：因?yàn)槭欠猪?yè)顯示的，并且還自帶排序功能，也就是說(shuō)我們每次點(diǎn)擊下一頁(yè)，或者點(diǎn)擊排序的時(shí)候，就會(huì)發(fā)送請(qǐng)求。

若是以前，我們可以在對(duì)應(yīng)的標(biāo)簽處添加一個(gè)點(diǎn)擊事件，

但是現(xiàn)在都是使用的模板，所以加一個(gè)監(jiān)控即可，一旦pagination屬性發(fā)生了變化就再次發(fā)送請(qǐng)求。

最后

行有不得，反求諸己，我是劉小愛(ài)。

一個(gè)白天上班晚上學(xué)習(xí)的95后滬漂，不為其它，只為學(xué)會(huì)自律做好自己，也愿我的每日打卡能給你帶來(lái)勇氣，歡迎點(diǎn)贊關(guān)注和評(píng)論。