vue大型電商項目尚品彙（後台終結篇）day06 重磅！！！

自此整個項目前後台，全部搭建完畢。
今天是最後一天，內容很多，而且也比較常用，一個圖標類數據可視化，一個後台的許可權管理，都是很經典的類型。

一.數據可視化

1.簡介

專門的一門學科，有專門研究這個的崗位，將數據以各種圖形進行展示

image-20220622164009176

Echarts只能2D，three.js可開發3D

2.canvas繪製線段

canvas是H5新增的一個 標籤，它本身沒有繪圖能力，就像一張白紙，繪製工作須在js完成，就像畫筆

  • 首先canvas默認就會有寬高，並且瀏覽器會當做圖片去處理

image-20220622171002292

  • 並且往這個標籤裡面添加任何文字以及標籤都沒有意義

  • 這塊畫布的寬高有標籤裡面的width和height來決定，切記不能通過樣式來修改

image-20220622171423353

image-20220622171429778

  • 然後畫布裡面的所有操作，繪製圖形還是顯示文字都需要通過js來完成

    首先獲取畫布，然後調用他的getcontext方法

image-20220622173837340

現在所有的操作都由上下文context來完成

一個線段的起點，moveTo

其他點的設置，lineTo

image-20220622174045397

繪製出來但是並沒有出現，stroe方法開始畫

image-20220622174126112

image-20220622174135415

其他點可以多條

image-20220622174242423

image-20220622174252223

再通過closePath方法，可以從終點回到起點

image-20220622174340066

image-20220622174346998

通過fillStyle屬性和fill方法可以設置內容裡面的顏色等

image-20220622174548193

image-20220622174552413

你如果只是想要線條的顏色，strokeStyle屬性還有lineWidth可以設置線條寬度

image-20220622174723076

image-20220622174727612

需要注意的是，這個全程都是圖片並不是DOM元素，是可以下載下來的

3.canvas繪製矩形

兩種方法

  • 方法一：通過strokeRect方法，四個參數分別表示x軸距離畫布多遠，y軸距離畫布多遠，然後是他的寬高

    image-20220622175336991

    image-20220622175340962

  • 方法二：fillRect，跟上面一樣，區別就是這個可以填充顏色而且默認為黑色

    image-20220622175424821

    想改變顏色就通過上面的方法，fillStyle和fill，注意必須寫在繪製前面

    image-20220622175511895

4.canvas繪製圓形

要繪製原型需要用到兩個方法，beginPath表示開始繪製，are表示這個圓的一些參數，一共有六個參數，後面會詳細說說，這裡先記到結束角度一般為2*Math.PI表示360度

image-20220622211925366

image-20220622212140080

image-20220622212145558

下面來詳細說下這幾個參數

image-20220622212823102

第一二個是圓心距離畫布的一個位置，第三個是半徑，有了這三個參數，可以確定圓心到半徑的一條線

image-20220622212440205

重要的是第四個和第五個參數，一個是開始角度，和結束角度，可以想一下，剛才說2×PI的角度為360度，那我們起始角度為0，也就是這條線的終點，那麼結束角度是不是可以算出來，360/2/PI,大概在六十度左右，就是我們這裡一個基礎的角度，也就是1

image-20220622213038182

image-20220622213050007

現在就得出了我們基本上一個要繪製的路線，接下來是否逆時針，如果為逆時針那麼就從起點逆時針到終點，就是這樣的

image-20220622213148156

如果不逆時針

image-20220622213205829

5. 畫布清除與繪製文字

用到方法 clearRect四個參數分別是，清楚的x、y坐標，以及清除的寬和高

image-20220622214006623

image-20220622214012133

然後就是繪製文字，用到 fillText，三個參數，文本內容，橫坐標和縱坐標

image-20220622214127676

image-20220622214132065

設置字體大小以及顏色，.font（必須兩個參數用空格隔開，第一個是大小第二個是字體格式）和fillStyle

image-20220622214338081

image-20220622214345712

6.柱狀圖案例

準備好一切後，開始繪製，首先是標題

image-20220622220429915

然後開始繪製柱狀圖外圍

image-20220622220800836

image-20220622220805827

然後開始每一條橫向的線分布

image-20220622221156352

image-20220622221202179

然後是下面有一些凸出來的線段

image-20220622221628197

image-20220622221634765

然後是一些字體的擺放

image-20220622222249580

image-20220622222254484

最後放我們的矩形圖

image-20220622223207688

需要注意的就是填充顏色不需要再加fill（），不然就是所有可以添加顏色的都會添加上，像什麼字體之類的

image-20220622223300730

7.svg基本使用

可縮放的矢量圖

image-20220623094725827

  • 首先svg標籤包裹，跟canvas一樣他也有默認的寬高，跟canvas不同的是它是圖片，而這個不是點陣圖，是矢量圖不會失真但是無法下載保存

image-20220623095712681

不同的是他的寬高需要樣式來改，並且要繪製任何圖形都是在這個標籤裡面寫其他的標籤

  • 創建直線

image-20220623102944193

注意如果要繪製出來還需要添加stroke表示線條的顏色

image-20220623103229434

image-20220623103234474

  • 創建折線

    image-20220623103557671

    一般用這種寫法，但是你會發現繪製出來會填充顏色

    image-20220623103811516

    image-20220623103814989

    需要用到 fill-opacity和stroke線條顏色配合完成只有折線的效果

image-20220623103941409

image-20220623103947651

  • 創建矩形

    image-20220623104238979

    這個同樣也會被填充顏色，老套路

    image-20220623104430843

    image-20220623104435630

    但是需要注意的是如果要使填充顏色換個顏色用到fill

image-20220623104612051

所以fill是填充顏色，stroke是線條顏色，fill-opacity是顏色透明度

  • 圓

    image-20220623104709336

    image-20220623104812475

    image-20220623104818224

  • 橢圓

    橢圓也可繪製圓

    image-20220623104909965

    如果要繪製圓，x和y軸的半徑都要相等

    image-20220623105222818

    image-20220623105228874

    不相等就是橢圓

    image-20220623105247912

    image-20220623105254844

  • 多邊形

    image-20220623105349581

    image-20220623105519996

    image-20220623105525316

  • 創建任意圖形

    image-20220623105610434

    image-20220623105955594

    image-20220623110000842

二.Echarts

1.基本使用

所有配置項以及準備工作可參考Echarts文檔

引入在線echartsjs文件，然後需要定義一個盒子

image-20220623144834540

當我們引入Echarts之後其實就已經有了Echarts這個對象了，接下來就是獲取這個盒子並且通過 Echarts上面的init方法來初始化這個盒子讓它成為Echarts的一個實例

image-20220623145052441

image-20220623145058440

然後就可以開始繪製，繪製用到Echarts上面的一個方法setOption裡面是一個對象

首先可以傳入我們的title標題，副標題subtext、居中顯示left為center、包括顏色的設置，這些都是設置標題部分

image-20220623150149659

image-20220623150154545

接下來重要的圖，先定義一個x軸和一個y軸，分別是xAxis和yAxis

image-20220623150348022

image-20220623150356785

xAxis定義數據：接下來重要的數據 ，data為一個數組，裡面每一項就是我們底部坐標軸的每一項

image-20220623150722959

image-20220623150729439

圖表的數據series也是一個數組，也可以指定你這個圖以什麼形式展示，並且對應上面每個名字的數據是多少

image-20220623151001750

image-20220623151007060

如果我要讓y軸的坐標軸顯示，

查看參考文檔

image-20220623151146151

包括我要有像x軸這樣的刻度

image-20220623151315101

image-20220623151319388

2.展示多個圖表

要在一個頁面展示多個圖表就要準備多個容器，並且要創建多個實例來繪製

image-20220623152320527

這裡注意子標題的顏色subTextStyle

image-20220623152341529

這次換成個折線圖，series裡面的type line

image-20220623152458068

image-20220623152503289

3.一個容器顯示多個圖表

其實關鍵靠的就是series這個配置項，一個對象就是一個圖表

image-20220623154538719

image-20220623154543475

詳細說一下餅狀圖

首先可以在旁邊顯示一些文字出來，那麼餅狀圖的數據每一條就需要寫為對象形式

image-20220623154831987

image-20220623154837578

然後他的大小包括位置這些都可以改

image-20220623155027765

image-20220623155032630

你會發現有一些字體不見了，可以用 radius來設置餅狀圖的半徑，因為這裡是由於圖太大，文字就自動隱藏了

image-20220623155143043

image-20220623155152630

4.數據集dataset（新特性）

比如像我們剛才這樣一個容器想要顯示多個圖表除了series配置，還可以用dataset字符集

在外面定義一個數據，必須是雙數組形式

第一個參數是我們下面x軸的名字，後面一次寫入這個名字對應的各項數據，注意是他一個人的數據，包括折線圖，柱狀圖，餅圖等

由於餅狀圖除了自己的數據，還有名字所以他一個人要傳兩個數據

image-20220623161724813

剩下的同理

image-20220623161822865

然後就進入Echarts內部配置，dataset的source這個屬性為我們的data數據

image-20220623162008353

就這樣我們的數據就可以上來

image-20220623162021782

但其實還沒有完成，還需要通過每一個圖的series裡面每一項有個 encode這個配置項，將其與我們的data綁定才能使數據對應展示，因為現在的餅狀圖名字都不對

表示維度1映射到y軸

image-20220623162739092

image-20220623162811459

對於餅圖有兩個關鍵的配置itemName和value

image-20220623162949760

image-20220623162954475

image-20220623163024183

image-20220623163028858

image-20220623163037051

5.內置組件

首先理解一下什麼是Echarts的組件

前面碰到的xAxis、yAxis、dataset等這些都可以看成是他的組件，在Echarts還有很多組件

image-20220623165950980

  • 首先 tooltip，它是提示組件，當滑鼠移到圖上面會有一些提示出現
  • image-20220624090226630

image-20220624090109452

  • legend組件，它是切換組件，比如一個容器有多個圖，我就可以直接點擊這裡切換，當然要正常使用需要在series裡面將每個圖添加name中英文皆可

image-20220624090540094

再在legend的data屬性來一個數組，就為每一個name

image-20220624090602262

image-20220624090614339

  • toolbox，它是一個工具欄，其中包含下載這個圖、縮放、還原等多個功能

    image-20220624090917460

    image-20220624090908938

  • 然後還有 grid，它是用來控制整個圖在這個Echarts容器裡面的大小

image-20220624091124967

image-20220624091131044

6.坐標體系

  • 散點圖

    image-20220624092233008

    其他跟原來沒多少差別，最主要的是series，type為散點圖scatter，而且數據為二維數組，也就是每個點的位置

    image-20220624093134830

    你會發現可能散點分的比較開，感覺有點亂

    image-20220624093201283

    可以給 xAxis添加一個屬性type：category，表示x軸數據從series當中來適當取捨

    image-20220624093436160

    image-20220624093500362

  • 雙坐標系

    image-20220624092609350

    雙坐標系，就是有兩條坐標系，最大的改變就是 哪個軸要兩條，就把他由原來對象形式改為數組，並且放兩個對象，每個對象就是一個坐標

    直接寫是沒有效果的，需要設置將坐標軸顯示出來

    image-20220624093849132

    image-20220624094113064

    還有一個步驟，雙坐標軸設置來是有意義的，我要讓柱狀圖用到前面的坐標軸，折線圖用到後面這個，yAxisIndex屬性寫在series每一個圖裡面，寫的其實就是坐標軸的索引，因為他現在是一個數組了，寫誰你就應用誰

    image-20220624094621337

    image-20220624094628608

三.Home首頁

1.card靜態組件

image-20220624094957664

完成上面四個小卡片的布局，大致結構都相同所以要復用一個組件

但是這裡一排顯示多個且有響應式布局，所以要用到餓了么layout布局

image-20220624112222685

每個card有個card組件，內部分為頭部，圖標，數據，charts，尾部五個部分，其中頭部、圖標、數據只是傳個數據進來各自進行展示對應的數據，但是charts和尾部不一樣，因為他們結構都不同，所以這兩個部分要用到插槽

image-20220624113221230

這裡要注意我們如果在子組件插入slot，那麼定義結構是在父組件，如果我要保持父組件的乾爽，所以這裡還要來一個孫組件

image-20220624113424577

最終布局

父級

image-20220624123310194

子級

image-20220624123319665

孫級

image-20220624123332467

image-20220624114654850

  • 頭部數據

image-20220624115404058

注意這邊小圖標準備用svg來做，但是還是要用阿里圖標庫，只是這一次直接複製svg程式碼

image-20220624115704706

image-20220624115657247

image-20220624115815679

  • 然後data這部分也是通過外部數據傳入

image-20220624120026666

  • 然後是slot傳入一些內容，這裡要注意我們用的具名插槽，首先slot要設置name，同時使用這邊template要把slot設置為你的name

image-20220624123828888

image-20220624123842857

這裡先做第一個card的內容，後面的Echarts後面再做

  • 最後一個部分footer，也要用到插槽

image-20220624124242337

image-20220624124247322

2.折線圖

插槽用上，單獨將其做成一個組件

image-20220624154923109

注意Vue怎麼來用Echarts的

先下載安裝，然後在組件導入，注意導入方式

image-20220624155935364

我們應該是頁面一載入就會有這個圖，所以邏輯可以寫在 mountted裡面

有了vue的好處，就可以直接用ref來初始化

image-20220624155244397

簡單來一些數據，繼續微調

image-20220624160002842

首先x和y軸線不需要，其次我們沒有題目，沒有軸線，所以圖基本佔到整個容器大小，調整圖的大小用組件grid

讓他的上下左右都為0，同時配合 x軸type=category

image-20220624160437925

image-20220624160444289

然後還要去軸點 itemStyle，包括線條顏色 lineStyle，還有線條下的區域顏色 areaStyle

image-20220624160852922

image-20220624160920777

最後線條區域顏色還可以設置漸變option.color

image-20220624161310915

image-20220624161331481

3.柱狀圖和進度條

創建組件並導入

image-20220624163441846

image-20220624163447211

然後是進度條，其實進度條就是柱狀圖，只是柱狀圖的數據只有一個

image-20220624163757434

要改變的第一點，需要將category轉移到y軸來

image-20220624163823906

然後調整bar寬度 barWidth

image-20220624164007258

image-20220624164012131

然後比較重要的一點，可以看到我們雖然設置了數據但是進度條並沒有達到實際的值，給x軸設置個最小值0，最大值100即可

image-20220624165051177

繼續bar背景顏色 backgroundStyle

image-20220624165250595

image-20220624165255661

最後完善會有一個豎線，這其實是bar上的文本 label

默認是這樣

image-20220624165638010

通過 formatter轉換成|，再通過 position可改變label的位置

image-20220624165909246

image-20220624165914301

4.sale組件

4.1上部分

card組件包裹，上下兩個部分

image-20220624172919591

上部分左邊一個新組件 tab欄，右邊一個日期組件

image-20220624173735614

image-20220624174138564

然後我想默認進來就是第一個標籤卡

image-20220624174653933

image-20220624174714681

內容的布局，用layout

image-20220624174807719

4.2中部分

完成下面內容的布局，首先左邊的柱狀圖，可以在Echarts官網找合適的模板

image-20220624181621281

修改布局

image-20220624181758402

然後是右邊的布局

注意一些css的寫法

image-20220624182727686

4.3下部分

切換修改標題

通過收集的值，監視屬性來做

image-20220625093329222

image-20220625093455019

image-20220625093517148

然後日期選擇這邊，通過點今日本周等會對應出來一些日期

image-20220625093638201

他也可以收集值，但是要注意他的值收集形式為一個數組，因為這裡有兩個日期

image-20220625093821826

image-20220625093830991

要注意正常的直接收集，他得值有一些出入

image-20220625094007888

用 value-format可以格式化收集的值

image-20220625094238235

image-20220625094243625

  • 今日

    image-20220625094858354

  • 本周

    由於這些邏輯用原生比較麻煩，採用插件 dayjs day（）

    image-20220625100643367

  • 本月 startOf（）endOf（）

    image-20220625100818347

  • 本年

    image-20220625101006416

5.observe組件

image-20220625101105255

先完成左右兩邊的布局

image-20220625112402403

然後是左邊搜索的布局，分為四個部分，頭部、內容、表格、分頁器

  • 頭部

    image-20220625113738946

    然後是三個點有個下拉菜單，組件Dropdown

image-20220625113944623

  • 內容

    單列為一個組件

    image-20220625115225072

    image-20220625120942159

  • 表格

    注意這裡表格帶有排序功能，上組件有這個表格

    image-20220625121408268

  • 分頁器

    image-20220625121547007

image-20220625121557815

然後右邊部分

首先頭部

主要右邊用到一個組件 radio

image-20220625122754661

然後是下面內容為一個餅圖，樣式照樣是去官網查找實例

image-20220625123059517

首先讓label顯示在外面 position

然後新功能我如果想要滑動一個就讓餅圖中間出現這個名字，這其實是通過title和subtile做到的

先把title移動到中間

image-20220625123534196

image-20220625123539610

然後我們的echarts其實是有事件的

滑鼠事件

還是寫在option裡面

image-20220625123752714

這個參數可以獲取到我們滑動的這個值在她的data屬性裡面

image-20220625123946959

image-20220625123953760

6.動態展示mock數據

將我們首頁的數據全部用數據展示，在mock文件夾創建一個home的mock數據生成

image-20220625150439112

然後需要在index導入

image-20220625150512923

但是使用這個後台模板有一個很關鍵的步驟，代理伺服器這裡但是下下來是有的，後面被刪了，要開啟mock數據

image-20220625150759318

然後還有一個要配置，mock-server裡面有一個配置項

image-20220625150913771

為什麼要改掉這個，因為我們真實伺服器才會有這個前綴，會去找真實伺服器的代理伺服器

image-20220625151117099

所以要改掉

image-20220625151144082

image-20220625151200073

然後我們就要去創建一個發起mock請求的axios請求攔截器

直接複製原來的一份

image-20220625151308840

把前綴改掉即可

image-20220625151328811

這個時候所有前置工作都做完了，發起請求數據即可，這一次我們就不用api來發了，用vuex來發

image-20220625152037434

登錄不上，先把vue.config的before刪除了登陸上了在添加

存到倉庫

image-20220625155014505

首頁獲取

image-20220625155331237

就可以用這些數據了，首先一開始就要展示

image-20220625160035996

然後通過切換顯示不同的數據，之前做了一個監視屬性，監視的title，所以可以繼續在這裡面完成

image-20220625160124470

image-20220625160458019

四.許可權管理

1.靜態組件

導入之後，設置路由

image-20220625170523063

先放在這裡正常路由裡面

image-20220625172338343

接下來靜態組件有了，再去弄介面

image-20220625174236196

image-20220625174246533

主要說一下這裡面有兩個新組件

一個是tree這樣的樹形結構

image-20220625174340907

一個是我們表格有可以下拉的表格這種組件

image-20220625174617769

2.業務分析

要做到什麼用戶能查看後台什麼內容，對應的許可權，最核心的部分就是做到路由的管理，不同的用戶訪問能夠有不同的路由

首先我們點擊登錄會去派發一個請求

image-20220626170808097

這個請求會返回一個token，然後將token存儲起來

image-20220626170855706

然後有一個獲取用戶資訊的函數，將token帶進去，成功會返回一些數據

image-20220626171427423

可以看到這一次伺服器返回的數據

image-20220626172703819

其中有我們的用戶名和頭像，但是最重要的還是剩下三個，buttons一些按鈕的資訊也就是按鈕許可權用的標記，roles是我們角色的資訊，routes就是最重要的我們不同的用戶可以展示哪些菜單的標記

所以我們可以將下面的一些資訊都幹掉，存儲用戶名和頭像可以用我們的來存

image-20220626173033969

image-20220626173112271

image-20220626173231721

3.完成菜單許可權

接下來最重要的

完成菜單許可權最重要的就是分開路由，一般可以分為三個路由

第一類：常量路由，也就是不管什麼角色都可以看到的路由，比如404、首頁、登錄頁等

image-20220627090709547

第二類：非同步路由，不同的角色，經過篩選出來的路由，路面放的是一些需要不同角色才能查看到的路由

商品管理、許可權管理等

image-20220627091014994

第三類：任意路由，當路徑出現錯誤重定向404

image-20220627091108950

路由分清楚了，然後要做的一個步驟就是篩選路由，將我們需要許可權的路由也就是第二類，和我們伺服器返回的有什麼許可權的路由進行一個篩選

這個過程是在store裡面來做，因為伺服器返回來的路由是在這裡面

導入第二類路由

image-20220627091352429

這裡的思路是這樣的，先在倉庫放一個最後篩選出來結果的路由，然後在我們剛才獲取伺服器data這裡再來commit一個，主要是他得值為一個函數，函數裡面就來篩選，將我們非同步路由和伺服器返回的routes進行一個對比，同時用到遞歸將其子級路由也一起篩選，最後返回的結果等於這個篩選結果路由即可

首先放一個結果路由

image-20220627091759582

然後獲取到伺服器數據下面，再來commit，注意這裡需要將我們的參數傳進去

image-20220627093551020

那麼我們mutations就要有這個函數

image-20220627092050564

繼續去定義我們的函數

篩選非同步路由，看非同步路由是否等於自己所能許可權的路由

image-20220627092442451

image-20220627092756581

但是還沒完，因為這只是篩選了第一層的路由許可權，還要遞歸把所有的都篩選出來

image-20220627092934247

可以看到現在已經收集好了，各自對應許可權的路由

下面又是一個關鍵步驟，因為我們的路由始終是常量路由

image-20220627094720507

所以這個時候就需要把常量、非同步、任意結合一起來

把他們都引入

image-20220627094755010

結合起來

image-20220627094904770

然後需要給路由器添加路由，因為前面也說過不然永遠都是你那裡的常量路由

image-20220627095654772

image-20220627105327294

image-20220627095847276

這個時候專屬於這個模板的小問題

這個作者在對sliderbar遍歷編的是路由裡面的常量路由

image-20220627095208620

image-20220627095214808

所以要轉換為我們的計算出來的路由

image-20220627095411603

image-20220627095425929

4.按鈕許可權

說白了什麼叫做按鈕許可權，就是針對於不同的用戶對於不同的按鈕有可見和不可見的操作

比如我現在添加了一個新角色

image-20220627111649793

給一個用戶設置這個角色

image-20220627111729238

然後我添加一個菜單，注意菜單的許可權值就是我們這個組件的路由name

image-20220627111826324

繼續添加二級，原理同上

image-20220627111916563

給二級菜單添加相應的功能

image-20220627112026906

image-20220627112111302

然後給我們按鈕許可權人員這個職位分配權力

image-20220627112218944

這裡要注意一下，我們這裡採用的tree組件，我們點擊保存肯定是要將我們勾選的對應的許可權發到介面後端保存的，但是餓了么這個tree組件並沒有相應的屬性和方法能夠讓你知道你勾選了哪些，所以需要修改ElementUI源碼

image-20220627112504576

然後添加好後，在views添加我們的test路由組件，並在 非同步路由裡面配置，name與我們剛才配置許可權值一致

image-20220627112902294

然後我們按鈕的許可權怎麼來操作，讓對應的按鈕可見可不見，還記得伺服器返回來的buttons嗎

image-20220627113139501

這個時候登陸我們的按鈕許可權人員這個號

首先除了首頁，就是商品和測試

image-20220627114039118

然後對應的許可權按鈕有些可見，有些不可見

image-20220627114056741

image-20220627114102662

Tags:

VirMach 便宜 VPS