快捷導(dǎo)航

vue前端crud(頁面布局、新增及vue中反向代理)圖文詳解

更新時間：2026年02月02日 09:35:41 作者：釋懷不想釋懷

Vue.js是一款輕量級的前端框架,具有響應(yīng)式的數(shù)據(jù)綁定和組件化的開發(fā)方式,適合構(gòu)建用戶界面,這篇文章主要介紹了vue前端crud(頁面布局、新增及vue中反向代理)的相關(guān)資料,需要的朋友可以參考下

部門管理

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

基本布局

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

我們先來完成頁面的基本布局。

部門管理組件 src/views/dept/index.vue 具體的頁面布局代碼如下：

在dept下的index.vue開發(fā)部門管理

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

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

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

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

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

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

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

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

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

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

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

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

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

然后定一個查詢函數(shù)發(fā)起請求

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

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

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

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

我們原來寫的這個異步請求，我們會發(fā)現(xiàn)兩個問題，第一個是請求路徑難以維護(hù)，第二個是數(shù)據(jù)解析過于繁瑣

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

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

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

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

新增部門

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

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

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

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

這里我們再美化一下對話框的標(biāo)題同時呢，我們要為新增部門添加一個事件，在新增部門這個按鈕上添加然后對他進(jìn)行說明當(dāng)點(diǎn)擊它的時候我們變?yōu)閠ure

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

這里我們再加上與后端交互的邏輯在dept這個類當(dāng)中定義一個新增函數(shù)用來與后端交互，同時呢，因?yàn)槲覀円獋鬟f參數(shù)然后在括號中寫上對應(yīng)的參數(shù)名字，同時那將get改為post 然后再在后面的括號把請求參數(shù)傳到了

然后我們再翻回來當(dāng)我們點(diǎn)擊確定的按鈕的時候調(diào)用save這個函數(shù)這個里面調(diào)用剛剛與后端交互的那個函數(shù)addapi 同時呢，我們在括號當(dāng)中傳入?yún)?shù)用點(diǎn)value的方式，那我們再加上await和async然后我們再進(jìn)行判斷成功了，還是失敗了判斷他返回的code值,如果成功了，我們第一步要提示信息用alert，第二部然后再關(guān)閉對話框設(shè)置成false,然后第三部調(diào)用查詢函數(shù)如果失敗了，我們直接輸入提示信息，

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