国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

手摸手,帶你用vue擼后臺(tái) 系列五(v4.0新版本)

graf / 2244人閱讀

摘要:同時(shí)增加了單元測(cè)試,使用了,增加了可視化配置權(quán)限,增加了自定義布局等等,優(yōu)化了原先的權(quán)限方案,支持不刷新頁(yè)面更新路由等等功能。雖然它的初衷是為了單元測(cè)試的,但正好滿足了我們的需求。它會(huì)重寫瀏覽器的對(duì)象,從而才能攔截所有請(qǐng)求,代理到本地。

前言

vue-element-admin 從 2017.04.17提交第一個(gè) commit 以來(lái),維護(hù)至今已經(jīng)有兩年多的時(shí)間了了,發(fā)布了四十多個(gè)版本,收獲了三萬(wàn)多的 stars,遠(yuǎn)遠(yuǎn)的超出了自己的預(yù)期。距離上次手摸手系列教程也已經(jīng)過去了很久,主要因?yàn)椋鹤鳛橐粋€(gè)個(gè)人開源項(xiàng)目,維持它已經(jīng)很難了,所以真的沒啥時(shí)間寫詳細(xì)的教程了,光是維護(hù)項(xiàng)目 文檔 就讓我很頭疼了。也有不少人建議我出付費(fèi)教學(xué)視頻,但我個(gè)人還是更愿意把這個(gè)時(shí)間投入到維護(hù)開源項(xiàng)目之中吧。

本篇教程主要是趁著vue-element-admin發(fā)布了 v4.0 新版本,首先來(lái)簡(jiǎn)單說一下4.0版本做了哪些改動(dòng)和優(yōu)化。后半部分則會(huì)分享一些新的思考和一些小技巧吧。之前幾篇手摸手文章都差不多兩年前的了,但隨著技術(shù)的不斷發(fā)展迭代,很多之前的不能解決的問題也是都是有了新的解決方案的,同時(shí)也會(huì)出現(xiàn)一些新的問題和挑戰(zhàn)。

4.0 做了什么

首先大概說一下4.0版本做了些什么,通過 pull request 可以看出這是一次比較大的升級(jí),有大概 170 多次的 commits,200 多個(gè)文件的改動(dòng)。其中最大的改變是接軌 vue 社區(qū),直接通過 vue-cli來(lái)進(jìn)行構(gòu)建,省去了很多額外繁瑣的配置(下文會(huì)介紹),并修改了之前 mock 數(shù)據(jù)的方案,本地改用 mock-server 來(lái)解決之前mockjs帶來(lái)的各種問題。同時(shí)增加了 jest 單元測(cè)試,使用了async/await,增加了可視化配置權(quán)限,增加了自定義布局等等,優(yōu)化了原先addRoutes的權(quán)限方案,支持不刷新頁(yè)面更新路由等等功能。具體的可看 github release。接下來(lái)我們著重來(lái)分析一下這幾個(gè)功能。

vue-cli@3

本身配置方面沒有啥特別好說的,官方文檔已經(jīng)寫得很詳細(xì)了。這次更新基本上就是基于 webpack-chain 把之前的 webpack 配置遷移了一遍,因?yàn)?b>vue-cli幫你做了很多默認(rèn)配置,所有可以省去一些代碼。當(dāng)然這種out-of-the-box的工具利弊也很明顯,它能快速上手,大部分簡(jiǎn)單場(chǎng)景無(wú)需任何額外配置基本就能用了。但對(duì)于復(fù)雜度高的或者自定義性強(qiáng)的項(xiàng)目來(lái)說,配置復(fù)雜度可能沒有減少太多。它要求你不僅要對(duì) webpack 或者相關(guān)工程化的東西很很熟悉,你還要對(duì)vue-cli做的一些默認(rèn)配置和參數(shù)也有有一定了解,時(shí)不時(shí)要去看一下源碼它到底干了啥,有的時(shí)候它的一些 plugin 出現(xiàn)了問題還不太好解決。而且說實(shí)話 webpack-chain 的書寫也是有些門檻的,大部分情況下我也很難保證自己的配置寫對(duì)的,還好官方提供了inspec功能,能讓配置簡(jiǎn)單了不少。當(dāng)你想知道自己的 vue-config.js 里的配置到底對(duì)不對(duì)的時(shí)候,你可以在命令行里執(zhí)行vue inspect > output.js,它會(huì)將你最終生成的config展現(xiàn)在output.js之中,不過它默認(rèn)顯示的是開發(fā)環(huán)境的配置。如果你想查看其它環(huán)境的配置可以通過vue inspect --mode production > output.js。在寫構(gòu)建配置的時(shí)候這個(gè)功能很有幫助,同時(shí)也能幫助你了解vue-cli在構(gòu)建時(shí)到底幫你做了些什么。

其它還有些需要注意的如:環(huán)境變量 必須以VUE_APP_開頭啊,怎么設(shè)置polyfill啊,怎么配置各種各樣的loader啊,就不展開了,文檔或者社區(qū)都有很多文章了。具體配置可以參考 vue.config.js

這里還有一個(gè)黑科技,看過我之前文章的小伙伴應(yīng)該還有印象,我一般在開發(fā)環(huán)境是不使用路由懶加載的,因?yàn)檫@樣會(huì)導(dǎo)致熱更新速度變慢,具體的可以看之前的 文章,在vue-cli@3中可以更簡(jiǎn)單的實(shí)現(xiàn),你只要在.env.development環(huán)境變量配置文件中設(shè)置VUE_CLI_BABEL_TRANSPILE_MODULES:true就可以了。它的實(shí)現(xiàn)邏輯和原理與之前還是一樣的,還是基于 plugins babel-plugin-dynamic-import-node 來(lái)實(shí)現(xiàn)的。之所以在vue-cli中只需要設(shè)置一個(gè)變量就可以了,是借用了vue-cli它的默認(rèn)配置,它幫你代碼都寫好了。通過閱讀 源碼 可知,vue-cli會(huì)通過VUE_CLI_BABEL_TRANSPILE_MODULES這個(gè)環(huán)境變量來(lái)區(qū)分是否使用babel-plugin-dynamic-import-node,所以我們只要開其它就可以。雖然它的初衷是為了單元測(cè)試的,但正好滿足了我們的需求。

總的來(lái)說,vue-cli對(duì)于大部分用戶來(lái)說還是省去了一些繁瑣的配置的。如果你使用本項(xiàng)目的話,基本也不需要做其它過多的額外配置的。

redirect 刷新頁(yè)面

在不刷新頁(yè)面的情況下,更新頁(yè)面。這個(gè) issue 兩年前就提出來(lái)了,之前的文章里面也提供了一個(gè) 解決方案。在這里分享一下,我目前使用的新方案。

// 先注冊(cè)一個(gè)名為 `redirect` 的路由

// 手動(dòng)重定向頁(yè)面到 "/redirect" 頁(yè)面 const { fullPath } = this.$route this.$router.replace({ path: "/redirect" + fullPath })

當(dāng)遇到你需要刷新頁(yè)面的情況,你就手動(dòng)重定向頁(yè)面到redirect頁(yè)面,它會(huì)將頁(yè)面重新redirect重定向回來(lái),由于頁(yè)面的 key 發(fā)生了變化,從而間接實(shí)現(xiàn)了刷新頁(yè)面組件的效果。

addRoutes && removeRoutes

看過我之前文章的人肯定知道,我目前 vue 項(xiàng)目的權(quán)限控制都是通過 addRoutes來(lái)實(shí)現(xiàn)的。簡(jiǎn)單說就是:用戶登錄之后會(huì)返回一個(gè)權(quán)限憑證Token,用戶在根據(jù)這個(gè)Token去問服務(wù)端詢問自己的權(quán)限,辟如服務(wù)端返回權(quán)限是["editor"],前端再根據(jù)這個(gè)權(quán)限動(dòng)態(tài)生成他能訪問的路由,再通過addRoutes進(jìn)行動(dòng)態(tài)的路由掛載。具體的代碼可見 permission.js

但這個(gè)方案一直是有一個(gè)弊端的。那就是動(dòng)態(tài)添加的路由,并不能動(dòng)態(tài)的刪除。這就是導(dǎo)致一個(gè)問題,當(dāng)用戶權(quán)限發(fā)生變化的時(shí)候,或者說用戶登出的時(shí)候,我們只能通過刷新頁(yè)面的方式,才能清空我們之前注冊(cè)的路由。之前老版本的 vue-element-admin就一直采用的是這種方式。雖然能用,但作為一個(gè) spa,刷新頁(yè)面其實(shí)是一種很糟糕的用戶體驗(yàn)。但是官方也遲遲沒有出相關(guān)的 remove api,相關(guān) issue

后來(lái)發(fā)現(xiàn)了一種 hack 的方法,能很好的動(dòng)態(tài)清除注冊(cè)的路由。先看代碼:

它的原理其實(shí)很簡(jiǎn)單,所有的 vue-router 注冊(cè)的路由信息都是存放在matcher之中的,所以當(dāng)我們想清空路由的時(shí)候,我們只要新建一個(gè)空的Router實(shí)例,將它的matcher重新賦值給我們之前定義的路由就可以了。巧妙的實(shí)現(xiàn)了動(dòng)態(tài)路由的清除。 現(xiàn)在我們只需要調(diào)用resetRouter,就能得到一個(gè)空的路有實(shí)例,之后你就可以重新addRoutes你想要的路由了。完整的代碼實(shí)例 router.js,resetRouter

Mock 數(shù)據(jù)

如果你在實(shí)際開發(fā)中,最理想的前后端交互方式當(dāng)然是后端先幫我們 mock 數(shù)據(jù),然后前端開發(fā)。但現(xiàn)實(shí)很骨感,總會(huì)因?yàn)榉N種原因,前端需要自己來(lái) mock 假數(shù)據(jù)。尤其是我的幾個(gè)開源項(xiàng)目,都是純前端項(xiàng)目,根本沒有后端服務(wù)。 在之前的文章中也介紹過,vue-element-adminvue-admin-template 使用的是 MockJS 和 easy-mock 這兩個(gè)庫(kù)。但實(shí)際用下來(lái)兩者都有一些問題。

MockJs

它的原理是: 攔截了所有的請(qǐng)求并代理到本地,然后進(jìn)行數(shù)據(jù)模擬,所以你會(huì)發(fā)現(xiàn) network 中沒有發(fā)出任何的請(qǐng)求。但它的最大的問題是就是它的實(shí)現(xiàn)機(jī)制。它會(huì)重寫瀏覽器的XMLHttpRequest對(duì)象,從而才能攔截所有請(qǐng)求,代理到本地。大部分情況下用起來(lái)還是蠻方便的,但就因?yàn)樗貙懥?b>XMLHttpRequest對(duì)象,所以比如progress方法,或者一些底層依賴XMLHttpRequest的庫(kù)都會(huì)和它發(fā)生不兼容,可以看一下我項(xiàng)目的 issues,就知道多少人被坑了。

它還有一個(gè)問題:因?yàn)槭撬潜镜啬M數(shù)據(jù),實(shí)際上不會(huì)走任何網(wǎng)絡(luò)請(qǐng)求。所以本地調(diào)試起來(lái)很蛋疼,只能通過console.log來(lái)調(diào)試。就拿vue-element-admin來(lái)說,想搞清楚 getInfo()接口返回了什么數(shù)據(jù),只能通過看源碼或者手動(dòng) Debug 才能知道。

Easy-Mock

這個(gè)項(xiàng)目剛出的時(shí)候用的人比較少,還真的挺好用的。天然支持跨域,還是支持MockJs的所有語(yǔ)法,我在之前也推薦過。但因?yàn)橛玫娜硕嗔?,它的免費(fèi)服務(wù)會(huì)經(jīng)常的掛,可以說天天掛。。。但畢竟人家這是免費(fèi)的服務(wù),也不能苛求什么,官方的建議是自己搭建服務(wù)。如果你的公司整體搭建一個(gè)這樣的 mock 服務(wù)的話也是一個(gè)不錯(cuò)的選擇。但大部分人可能還是沒有這個(gè)技術(shù)條件的。

新方案

所以我一直在尋求一個(gè)更好的解決方案,我也去體驗(yàn)了其它很多 mock api 服務(wù),如 mockapi、Mocky 等等??傊w驗(yàn)都不能滿足我的需求。

v4.0版本之后,在本地會(huì)啟動(dòng)一個(gè)mock-server來(lái)模擬數(shù)據(jù),線上環(huán)境還是繼續(xù)使用mockjs來(lái)進(jìn)行模擬(因?yàn)楸卷?xiàng)目是一個(gè)純前端項(xiàng)目,你也可以自己搭建一個(gè)線上 server 來(lái)提供數(shù)據(jù))。不管是本地還是線上所以的數(shù)據(jù)模擬都是基于mockjs生成的,所以只要寫一套 mock 數(shù)據(jù),就可以在多環(huán)境中使用。

該方案的好處是,在保留 mockjs的優(yōu)勢(shì)的同時(shí),解決之前的痛點(diǎn)。由于我們的 mock 是完全基于webpack-dev-serve來(lái)實(shí)現(xiàn)的,所以在你啟動(dòng)前端服務(wù)的同時(shí),mock-server就會(huì)自動(dòng)啟動(dòng),這里還通過 chokidar 來(lái)觀察 mock 文件夾內(nèi)容的變化。在發(fā)生變化時(shí)會(huì)清除之前注冊(cè)的mock-api接口,重新動(dòng)態(tài)掛載新的接口,從而支持熱更新。有興趣的可以自己看一下代碼 mock-server.js。由于是一個(gè)真正的server,所以你可以通過控制臺(tái)中的network,清楚的知道接口返回的數(shù)據(jù)結(jié)構(gòu)。并且同時(shí)解決了之前mockjs會(huì)重寫 XMLHttpRequest對(duì)象,導(dǎo)致很多第三方庫(kù)失效的問題。

在本地開發(fā)環(huán)境中基于webpack-dev-serveafter這個(gè)middleware中間件,在這里自動(dòng)讀取你的 mock文件,模擬出 REST API,它最大的好處是,完全不需要什么額外的工作,完全基于webpack-dev-serve就能實(shí)現(xiàn)。如果你還是想多帶帶啟動(dòng)一個(gè)serve也是可以的,完全可以引入一個(gè)express或者其它插件來(lái)啟動(dòng)一個(gè) mock-serve。

我們模擬數(shù)據(jù)有了,現(xiàn)在要做的事情就是,將我們的接口代理到我們的 mock 服務(wù)上就好了,這里我們使用webpack-dev-serve自帶的 proxy進(jìn)行接口代理。

proxy: { // xxx-api/login => mock/login [process.env.VUE_APP_BASE_API]: { target: `http://localhost:${port}/mock`, changeOrigin: true, pathRewrite: { ["^" + process.env.VUE_APP_BASE_API]: "" } } }

snippets 自動(dòng)生成代碼片段

平時(shí)日常工作中,做最多的就是寫業(yè)務(wù)模塊和組件。當(dāng)每次新開一個(gè)view或者component的時(shí)候都需要手動(dòng)創(chuàng)建一個(gè)新.vue文件,然后再創(chuàng)建