1.分析項(xiàng)目

項(xiàng)目大概可以分為8個(gè)部分

1.基礎(chǔ)配置

2.登錄模塊

3.用戶模塊

4.權(quán)限管理模塊

5.商品模塊

6.訂單模塊

7.數(shù)據(jù)統(tǒng)計(jì)模塊

8.打包優(yōu)化

1.基礎(chǔ)配置：

新建一個(gè)vue2的項(xiàng)目，安裝aixos咒循，element-ui颖医，vuex-persistedstate固化插件

對(duì)axios進(jìn)行第一次封裝熔萧，在src下新建unitils文件夾，里面新建一個(gè)request.js文件（名字自定義）

引入axios俺榆，store，element-ui，在axios.create中設(shè)置baseURL基礎(chǔ)路徑上炎，timeout超時(shí)時(shí)間，聲明一個(gè)request變量接收，通過request.interceptors.request.use設(shè)置請(qǐng)求攔截线椰，如果請(qǐng)求成功，判斷vx是否存有token配紫，如果有享扔，就加在請(qǐng)求頭中，如果請(qǐng)求失敗氛魁，通過Promise.reject將失敗的信息返回出去

通過request.interceptors.response.use設(shè)置響應(yīng)攔截，可以先從后臺(tái)返回的狀態(tài)入手，定義一個(gè)code接收后臺(tái)返回的狀態(tài)株扛，先判斷后臺(tái)返回的消息是否為‘無效token’（這里一般是和后臺(tái)對(duì)接好了返回40001等等狀態(tài)），如果是旬蟋，則給予對(duì)應(yīng)提示拦惋，然后讓頁(yè)面跳轉(zhuǎn)到登錄頁(yè)言秸。

如果想更細(xì)一點(diǎn)查排，繼續(xù)判斷400,401等，然后給對(duì)應(yīng)的提示

可以對(duì)錯(cuò)誤信息精確描述，比如后端連接異常或者請(qǐng)求超時(shí)玫锋，也可以給對(duì)應(yīng)的請(qǐng)求节沦，axios的重復(fù)請(qǐng)求我們下面再說

我們需要定義三個(gè)方法來幫助我們實(shí)現(xiàn)

在響應(yīng)請(qǐng)求中調(diào)用供炎，檢查是否存在重復(fù)請(qǐng)求，如果有就取消蜓氨，然后把當(dāng)前請(qǐng)求信息加入到pendingRequest中

在返回?cái)?shù)據(jù)前移除請(qǐng)求

在錯(cuò)誤信息中移除請(qǐng)求

1

別忘了把我們定義的request導(dǎo)出顷霹。此時(shí)我們axios第一次封裝結(jié)束朵纷，我們可以順帶去store中裝上固化插件

然后對(duì)axios進(jìn)行二次封裝，在與request.js同級(jí)再定義一個(gè)api.js威创，然后引入request.js详炬，定義方法請(qǐng)求后臺(tái)數(shù)據(jù)，比如這里我們定義請(qǐng)求登錄的接口

2.登錄模塊：

在views下建一個(gè)Login.vue組件齐帚，使用element-ui中的form表單

:model綁定成自己定義的表單數(shù)據(jù)摩瞎，也就是用戶名和密碼所在對(duì)象

:rules為自己定義的正則

ref是這個(gè)表單的dom元素

給登錄和重置綁定事件并把綁定的ref屬性傳遞過去

引入我們定義請(qǐng)求登錄接口的方法岸梨，點(diǎn)擊登錄后把定義的表單數(shù)據(jù)作為后端需要的參數(shù)傳遞過去次兆，通過.then進(jìn)行接下來的操作，我們可以去store中定義一個(gè)存儲(chǔ)token的方法怠蹂，順帶也定義了一個(gè)移除token 的方法，比如我們退出登錄后需要用到揩魂，

在頁(yè)面中通過this.$store.commit調(diào)用mutations里的方法忘分，把后臺(tái)返回的token傳過去

我們可以去router中把路由定義一下祖很，順帶放一個(gè)路由前置守衛(wèi)笨鸡，在里面我們可以判斷如果將要去的路由不是登錄頁(yè)激涤，那我們可以先獲取vuex中存的token累澡，如果存有token證明用戶登陸過蕊梧，則讓其跳轉(zhuǎn)旅东，反之荤牍，返回登錄頁(yè)，如果要去的是登錄頁(yè)跌前，直接放行茎芋，注意這里router.beforeEach要放在我們const router的下面寫铡原，否則會(huì)因?yàn)檎也坏絩outer報(bào)錯(cuò)，然后通過this.$router.push('/home‘)跳轉(zhuǎn)到home頁(yè)面

登錄頁(yè)效果，以及登錄成功后的頁(yè)面

接下來我們來寫跳轉(zhuǎn)后的home頁(yè)面库说，左側(cè)菜單對(duì)應(yīng)的路由應(yīng)該是動(dòng)態(tài)生成的啰挪，這里我們是手寫額下硕，后面會(huì)再寫一遍告訴大家如何用動(dòng)態(tài)路由實(shí)現(xiàn)誉尖，現(xiàn)在我們可以根據(jù)左側(cè)菜單返回的數(shù)據(jù)定義路由，把home當(dāng)作父級(jí)路由，把左側(cè)菜單欄跳轉(zhuǎn)的路由寫成子路由

組件位置我們也可以放在對(duì)應(yīng)的文件夾內(nèi)

此時(shí)我們回到home頁(yè)面棒口，寫好頭部茎毁，給退出登錄綁定事件

從element-ui引入一個(gè)container容器

isCollapse為控制左側(cè)菜單欄的顯示隱藏

：default-active為默認(rèn)顯示的路由

router為開啟路由模式

菜單的顯示使用一個(gè)雙重for循環(huán)碧库，

:index為唯一標(biāo)識(shí)伞鲫，接收一個(gè)字符串芙贫，所以我們用+拼接一個(gè)空字符串

至于內(nèi)層for循環(huán)的:index,因?yàn)槲覀兌x的子路由不加'/'拣挪，所以我們用/Home/ + obj.path拼接一下

別忘了在右側(cè)的el-main中加入router-view笼平，否則顯示不了子路由的內(nèi)容

接下來是邏輯部分，引入我們?cè)赼pi.js中定義的請(qǐng)求左側(cè)菜單接口的方法

isCollapse是控制左側(cè)菜單的顯示與隱藏驯耻，sideTabList用來存儲(chǔ)后臺(tái)返回的左側(cè)菜單欄數(shù)據(jù)帘靡，arr是我定義的一個(gè)圖標(biāo)數(shù)組筒扒，給部分菜單加一個(gè)圖標(biāo)，我們?cè)赾reated中發(fā)送這個(gè)請(qǐng)求，把返回的數(shù)據(jù)給sideTabList賦上工碾，

當(dāng)我們點(diǎn)擊退出時(shí)，提示是否退出火惊，如果是，則調(diào)用vuex的方法清除token，并退回到登錄頁(yè)按灶，至此，我們home頁(yè)結(jié)束羡亩，登錄模塊完成

1

3.用戶模塊：

引入我們需要用到的接口吉殃，以及我們自己封裝的一個(gè)面包屑組件

tableData為返回的表格數(shù)據(jù)

isShow為控制點(diǎn)擊分配權(quán)限時(shí)模態(tài)框顯示與隱藏的變量

title為點(diǎn)擊添加瓦灶，編輯的提示語句刃泡，因?yàn)槲覀兙庉嫼吞砑佑玫氖峭粋€(gè)模態(tài)框烘贴，所以我們用title來判斷是添加還是編輯

who為下拉框默認(rèn)的內(nèi)容

dialogFormVisible為控制點(diǎn)擊添加或編輯時(shí)模態(tài)框顯示與隱藏的變量

total后臺(tái)返回的總數(shù)據(jù)條數(shù)

form為綁定后臺(tái)需要的用戶名，密碼，郵箱汽纠，手機(jī)號(hào)永罚，

rules正則

person為下拉框選擇完成后該項(xiàng)的id

roleList為角色列表

搜索部分官扣，定義一個(gè)obj惕蹄，里面有后臺(tái)需要的關(guān)鍵字，當(dāng)前頁(yè)，每頁(yè)多少條撩荣，給搜索綁定事件

定義一個(gè)渲染的方法getTable,這里只有一上來調(diào)用傳了個(gè)1，是因?yàn)橐簧蟻頃?huì)有個(gè)獲取數(shù)據(jù)成功提示朽合，又不想別的請(qǐng)求發(fā)送后繼續(xù)有這個(gè)提示，于是只有一上來傳了個(gè)真值

然后調(diào)用角色列表賦值，點(diǎn)擊搜索時(shí)磺樱，再調(diào)用一次渲染方法即可

點(diǎn)擊添加，模態(tài)框顯示，把title改成添加用戶

點(diǎn)擊編輯把title改成編輯憨闰，模態(tài)框顯示，數(shù)據(jù)回填

模態(tài)框關(guān)閉時(shí) ，數(shù)據(jù)清空

點(diǎn)擊確定添加或編輯，先判斷title是編輯還是添加用戶变姨，然后傳入后臺(tái)對(duì)應(yīng)的參數(shù)

分頁(yè)部分

@size-change為每頁(yè)多少條改變時(shí)觸發(fā)，比如我們一上來每頁(yè)只讓顯示兩條扩氢，當(dāng)我們切換至4條每頁(yè)時(shí)就會(huì)觸發(fā)

@current-change為每頁(yè)改變時(shí)觸發(fā)，比如我們一上來為第1頁(yè)双饥。當(dāng)我們點(diǎn)擊第2頁(yè)時(shí)就會(huì)觸發(fā)

：page-sizes為可供選擇每頁(yè)選則條數(shù)的選項(xiàng)

：page-size為每頁(yè)顯示多少條

total就是一共多少條

分配權(quán)限

點(diǎn)擊分配權(quán)限彈出模態(tài)框阀趴，數(shù)據(jù)回填刘急，選則完畢時(shí)通過some方法找到對(duì)應(yīng)數(shù)據(jù)把id村人person

點(diǎn)擊確定添加時(shí)，傳遞需要的數(shù)據(jù)码邻，完成分配微驶，再渲染頁(yè)面

效果圖：

4 權(quán)限管理模塊：

角色列表：

請(qǐng)求角色列表數(shù)據(jù)，渲染到表格凶杖，編輯添加可以使用同一個(gè)模態(tài)框腾么，綁定動(dòng)態(tài)title判斷添加還是編輯解虱，傳入后臺(tái)要求數(shù)據(jù)完成功能，點(diǎn)擊刪除傳入id完成漆撞。點(diǎn)擊分配權(quán)限彈出模態(tài)框殴泰，發(fā)送請(qǐng)求，請(qǐng)求所有權(quán)限的列表在樹形圖中浮驳，通過遞歸方法把該權(quán)限自帶的權(quán)限回填到樹形圖中，即復(fù)選框呈選中狀態(tài)至会，因?yàn)槲覀冋?qǐng)求所有列表是異步的离咐，點(diǎn)擊分配權(quán)限是同步的，所以會(huì)造成數(shù)據(jù)閃動(dòng)情況奋献，我們可以給彈出框加個(gè)定時(shí)器健霹，讓他也是異步執(zhí)行，最后就是點(diǎn)擊每項(xiàng)顯示標(biāo)簽瓶蚂，根據(jù)樣式糖埋，我們可以把返回的數(shù)據(jù)分為左右結(jié)構(gòu)，右邊的又可以分為左右結(jié)構(gòu)窃这，遍歷到該項(xiàng)下面瞳别，點(diǎn)擊X時(shí)，傳入該項(xiàng)id和該權(quán)限id完成刪除

權(quán)限列表：

請(qǐng)求權(quán)限列表數(shù)據(jù)杭攻，渲染頁(yè)面祟敛，權(quán)限等級(jí)哪里用一個(gè)三元表達(dá)式，根據(jù)返回的level等級(jí)渲染對(duì)應(yīng)的樣式

5 商品管理模塊：

商品列表：

請(qǐng)求商品列表數(shù)據(jù)兆解，其中一個(gè)創(chuàng)建時(shí)間馆铁，可以引入一個(gè)時(shí)間格式化工具，在main..js中定義一個(gè)全局過濾器锅睛，在要格式化數(shù)據(jù)的這里調(diào)用全局的方法完成埠巨，刪除即傳一個(gè)id給后臺(tái)，刪除對(duì)應(yīng)數(shù)據(jù)现拒，點(diǎn)擊添加時(shí)跳進(jìn)添加的頁(yè)面辣垒，引入組件tab和step，第一級(jí)判斷級(jí)聯(lián)菜單三級(jí)是否都選中印蔬，只有都選中才可以進(jìn)行下一步操作勋桶，商品參數(shù)則請(qǐng)求參數(shù)列表，其sel為many，商品屬性sel為only例驹，上傳圖片也需要引入element一個(gè)upload組件捐韩，商品內(nèi)容則需要引入一個(gè)富文本插件

點(diǎn)擊添加商品

分類參數(shù)：

在element中引入一個(gè)級(jí)聯(lián)菜單，把請(qǐng)求回來的三級(jí)分類數(shù)據(jù)在級(jí)聯(lián)菜單中顯示鹃锈，引入一個(gè)tab切換的時(shí)候讓其對(duì)應(yīng)顯示靜態(tài)屬性或者動(dòng)態(tài)參數(shù)奥帘，通過級(jí)聯(lián)菜單的事件。當(dāng)我們選擇完畢仪召，判斷該value綁定的數(shù)組長(zhǎng)度是否為3寨蹋，為3則獲取對(duì)應(yīng)參數(shù)，此時(shí)添加參數(shù)按鈕解除禁用（默認(rèn)禁用）扔茅，可以點(diǎn)擊添加參數(shù)已旧，給對(duì)應(yīng)的數(shù)據(jù)添加參數(shù)，或者屬性召娜，當(dāng)我們點(diǎn)擊參數(shù)或者屬性時(shí)顯示標(biāo)簽运褪，當(dāng)我們點(diǎn)擊添加標(biāo)簽時(shí)，輸入想要的內(nèi)容玖瘸，失焦或者回車添加該標(biāo)簽

商品分類：

點(diǎn)擊添加角色彈出模態(tài)框秸讹，此時(shí)請(qǐng)求2級(jí)分類數(shù)據(jù)，點(diǎn)擊完成或者模態(tài)框關(guān)閉此時(shí)請(qǐng)求三級(jí)分類數(shù)據(jù)雅倒，編輯添加可以使用同一個(gè)模態(tài)框璃诀，綁定動(dòng)態(tài)title判斷添加還是編輯，傳入后臺(tái)要求數(shù)據(jù)完成功能蔑匣，點(diǎn)擊刪除傳入id完成劣欢，這里用到一個(gè)element中的一個(gè)table表格，可以多層展開

6訂單管理模塊：

請(qǐng)求訂單頁(yè)面數(shù)據(jù)裁良，其中一個(gè)下單時(shí)間凿将，可以引入一個(gè)時(shí)間格式化工具，在main..js中定義一個(gè)全局過濾器价脾，在要格式化數(shù)據(jù)的這里調(diào)用全局的方法完成牧抵，刪除即傳一個(gè)id給后臺(tái)，刪除對(duì)應(yīng)數(shù)據(jù)

日期格式化

7數(shù)據(jù)統(tǒng)計(jì)模塊：

報(bào)表頁(yè)面：

引入echarts下載并引入侨把，需要一個(gè)具備大小的容器在mounted中初始話這個(gè)echarts發(fā)送請(qǐng)求犀变，把請(qǐng)求回來的數(shù)據(jù)配置一下，把這個(gè)配置好的數(shù)據(jù)付給echarts實(shí)列座硕，如有需求的話 報(bào)表和頁(yè)面一起縮小可以調(diào)用原生的方法window.onresize弛作，

8項(xiàng)目打包優(yōu)化：

在根目錄下新建env.development涕蜂，env.production文件华匾，方便我們?cè)谏a(chǎn)環(huán)境與開發(fā)環(huán)境切換，npm run build打包，配置vue.config.js中的publicPath: './',改變基礎(chǔ)路徑蜘拉，在public下的html頁(yè)面引入插件的cdn萨西，然后在vue.config.js中抽離，在babel.config.js中取出console.log

1

1

1

1

1

1

11

1

1

1

1

1

1

1

1

1