部門(mén)管理

部門(mén)管理的頁(yè)面內(nèi)容，寫(xiě)在 src/views/dept/index.vue 中。

基本布局

首先，根據(jù)頁(yè)面原型、需求說(shuō)明、接口文檔，先完成頁(yè)面的基本布局 。 可以參考 ElementPlus 中的組件，拷貝過(guò)來(lái)適當(dāng)做一個(gè)改造。

我們先來(lái)完成頁(yè)面的基本布局。

部門(mén)管理組件 src/views/dept/index.vue 具體的頁(yè)面布局代碼如下：  

在dept下的index.vue開(kāi)發(fā)部門(mén)管理

先用H1定義部門(mén)標(biāo)簽

然后再去 ElementPlus 官網(wǎng)按鈕插件

然后再設(shè)置外邊距 然后再去官網(wǎng)找到表格組件進(jìn)行拷貝過(guò)來(lái)，

然后把數(shù)據(jù)模型也考過(guò)來(lái)，然后再加上一個(gè)響應(yīng)式數(shù)據(jù)ref

然后在對(duì)表格組件進(jìn)行改造lable寫(xiě)上名字 我們要拿到表格的序號(hào)從一往下自增如果需要顯示，所以可以增加一列設(shè)置屬性，可以從一開(kāi)始

在prop中要展示所有的內(nèi)容 label定義表頭名稱，最后這個(gè)操作的字段要定義兩個(gè)按鈕這里要用到自定義列模板然后定義兩個(gè)按鈕編輯和刪除

然后再加上居中然后在按鈕上加上相應(yīng)的圖標(biāo)

表格中每一列展示的屬性 prop 都是根據(jù)接口文檔來(lái)的，接口文檔返回什么樣的數(shù)據(jù)，我們就安裝對(duì)應(yīng)的數(shù)據(jù)格式進(jìn)行解析。

加載數(shù)據(jù)

根據(jù)需求，需要在新增、修改、刪除部門(mén)之后，加載最新的部門(mén)數(shù)據(jù)。 在打開(kāi)頁(yè)面之后，也需要自動(dòng)加載部門(mén)數(shù)據(jù)。 那接下來(lái)，我們就需要基于axios發(fā)送異步請(qǐng)求，動(dòng)態(tài)獲取數(shù)據(jù)。

需要在 src/views/dept/index.vue 中增加如下代碼，在頁(yè)面加載完成發(fā)送異步請(qǐng)求（https://apifoxmock.com/m1/3128855-1224313-default/depts），動(dòng)態(tài)加載的Axios。

利用apifox的線上mock服務(wù)生成假數(shù)據(jù) 

利用關(guān)鍵詞引入axios

然后定一個(gè)查詢函數(shù)發(fā)起請(qǐng)求

進(jìn)行判斷是否響應(yīng)成功然后查詢成功之后

將所對(duì)應(yīng)的值賦值給對(duì)應(yīng)的數(shù)據(jù)模型

然后再引入對(duì)應(yīng)的鉤子函數(shù)

定義鉤子函數(shù)然后再調(diào)用查詢函數(shù)

我們?cè)瓉?lái)寫(xiě)的這個(gè)異步請(qǐng)求，我們會(huì)發(fā)現(xiàn)兩個(gè)問(wèn)題，第一個(gè)是請(qǐng)求路徑難以維護(hù)，第二個(gè)是數(shù)據(jù)解析過(guò)于繁瑣

我們要解決這兩個(gè)問(wèn)題我們要定義一個(gè)請(qǐng)求處理的工具類request.js這個(gè)類 它會(huì)創(chuàng)建一個(gè)axios實(shí)例對(duì)象重新分裝然后定義了兩個(gè)屬性，一個(gè)是請(qǐng)求前綴，另一個(gè)是訪問(wèn)的超時(shí)時(shí)間，這樣就可以解決第一個(gè)問(wèn)題

然后第二個(gè)問(wèn)題，我們需要靠axios的response攔截器來(lái)處理然后他就可以發(fā)送響應(yīng)請(qǐng)求以后都基于這個(gè)實(shí)例對(duì)象來(lái)發(fā)送請(qǐng)求，響應(yīng)給前端的時(shí)候他就會(huì)攔截進(jìn)行處理調(diào)用use這個(gè)方法然后他成功之后直接返回?cái)?shù)據(jù)

與服務(wù)端進(jìn)行異步交互的邏輯時(shí)，通常會(huì)封裝到一個(gè)單獨(dú)的APi當(dāng)中如dept.js然后在這個(gè)類當(dāng)中先要引入上面那個(gè)工具類然后在這個(gè)類中定義一個(gè)方法用來(lái)查詢?nèi)缓筮@個(gè)url直接寫(xiě)后面這個(gè)部分前面那個(gè)部分已經(jīng)在上各類
當(dāng)中寫(xiě)了到時(shí)候可以直接拼裝
然后最后一步在vue組建當(dāng)中調(diào)用相關(guān)的部門(mén)查詢函數(shù)直接可以

因?yàn)閞equest.js是項(xiàng)目的源文件最終都要打包所以不能寫(xiě)死,這樣不便于項(xiàng)目的維護(hù), 這樣我們可以把路徑改成/api,然后再前端的配置文件當(dāng)中進(jìn)行路徑重寫(xiě)和配置一個(gè)代理服務(wù)器，同時(shí)在進(jìn)行路徑重寫(xiě)把APi刪掉，那可以判斷如果是以開(kāi)頭/api就是請(qǐng)求后段的項(xiàng)目這就是反向代理

新增部門(mén)

新增部門(mén)和編輯部門(mén)，可以同用一個(gè)Dialog對(duì)話框。而這個(gè)對(duì)話框中，主要包括兩個(gè)ElementPlus中的組件，分別為：Dialog對(duì)話框組件，F(xiàn)orm表單組件。

新增部門(mén)添加我們是用到了前端的對(duì)話框首先那點(diǎn)擊這個(gè)按鈕會(huì)彈出對(duì)話框然后去官網(wǎng)找到對(duì)應(yīng)的組件還有要把他的數(shù)據(jù)模型聲明一下然后同時(shí)默認(rèn)值給他設(shè)置一個(gè)false要把它隱藏起來(lái),  然后整個(gè)表達(dá)的數(shù)據(jù)要綁定在dept當(dāng)中然后將表單相的名字改為部門(mén)名稱，然后再修改一下寬度

定義一個(gè)保存的函數(shù)

然后再在聲明dept對(duì)象然后加上一個(gè)屬性name然后將輸入的值添加到這個(gè)屬性當(dāng)中，然后再對(duì)兩個(gè)按鈕進(jìn)行設(shè)置一個(gè)是取消，一個(gè)是確定取消的話，我們就直接把它設(shè)為false 把它隱藏起來(lái)確定的話我們要調(diào)用一個(gè)事件把它保存起來(lái)，同時(shí)也要在把它隱藏起來(lái)

這里我們?cè)倜阑幌聦?duì)話框的標(biāo)題同時(shí)呢，我們要為新增部門(mén)添加一個(gè)事件，在新增部門(mén)這個(gè)按鈕上添加然后對(duì)他進(jìn)行說(shuō)明當(dāng)點(diǎn)擊它的時(shí)候我們變?yōu)閠ure

因?yàn)槲覀冊(cè)谛略龊途庉嫯?dāng)中都要用到這個(gè)對(duì)話框，所以我們要復(fù)用他，然后要為他動(dòng)態(tài)的綁定一個(gè)然后再聲明一個(gè)數(shù)據(jù)模型用來(lái)綁定對(duì)應(yīng)的名字，然后再回到上一個(gè)事件當(dāng)中在點(diǎn)擊的同時(shí)變?yōu)閠rue的時(shí)候綁定對(duì)應(yīng)的值設(shè)置標(biāo)題

這里我們?cè)偌由吓c后端交互的邏輯在dept這個(gè)類當(dāng)中定義一個(gè)新增函數(shù)用來(lái)與后端交互，同時(shí)呢，因?yàn)槲覀円獋鬟f參數(shù)然后在括號(hào)中寫(xiě)上對(duì)應(yīng)的參數(shù)名字，同時(shí)那將get改為post 然后再在后面的括號(hào)把請(qǐng)求參數(shù)傳到了

然后我們?cè)俜貋?lái)當(dāng)我們點(diǎn)擊確定的按鈕的時(shí)候調(diào)用save這個(gè)函數(shù)這個(gè)里面調(diào)用剛剛與后端交互的那個(gè)函數(shù)addapi 同時(shí)呢，我們?cè)诶ㄌ?hào)當(dāng)中傳入?yún)?shù)用點(diǎn)value的方式，那我們?cè)偌由蟖wait和async然后我們?cè)龠M(jìn)行判斷成功了，還是失敗了判斷他返回的code值,如果成功了，我們第一步要提示信息用alert，第二部然后再關(guān)閉對(duì)話框設(shè)置成false,然后第三部調(diào)用查詢函數(shù)如果失敗了，我們直接輸入提示信息，

因?yàn)槲覀兪褂玫腶lert它具有堵塞效果你必須點(diǎn)擊確定他才能消失所以我們這里使用光官網(wǎng)的提示信息先引入對(duì)應(yīng)的組件,然后更換為它里面的方法更換提示信息

這里我們會(huì)發(fā)現(xiàn)當(dāng)我們?cè)俅吸c(diǎn)擊新增部門(mén)的時(shí)候他就有他還會(huì)保留上一次的內(nèi)容此時(shí)我們?cè)僬业叫略龅暮瘮?shù)再增加一個(gè)設(shè)置為新增部門(mén)之后然后我們將對(duì)應(yīng)的這個(gè)屬性name設(shè)置為空串

總結(jié) 

到此這篇關(guān)于vue前端crud(頁(yè)面布局、新增及vue中反向代理)的文章就介紹到這了,更多相關(guān)vue前端crud內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！