大家好,我是米洛,一位踩坑人!

欢迎大家关注我的公众号: 测试开发坑货

硬货预警!!!这篇文章主要讲如何在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路由就不会串了呢?那是因为咱们后端定义路由的时候,没什么人会这样定义:

  1. @app.route("/haha/#/nihaihaoma")

这样定义的都是卧龙凤雏,起码在座的各位都不是。所以路由匹配不上,会怎么样?就不会串了呀!

打包静态资源

我们在pityWeb目录运行

  1. npm run build

等待打包完成后,把dist里的所有内容全部放到statics目录中去,这里为什么是statics而不是static,稍后再说。

FastApi中的静态资源

我们看官网给的例子:

测试平台系列(45) 前后端合并(下) - 图1

我们以Flask进行对照开发,我记得flask是可以设置静态资源目录的,其实这里是一个意思。大致就是把static文件夹下的内容当做了静态资源。

操练起来

好家伙,我按照官方文档历练,直接给我沉痛打击。

我想象中的样子:

进入http://localhost7777,就能给咱返回登录页面。

实际上的样子:

测试平台系列(45) 前后端合并(下) - 图2

也许这就是FastApi的魅力吧,快到让你追不上,你就骂不了他了。你的刀虽然长40米,但他已经跑了100米了!

尝试解决

既然它不给力,咱们已经上了贼船,那总不能临阵脱逃吧!于是我开启了大海捞针模式,好在让我找到了解决方案。

一一分析,首先,为什么他会说not found!那肯定是路由规则没有匹配到!

我们确实没有写/的路由规则,所以合情合理。但我们现在想要,用户进入首页的时候,自动加载我们打包后的index.html文件,也就是说我们要直接返回这个html(也就是前端首页)。

所以我们要加上这个:

测试平台系列(45) 前后端合并(下) - 图3

加好了之后重启服务看看效果:

测试平台系列(45) 前后端合并(下) - 图4

别慌,我们继续排查,打开F12:

测试平台系列(45) 前后端合并(下) - 图5

继续回忆我们的路由匹配规则,我们没有写: /{filename}这样的路由,所以我们要为这样的路由做个匹配

因为我们在设计之初,后端路由都是业务名称,所以不会串。比如: /request/http, /auth/login。(这就体现了一个好的设计的作用了)

测试平台系列(45) 前后端合并(下) - 图6

这个路由会匹配到刚才我们找不到的文件,并判断是不是文件,不是就直接给他个404。如果是,我们就打开文件并读内容,再猜出文件的类型,返回对应类型的Response。

这样的好处就是css就返回xxx.css,js就是xxx.js,不会乱套。

再来试试:

测试平台系列(45) 前后端合并(下) - 图7

但是发现个问题没?logo又没了!!!继续看F12:

测试平台系列(45) 前后端合并(下) - 图8

他的url是/static/xxxx,这样我们的路由规则匹配不到的。

所以我们还得再写个路由: /static/{filename}

测试平台系列(45) 前后端合并(下) - 图9

先前改名为statics也是这个原因,里头有重名文件,导致路由一开始进不来(这是我踩的坑,没让你们踩)。

最后试试,事不过三:

测试平台系列(45) 前后端合并(下) - 图10

测试平台系列(45) 前后端合并(下) - 图11

随便操作也没啥问题(因为改了路由为hash模式,非hash模式刷新会报404,这也是个坑)

同理,Flask也可以类似去整合静态资源

遇到问题不可怕,慢慢找寻原因就好!不要慌乱~

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

https://pity.readthedocs.io/deploy/%E9%83%A8%E7%BD%B2/

😄最后无耻来一波求关注,大家周末愉快~~