測試平臺系列(45) 先後端合併(下)

這是我參與8月更文挑戰的第5天，活動詳情查看：8月更文挑戰。

你們好，我是米洛，一位踩坑人！

歡迎你們關注個人公衆號: 測試開發坑貨。

硬貨預警！！！這篇文章主要講如何在FastApi整合React靜態資源（vue同理）。

回顧

上次咱們說了hash路由和browser路由。今天聊聊Flask，Django，FastApi都通用的路由。

路由

人們總說url，url，那url究竟是什麼呢？爲何給你一個url你就不會調到別人的接口了呢？

很明顯，URL（Uniform Resource Locator,統一資源定位器）是一個便於咱們定位到某一個具體資源的簡稱。

那路由又是什麼鬼？簡單點說，路由就是url到你對應執行方法之間的映射。

熟悉django的同窗（不包括我）可能都知道，django編寫接口的時候是能夠經過正則表達式去匹配你的url規則，而後映射到對應的執行函數的。

因此從這裏咱們就能夠知道，你給了我url，經過ip和port（端口）找到了個人服務，可是我服務裏面有辣麼多的函數，我咋知道匹配哪個，執行哪個呢？怎麼還不會串呢？

因此出現了上面說的，路由規則（django）,Flask中的@app.route，FastApi中的@app.get。

再聊串串

回到上篇文章說的串串，前端咱們定義了本身的路由，後端也有本身的路由。爲何hash路由就不會串了呢？那是由於我們後端定義路由的時候，沒什麼人會這樣定義:

@app.route("/haha/#/nihaihaoma")
複製代碼

這樣定義的都是臥龍鳳雛，起碼在座的各位都不是。因此路由匹配不上，會怎麼樣？就不會串了呀！

打包靜態資源

咱們在pityWeb目錄運行

npm run build
複製代碼

等待打包完成後，把dist裏的全部內容所有放到statics目錄中去，這裏爲何是statics而不是static，稍後再說。

FastApi中的靜態資源

咱們看官網給的例子:

咱們以Flask進行對照開發，我記得flask是能夠設置靜態資源目錄的，其實這裏是一個意思。大體就是把static文件夾下的內容當作了靜態資源。

操練起來

好傢伙，我按照官方文檔歷練，直接給我沉痛打擊。

我想象中的樣子:

進入http://localhost7777，就能給咱返回登陸頁面。

實際上的樣子:

也許這就是FastApi的魅力吧，快到讓你追不上，你就罵不了他了。你的刀雖然長40米，但他已經跑了100米了！

嘗試解決

既然它不給力，我們已經上了賊船，那總不能臨陣脫逃吧！因而我開啓了大海撈針模式，好在讓我找到了解決方案。

一一分析，首先，爲何他會說not found!那確定是路由規則沒有匹配到！

咱們確實沒有寫/的路由規則，因此合情合理。但咱們如今想要，用戶進入首頁的時候，自動加載咱們打包後的index.html文件，也就是說咱們要直接返回這個html（也就是前端首頁）。

因此咱們要加上這個:

加好了以後重啓服務看看效果:

別慌，咱們繼續排查，打開F12:

繼續回憶咱們的路由匹配規則，咱們沒有寫: /{filename}這樣的路由，因此咱們要爲這樣的路由作個匹配。

由於咱們在設計之初，後端路由都是業務加名稱，因此不會串。好比: /request/http, /auth/login。（這就體現了一個好的設計的做用了）

這個路由會匹配到剛纔咱們找不到的文件，並判斷是否是文件，不是就直接給他個404。若是是，咱們就打開文件並讀內容，再猜出文件的類型，返回對應類型的Response。

這樣的好處就是css就返回xxx.css，js就是xxx.js，不會亂套。

再來試試:

可是發現個問題沒？logo又沒了！！！繼續看F12:

他的url是/static/xxxx，這樣咱們的路由規則匹配不到的。

因此咱們還得再寫個路由: /static/{filename}

先前更名爲statics也是這個緣由，裏頭有重名文件，致使路由一開始進不來（這是我踩的坑，沒讓大家踩）。

最後試試，事不過三:

隨便操做也沒啥問題（由於改了路由爲hash模式，非hash模式刷新會報404，這也是個坑）

同理，Flask也能夠相似去整合靜態資源。

遇到問題不可怕，慢慢找尋緣由就好！不要慌亂~

配合部署方案文章口感更佳哦。

pity.readthedocs.io/deploy/%E9%…

😄最後無恥來一波求關注，你們週末愉快~~