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

資訊專欄INFORMATION COLUMN

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

MonoLog / 2916人閱讀

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

前言

vue-element-admin 從 2017.04.17提交第一個 commit 以來,維護至今已經有兩年多的時間了了,發布了四十多個版本,收獲了三萬多的 stars,遠遠的超出了自己的預期。距離上次手摸手系列教程也已經過去了很久,主要因為:作為一個個人開源項目,維持它已經很難了,所以真的沒啥時間寫詳細的教程了,光是維護項目 文檔 就讓我很頭疼了。也有不少人建議我出付費教學視頻,但我個人還是更愿意把這個時間投入到維護開源項目之中吧。

本篇教程主要是趁著vue-element-admin發布了 v4.0 新版本,首先來簡單說一下4.0版本做了哪些改動和優化。后半部分則會分享一些新的思考和一些小技巧吧。之前幾篇手摸手文章都差不多兩年前的了,但隨著技術的不斷發展迭代,很多之前的不能解決的問題也是都是有了新的解決方案的,同時也會出現一些新的問題和挑戰。

4.0 做了什么

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

vue-cli@3

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

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

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

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

redirect 刷新頁面

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

// 先注冊一個名為 `redirect` 的路由
// 手動重定向頁面到 "/redirect" 頁面
const { fullPath } = this.$route
this.$router.replace({
  path: "/redirect" + fullPath
})

當遇到你需要刷新頁面的情況,你就手動重定向頁面到redirect頁面,它會將頁面重新redirect重定向回來,由于頁面的 key 發生了變化,從而間接實現了刷新頁面組件的效果。

addRoutes && removeRoutes

看過我之前文章的人肯定知道,我目前 vue 項目的權限控制都是通過 addRoutes來實現的。簡單說就是:用戶登錄之后會返回一個權限憑證Token,用戶在根據這個Token去問服務端詢問自己的權限,辟如服務端返回權限是["editor"],前端再根據這個權限動態生成他能訪問的路由,再通過addRoutes進行動態的路由掛載。具體的代碼可見 permission.js

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

后來發現了一種 hack 的方法,能很好的動態清除注冊的路由。先看代碼:

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

Mock 數據

如果你在實際開發中,最理想的前后端交互方式當然是后端先幫我們 mock 數據,然后前端開發。但現實很骨感,總會因為種種原因,前端需要自己來 mock 假數據。尤其是我的幾個開源項目,都是純前端項目,根本沒有后端服務。
在之前的文章中也介紹過,vue-element-adminvue-admin-template 使用的是 MockJS 和 easy-mock 這兩個庫。但實際用下來兩者都有一些問題。

MockJs

它的原理是: 攔截了所有的請求并代理到本地,然后進行數據模擬,所以你會發現 network 中沒有發出任何的請求。但它的最大的問題是就是它的實現機制。它會重寫瀏覽器的XMLHttpRequest對象,從而才能攔截所有請求,代理到本地。大部分情況下用起來還是蠻方便的,但就因為它重寫了XMLHttpRequest對象,所以比如progress方法,或者一些底層依賴XMLHttpRequest的庫都會和它發生不兼容,可以看一下我項目的 issues,就知道多少人被坑了。

它還有一個問題:因為是它是本地模擬數據,實際上不會走任何網絡請求。所以本地調試起來很蛋疼,只能通過console.log來調試。就拿vue-element-admin來說,想搞清楚 getInfo()接口返回了什么數據,只能通過看源碼或者手動 Debug 才能知道。

Easy-Mock

這個項目剛出的時候用的人比較少,還真的挺好用的。天然支持跨域,還是支持MockJs的所有語法,我在之前也推薦過。但因為用的人多了,它的免費服務會經常的掛,可以說天天掛。。。但畢竟人家這是免費的服務,也不能苛求什么,官方的建議是自己搭建服務。如果你的公司整體搭建一個這樣的 mock 服務的話也是一個不錯的選擇。但大部分人可能還是沒有這個技術條件的。

新方案

所以我一直在尋求一個更好的解決方案,我也去體驗了其它很多 mock api 服務,如 mockapi、Mocky 等等。總之體驗都不能滿足我的需求。

v4.0版本之后,在本地會啟動一個mock-server來模擬數據,線上環境還是繼續使用mockjs來進行模擬(因為本項目是一個純前端項目,你也可以自己搭建一個線上 server 來提供數據)。不管是本地還是線上所以的數據模擬都是基于mockjs生成的,所以只要寫一套 mock 數據,就可以在多環境中使用。

該方案的好處是,在保留 mockjs的優勢的同時,解決之前的痛點。由于我們的 mock 是完全基于webpack-dev-serve來實現的,所以在你啟動前端服務的同時,mock-server就會自動啟動,這里還通過 chokidar 來觀察 mock 文件夾內容的變化。在發生變化時會清除之前注冊的mock-api接口,重新動態掛載新的接口,從而支持熱更新。有興趣的可以自己看一下代碼 mock-server.js。由于是一個真正的server,所以你可以通過控制臺中的network,清楚的知道接口返回的數據結構。并且同時解決了之前mockjs會重寫 XMLHttpRequest對象,導致很多第三方庫失效的問題。

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

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

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 自動生成代碼片段

平時日常工作中,做最多的就是寫業務模塊和組件。當每次新開一個view或者component的時候都需要手動創建一個新.vue文件,然后再創建