测试平台系列(45) 先后端合并(下)

这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战。css

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

欢迎你们关注个人公众号: 测试开发坑货。前端

~~硬货预警！！！这篇文章主要讲如何在FastApi整合React静态资源（vue同理）。~~vue

回顾

上次咱们说了hash路由和browser路由。今天聊聊Flask，Django，FastApi都通用的路由。正则表达式

路由

人们总说url，url，那url究竟是什么呢？为何给你一个url你就不会调到别人的接口了呢？shell

很明显，URL（Uniform Resource Locator,统一资源定位器）是一个便于咱们定位到某一个具体资源的简称。npm

那路由又是什么鬼？简单点说，路由就是url到你对应执行方法之间的映射。django

熟悉django的同窗（不包括我）可能都知道，django编写接口的时候是能够经过正则表达式去匹配你的url规则，而后映射到对应的执行函数的。flask

因此从这里咱们就能够知道，你给了我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%…

😄最后无耻来一波求关注，你们周末愉快~~