大家好，我是米洛，一位踩坑人！
欢迎大家关注我的公众号: 米洛的测开日记。
硬货预警！！！这篇文章主要讲如何在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也可以类似去整合静态资源。
遇到问题不可怕，慢慢找寻原因就好！不要慌乱~
配合部署方案文章口感更佳哦。
https://pity.readthedocs.io/deploy/%E9%83%A8%E7%BD%B2/ (opens new window)
😄最后无耻来一波求关注，大家周末愉快~~