vue大型電商項目尚品彙(後台篇)day01

開始我們後台篇的內容,前面處理了一些事情,去學校完成授位儀式,由校長授位合影,青春不留遺憾,然後還換了一個電腦,征戰了四年的神船終於退役了,各種各樣的小毛病是真的煩人。
現在正式開始後台篇的內容,做了今天總體的感覺後台部分大難度沒有,但是要考慮一點就是對於elementUI的熟練程度,要把這個練得比bootstrap還熟悉,雖然bootstrap也沒有多熟悉,但是這個必須熟悉,畢竟工作用得多

一.組件通信高級(面試必備)

1.複習

複習一下目前已經學習過的組件通信

  • props:父給子傳,但是需要注意的是父給子傳的是函數那麼這是自定義事件的前兆,只有當父給子傳的是非函數才是props傳遞數據,他有三種書寫方式:數組、對象(具體類型type)、對象(默認值default),注意我們的路由也有props也是用來傳遞數據的,三種方式布爾值(接受所有的params參數)、對象形式(可以傳遞指定的參數),函數形式(形參$route,就可以接受query參數了),他們三個都是給這個路由組件傳遞參數且組件也要用props來接受
  • 自定義事件:適用於子給父傳,父在子的組件標籤寫上自定義事件回調函數等,子這邊規定觸發方式並使用api emit來發送數據,和全局事件總線相比就是省略了$on這一步
  • 全局事件總線$bus:適用於任何組件通信
  • 消息訂閱與發佈(pubsub-js):適用於任何組件
  • vuex:適用於任何組件
  • 插槽:使用於父子間,而且一般是與結構有關的

2.自定義事件深入

原生DOM綁定原生事件,正常綁定即可

image-20220608165550866

如果這個時候他有一個子組件,也來一個點擊事件,你會發現觸發不了

image-20220608165918634

其原因是因為原生DOM可以綁定原生事件,不能綁定自定義事件,組件標籤可以綁定自定義事件,也可以綁定原生事件,但是綁定原生事件會被當做自定義事件(如果需要讓他成為原生事件,需要一個修飾符.native可以將自定義事件轉為原生事件

3.v-model深入

正常使用

image-20220608171442253

下面來探究一下v-model的原理,他的原理其實就是兩個東西 單向綁定value➕input事件的混合使用

image-20220608171637745

父子組件通信

主意給子組件標籤一個是傳過去的數據,一個是自定義事件,注意:原生事件的$event是事件對象,但是自定時事件的$event是那邊傳過來的數據

image-20220608172201312

在子組件這邊才是真正的單向綁定value➕input事件

image-20220608172419435

所以既然這是v-model的原理,那我這邊就可以用v-model來代替

image-20220608172556114

4.屬性修飾符sync

要讓父子數據同步,實現父子數據通信,以前的方法,採用props傳過來數據,再來一個自定義事件,在子組件修改這個數據,其原理跟v-model的實現原理很類似

image-20220608173408123

image-20220608173421474

針對於這種情況,我們有一個修飾符,sync,直接加在傳過來的數據後面,這樣一加兩個作用,一個是props過來了一個數據,你可以接受,一個是會給你自動加上一個update開頭後面取決於你的數據名叫什麼的自定義事件

image-20220608173558525

5. $attrs 和 $listeners

使用一下elementUI的button

image-20220608175443625

我們可以封裝一個,比如我要用什麼樣的按鈕直接傳數據進去

image-20220608175544396

首先要注意的是,我們的組件是沒有提示這個功能的,要使用提示可以在外麵包一個a標籤,然後利用a標籤的title來提示

image-20220608175635998

按理說子組件這邊應該一個一個都props過來,我們每個組件其實有有一個api叫做$attrs他保存了所有來自於父組件的props的數據

image-20220608175807899

image-20220608175815931

值得注意的是,我們通過props已經獲取的數據,$attrs是獲取不到的,當然有了這些數據後還可以用一個簡便方法,把他們統一綁定上去,用v-bind,注意只能用v-bind不能簡寫形式

image-20220608175943691

然後我們這個是按鈕,肯定可以有點點擊事件,給組件來一個點擊事件,它會變成自定義事件,這裡不考慮用native的做法

image-20220608180214454

那麼自定義事件過來,就只有子組件來emit了,這裡說一個api $listeners,它是用來保存父組件給子組件傳遞過來的自定義事件

image-20220608180350417

image-20220608180356803

可以給她理解為是一個事件整體,包括觸發方式,所以子組件這邊就直接用v-on來綁定這個事件觸發包括回調都有了,同樣的這裡不能用簡寫形式

image-20220608180530248

6.$children和$parent

image-20220608210317718

image-20220608210327605

當我點擊兒子200應該給爸爸資金➕200,兒子減200,爸爸這裡好說,兒子這裡可以用ref來做,我們說過ref給原生DOM是獲取這個DOM節點,但是給到組件標籤就會獲取到這個vc實例組件實例對象

image-20220608210654994

點擊向全部子女借兩百,也可以用這種方法,一個一個來,一個用一個新的方法,一個全新的api,$children,他可以獲取到當前這個組件所有的子組件,以數組的形式展示,裏面是每一個vc實例

image-20220608210912205

注意雖然是數組,但是最好不要用下表的形式來寫,因為它裏面的每個組件實例對象是不按順序來的,你也不知道哪個是第一個

image-20220608211040050

當我們點擊子組件裏面的借錢,自己會增加,同時父組件得錢也會減少,這個時候也用到一個api,$parent,可以獲取到當前組件的父組件

image-20220608211538407

6.1混合

當我們結構一樣那就是復用,當我們js一樣那就是mixin混合

先複習一下混合,一個單獨的文件夾,一個js文件,裏面直接暴露相同的配置項,只要是能寫在js裏面的都可以放進來,比如這裡son和daughter都有相同的methods

image-20220608212857433

image-20220608212903994

那就可以直接提出來

image-20220608213009661

image-20220608213018988

用的時候直接導入,然後配置項mixins注意是數組形式來寫,而且沒有引號

image-20220608213139243

然後他的一些注意事項:混合文件裏面可以暴露多個配置項,只是要定義名字,導入的時候也要寫好名字

image-20220608213302690

image-20220608213311768

然後就是你沒有的混合都可以給你,但是你有的配置,以你自己的為準

然後生命周期鉤子如果混合也有你也有,兩個都會執行並不會執行一個,而且會先執行混合的

最後注意一下,混合可以全局混合

image-20220608213431527

7.插槽

回顧一下

默認插槽,就是直接在標籤組件寫結構,組件寫slot佔位,如果父組件有數據要傳到子組件,就不用傳了,直接在這裡用

image-20220608215904848

image-20220608215910113

具名插槽就是可以給slot添加name,然後我們的結構也可以slot去指定的slot

image-20220608220328480

image-20220608220332265

image-20220608220415666

作用域插槽

我的理解是,因為我們前面使用插槽,一般是數據都在定義插槽這裡,也就是並不在slot這裡,他只是起一個佔位的作用,真正我們要怎麼用數據是在標籤這裡來決定怎麼用,而作用域插槽就好像數據的作用域發生了變化,到了slot這邊也就是子組件這邊,作用域發生變化,這就是作用域插槽

image-20220608221756782

image-20220608221804495

插槽是可以傳數據的,子給父傳,直接通過slot標籤傳,父組件這邊需要通過插槽的使用者來接受(注意什麼叫做插槽的使用者,就是誰用標籤來替代slot佔位這個標籤誰就是使用者,在這裡template標籤就是使用者

image-20220608222005491

image-20220608222519518

可以看到接受過來的數據是一個鍵值對,前面是我們傳過來的數據名,後面是值

image-20220608222602225

image-20220608222722558

二.後台管理系統

1.簡介

什麼是後台管理?就是通過可視化的界面對數據庫進行增刪改查,並且根據不同的角色(老闆、員工)看到的界面,操作的權限是不同的,一般而言這個項目是不需要註冊功能的

2.後台模板介紹

image-20220610104900091

首先模板下下來會發現,缺少依賴需要安裝依賴(沒有node_modules)

image-20220610105331613

安裝完畢之後查看package.json文件可以看到這個項目啟動命令為dev

image-20220610105726245

這樣就可以將項目成功跑起來了

3.模板文件解析

  • build,是webpack的一個配置文件,比較少去觸碰

    image-20220610114630269

  • src

    image-20220610114704103

    • api,與一些接口,請求相關的文件,他這裡也是封裝了一個axios然後通過函數的方式可以直接請求

      image-20220610114752882

    • assets,放置一些靜態文件

    • icons,放置一些svg矢量圖

    • layout,放置了一些組件和混入

    • router,路由相關文件,注意一下他的路由配置方式與以往有所不同,它是直接在這裡對外暴露一個數組放我們的routes,然後一個函數new一個router實例,裏面設置了路由滾動配置,註冊了路由,然後調用這個函數在暴露出去

      image-20220610115226370

    • style,放置了一些樣式相關的文件

    • utils,放置了一些其餘配合文件,其中request.js就是二次封裝axios,並放置了請求和響應攔截器

    • permission.js,可以看為權限守衛,這個文件設置了一些路由守衛來做權限管理

      image-20220610115705804

    • settings.js,後台項目配置文件,title可以改我們的網頁標題

      image-20220610115839096

      image-20220610115849455

      fledHeader可以控制我們的表頭是否固定

      image-20220610115925111

      image-20220610115943656

      slidebarLogo可以控制我們左邊的logo是否顯示

      image-20220610120010557

      image-20220610120028577

  • test,一些測試文件

  • 開發環境三大配置文件,可以被webpack檢測到,分別是開發環境、上線環境和測試環境

    image-20220610120412707

    裏面的這個配置裏面的內容可以在通過 process.env來獲取,根據不同的環境獲取不同的內容

    image-20220610120459621

    image-20220610120519499

    用處:根據不同的環境接口路徑也會不同

    image-20220610120625458

  • postcss.js,css相關配置文件

    image-20220610121547864

4.登錄業務

他已經做好我們需要去修改,它採用的是elementUI的組件,所以越學後台項目就會越對elementUI一些組件越來越熟悉,登錄業務整體由一個form組件完成,上面的model表示收集賬號密碼,rules表單驗證規則

image-20220611205635336

繼續深入可以看到裏面表單的每一項是由el-form-item組成,所以要注意 一般el-form和el-form-item是配套使用的

image-20220611211917161

然後看到他的點擊登陸的操作

image-20220611212150413

點擊登錄按理應該是派發請求,獲得token等,邏輯全在函數裏面

image-20220611212815349

繼續走,看到他的actions裏面login這個處理函數,先是獲取用戶名和密碼,然後做了一個因為後面這個login是封裝的登錄請求函數,所以會返回一個promise,反正就跟我們原來的async加await一樣,判斷登錄成功失敗,只是我們的技術更新,那個時候async還沒出來

image-20220611213214338

所以可以改改

image-20220611213607775

換成我們自己的真實接口地址

image-20220611215823793

這裡一改封裝的axios請求響應攔截器也要改

baseurl不變

image-20220611220007227

請求頭的變量名跟後端溝通好的

image-20220611220036041

響應頭要注意成功不一定是20000也有可能200

image-20220611220118209

修改請求服務器,並且匹配規則為我們的baseUrl,但是服務器裏面沒有這個路徑,所以要路徑替換

image-20220611220805699

5.退出登錄

位於layout組件的navbar組件裏面

image-20220612120924017

image-20220612121034646

三.路由的搭建

首先我們的模板除了主頁之外都可以刪掉

image-20220612125650928

image-20220612125730153

這個時候啟動會發現報錯,都是路由裏面的,原因是因為路由還註冊這些刪掉的組件

image-20220612125828609

進入路由刪掉已經刪掉的組件配置就可以啟動成功

然後可以看到我們要做到的效果

image-20220612122311898

首先首頁的名字是通過路由元信息來改,後面那個是旁邊的圖標可以用svg也可以用elementUI的icon

image-20220612130106576

然後先做商品管理,先去views創建組件

image-20220612130423264

去路由註冊,注意我們這裡按照他的規矩來,一級路由Component都是layout,只要搞准這一點,後面該怎麼弄怎麼弄,name、meta

image-20220612134009462

然後繼續他下面的二級路由

image-20220612134309026

有一個小bug(spu和屬性這邊太近了),這個樣式在哪裡改

image-20220612134333121

將他的名字改回來,組件裏面其實是叫app-main

image-20220612134414450

image-20220612134458402

image-20220612134525386

1.品牌管理靜態組件

首先一個添加按鈕

image-20220612141924901

然後用到一個表格,裏面table-column是每一列的意思,這裡需要四列

image-20220612142107531

修改單個列的寬度,並且居中顯示,整個表格有邊框

image-20220612142539201

下面是一個分頁器

首先我們需要的數據,當前頁、總共數據、每頁顯示多少數據

image-20220612143202872

繼續往下是一個數組,他可以選擇每頁顯示多少數據,就是你可以選擇一頁顯示3條或者5條或者10條,後面這個layout是分頁器的布局,我要讓total、sizes顯示在後面就放到後面來,注意怎麼居中,怎麼讓total、sizes到達的最右邊

image-20220612143453525

最後連續頁碼用pager-count,但是它是表示 頁碼 的總數量,比如我為七,那麼連續頁碼應該是5,頁碼個數總共就有七個

image-20220612143827407

我為9,除去前後兩個,中間連續頁碼就為7

image-20220612143858767

2.品牌管理列表展示

涉及到接口相關

image-20220612173034678

這裡不同vuex來做,那就要做一個全局接口管理

image-20220612173215603

因為我們後續應該配合分頁器來做,所以封裝一個函數,直接調用,而且我們的當前頁碼等數據應該是活的

image-20220612173723824

數據拿過來

image-20220612174805273

前面說過el-table有動態數據現在就可以將動態數據綁定在這上面

image-20220612175715349

可以發現我們原來定好的列,數據綁定上來展示三條數據就是三行

image-20220612175748347

添加內容

序號 type

image-20220612175941995

名稱 不用寫前綴list prop

image-20220612180233977

品牌logo,這裡要注意我們需要添加圖片標籤來放圖片,但是這裡是組件標籤,所以就要用slot插槽來做,並且子組件那邊會傳回來兩個數據直接解構賦值獲得,注意這兩個變量名字是固定的

image-20220612180853967

下面操作,要添加兩個按鈕所以也需要slot

image-20220612181157576

跟分頁器連動起來

首先數據要綁定上,單向綁定

image-20220612182117278

然後分頁器有一些事件

  • current-change 當前頁發生變化會觸發,她就接受一個參數pager,就是你當前點擊的這個頁碼

    image-20220612182625164

    image-20220612182629989

  • size-change pageSize 改變時會觸發 ,他也會接受一個參數limit,就是當前一頁展示幾條數據

image-20220612183031254

Tags: