vue前端crud(頁(yè)面布局、新增及vue中反向代理)圖文詳解
部門管理
部門管理的頁(yè)面內(nèi)容，寫在 src/views/dept/index.vue 中。
基本布局
首先，根據(jù)頁(yè)面原型、需求說明、接口文檔，先完成頁(yè)面的基本布局 。 可以參考 ElementPlus 中的組件，拷貝過來(lái)適當(dāng)做一個(gè)改造。
我們先來(lái)完成頁(yè)面的基本布局。
部門管理組件 src/views/dept/index.vue 具體的頁(yè)面布局代碼如下：
在dept下的index.vue開發(fā)部門管理
先用H1定義部門標(biāo)簽
然后再去 ElementPlus 官網(wǎng)按鈕插件
然后再設(shè)置外邊距 然后再去官網(wǎng)找到表格組件進(jìn)行拷貝過來(lái)，
然后把數(shù)據(jù)模型也考過來(lái)，然后再加上一個(gè)響應(yīng)式數(shù)據(jù)ref
然后在對(duì)表格組件進(jìn)行改造lable寫上名字 我們要拿到表格的序號(hào)從一往下自增如果需要顯示，所以可以增加一列設(shè)置屬性，可以從一開始
在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ù)需求，需要在新增、修改、刪除部門之后，加載最新的部門數(shù)據(jù)。 在打開頁(yè)面之后，也需要自動(dòng)加載部門數(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)寫的這個(gè)異步請(qǐng)求，我們會(huì)發(fā)現(xiàn)兩個(gè)問題，第一個(gè)是請(qǐng)求路徑難以維護(hù)，第二個(gè)是數(shù)據(jù)解析過于繁瑣
我們要解決這兩個(gè)問題我們要定義一個(gè)請(qǐng)求處理的工具類request.js這個(gè)類 它會(huì)創(chuàng)建一個(gè)axios實(shí)例對(duì)象重新分裝然后定義了兩個(gè)屬性，一個(gè)是請(qǐng)求前綴，另一個(gè)是訪問的超時(shí)時(shí)間，這樣就可以解決第一個(gè)問題
然后第二個(gè)問題，我們需要靠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直接寫后面這個(gè)部分前面那個(gè)部分已經(jīng)在上各類
當(dāng)中寫了到時(shí)候可以直接拼裝
然后最后一步在vue組建當(dāng)中調(diào)用相關(guān)的部門查詢函數(shù)直接可以
因?yàn)閞equest.js是項(xiàng)目的源文件最終都要打包所以不能寫死,這樣不便于項(xiàng)目的維護(hù), 這樣我們可以把路徑改成/api,然后再前端的配置文件當(dāng)中進(jìn)行路徑重寫和配置一個(gè)代理服務(wù)器，同時(shí)在進(jìn)行路徑重寫把APi刪掉，那可以判斷如果是以開頭/api就是請(qǐng)求后段的項(xiàng)目這就是反向代理
新增部門
新增部門和編輯部門，可以同用一個(gè)Dialog對(duì)話框。而這個(gè)對(duì)話框中，主要包括兩個(gè)ElementPlus中的組件，分別為：Dialog對(duì)話框組件，F(xiàn)orm表單組件。
新增部門添加我們是用到了前端的對(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)中然后將表單相的名字改為部門名稱，然后再修改一下寬度
定義一個(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í)呢，我們要為新增部門添加一個(gè)事件，在新增部門這個(gè)按鈕上添加然后對(duì)他進(jìn)行說明當(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)中寫上對(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)擊新增部門的時(shí)候他就有他還會(huì)保留上一次的內(nèi)容此時(shí)我們?cè)僬业叫略龅暮瘮?shù)再增加一個(gè)設(shè)置為新增部門之后然后我們將對(duì)應(yīng)的這個(gè)屬性name設(shè)置為空串
總結(jié)
到此這篇關(guān)于vue前端crud(頁(yè)面布局、新增及vue中反向代理)的文章就介紹到這了,更多相關(guān)vue前端crud內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue配置代理服務(wù)器proxy 多種方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了你準(zhǔn)備好迎接vue3.0了嗎,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue3中的toRef和toRefs的區(qū)別和用法示例小結(jié)
toRef和toRefs可以用來(lái)復(fù)制reactive里面的屬性然后轉(zhuǎn)成 ref,它保留了響應(yīng)式,也保留了引用,也就是你從 reactive 復(fù)制過來(lái)的屬性進(jìn)行修改后,除了視圖會(huì)更新,原有 ractive 里面對(duì)應(yīng)的值也會(huì)跟著更新,本文介紹Vue3中toRef和toRefs的區(qū)別和用法,需要的朋友可以參考下2024-08-08
淺談nuxtjs校驗(yàn)登錄中間件和混入(mixin)
這篇文章主要介紹了淺談nuxtjs校驗(yàn)登錄中間件和混入(mixin)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-11-11
強(qiáng)制Vue重新渲染組件的5種方法小結(jié)
在開發(fā)Vue.js應(yīng)用程序時(shí),有時(shí)我們需要強(qiáng)制重新渲染組件以確保數(shù)據(jù)和視圖同步,下面就來(lái)介紹一下強(qiáng)制Vue重新渲染組件的5種方法,感興趣的可以了解一下2025-06-06
Vue3組合式API之getCurrentInstance詳解
我們可以通過?getCurrentInstance這個(gè)函數(shù)來(lái)返回當(dāng)前組件的實(shí)例對(duì)象,也就是當(dāng)前vue這個(gè)實(shí)例對(duì)象,下面這篇文章主要給大家介紹了關(guān)于Vue3組合式API之getCurrentInstance的相關(guān)資料,需要的朋友可以參考下2022-09-09
關(guān)于element同時(shí)使用Drawer和Dialog出現(xiàn)多個(gè)遮罩問題
這篇文章主要介紹了關(guān)于element同時(shí)使用Drawer和Dialog出現(xiàn)多個(gè)遮罩問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue.config.js中配置分包策略及常見的配置選項(xiàng)
在Vue.js中分包（Code Splitting）是一種將應(yīng)用程序代碼拆分為不同的塊或包的技術(shù),從而在需要時(shí)按需加載這些包,下面這篇文章主要給大家介紹了關(guān)于vue.config.js中配置分包策略及常見的配置選項(xiàng)的相關(guān)資料,需要的朋友可以參考下2024-02-02
vue使用tracking實(shí)現(xiàn)人臉識(shí)別/人臉偵測(cè)完整代碼
作為一個(gè)AI模型,人臉識(shí)別涉及到多個(gè)技術(shù)領(lǐng)域,下面這篇文章主要給大家介紹了關(guān)于vue使用tracking實(shí)現(xiàn)人臉識(shí)別/人臉偵測(cè)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
在antd中setFieldsValue和defaultVal的用法
這篇文章主要介紹了在antd中setFieldsValue和defaultVal的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-10-10