大家好~我是小方，欢迎大家关注「测试开发笋货」体完记得俾个「like」呀
回顾
上一期我们完成了前端逻辑的实现，这一期我们来进行前后端结合~终于终于要结束了···
前端打包
打包前，要修复一下前端的代码，表单的初始值问题，非必填的值，传给后端统一使用null
后端判空也要对应改一下哦~
修改完后，先在main.js配置好后端的api
在项目的根目录下，直接npm run build 执行打包命令，如下图，已经打包编译成功。
打包完成后，目录下会多出dist文件。
前后端结合
在此之前，我们先来优化一下之前的代码，主要这3个，要把它们抽出来成一个公共方法，这也是为了以后解析swagger文档时，生成Excel、yaml和jmeter代码能够复用~
以生成Excel方法为例子，将api数据和name作为入参，同理，生成yaml和jmeter改法一样~
相应地，路由函数也改一下
我们将dist中static文件复制到后端项目的根目录下，顺便也把index.html文件复制进去
main.py添加挂载静态文件夹方法
然后添加一个root路由，绑定它的路径和函数，最后将root路由注册到app
我们来启动项目试试看，浏览器打开http://127.0.0.1:8080/，完毕~over
「项目地址：」 https://github.com/JokerChat/ApiDocParse
总结
这个系列终于终于终于完结了，完结撒花~不说了，我要滚回去学习了
下期我们来讲讲XXX，我哋下次再见👋🏻👋🏻👋🏻「俾个like再走啦」
原文始发于微信公众号（笋货测试笔记）：fastapi+vue前后端分离之前后端结合05
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/281695.html
