我的第一个全栈项目:Book Subscrption System

Posted on Sat, Mar 18, 2023 教程 项目

开场问题篇

为什么做这个?

研一第一学期我选了一门COMS E6156云计算的课,要做一个全栈项目,并把它上传到云上。因为图书订阅系统所需要的微服务比较简单(即:用户,图书,订单),所以我们选择最后做这个。但是因为时间比较紧张,我们实际上是从2022/12/17开始做的,所以到了ddl的那天2022/12/23,真正在做也就是一周内高强度搞完的。

如何短时间做一个版本出来?

首先是确定用什么技术:FastAPI的框架比Flask还简单,那肯定是用FastAPI做比较快了;前端用我稍微熟悉一点的React。

其次是如何使用完全不熟悉的FastAPI框架:查找已有的符合要求的demo,这样会比直接看文档更适合新手。之前的参考资料在这里

ddl结束时候提交的版本?

GitHub - Iris1e27/book-subscription-system at 31d23f2da1e4c9e74a6daffacf5bb4363424b46b

A cloud full stack web app for course COMS E6156. Contribute to Iris1e27/book-subscription-system development by creating an account on GitHub.

为什么继续做了?

交上去的版本实际上并没有实现成功的上传aws的一些功能,那个版本有很多问题,所以我现在有了时间,并且因为要准备面试的项目,打算把bug改一改,代码优化一下。

Debug与优化篇

1)当我们把前端打包(npm run build)上传到S3的时候,发现之前的路由都失效了。

首先是<BrowserRouter>路由:需要改成<HashRouter>

问chatgpt:我用aws的s3托管我的网站,应该用<HashRouter>还是<BrowserRouter>

如果你的AWS S3托管的网站没有使用自定义域名或SSL证书,那么建议你使用<HashRouter>来实现路由,因为它不需要Web服务器支持HTML5的History API。相反,<HashRouter>使用URL的哈希部分来表示路由,因此即使AWS S3托管的网站使用默认的S3托管域名,也可以实现客户端路由

但是,如果你的AWS S3托管的网站使用自定义域名或SSL证书,那么你可以使用<BrowserRouter>来实现路由。<BrowserRouter>使用HTML5的History API来表示路由,这通常需要Web服务器支持HTML5的History API。但是,AWS S3支持将自定义域名和SSL证书映射到S3桶,这样你就可以在AWS S3上使用自定义域名和SSL证书来实现客户端路由。

综上所述,建议你在选择使用<HashRouter>还是<BrowserRouter>时,考虑你的AWS S3托管的网站是否使用自定义域名或SSL证书,以及Web服务器对HTML5的History API的支持程度。

其次是一些网页后来我们改成用变量表示了,因为要上传云上,所以导致有些path可能不对(少了/),我这次也全部改一下。比如在 Book.js 中,我就改成了:BOOK_SERVER_URL+`/books/${book_id}`

然后是所有的弹窗式update无法返回原来页面的问题,这是因为我用了<HashRouter>之后出现的,解决方法:await navigate(-1); ;也有一些本来的路径跳转需要改,如:navigate("/login")

问chatgpt:window.location.href与useNavigate的区别?

"window.location.href"是JavaScript中的一个API,可以获取或设置当前页面的URL。当你使用"window.location.href"来实现编程式导航时,它会在浏览器中执行标准的页面刷新和导航,这意味着整个页面将重新加载,所有的JavaScript状态和数据都将丢失。

相比之下,"useNavigate"是React Router v6中提供的一个钩子函数,可以用于在React应用程序中进行编程式导航。当你使用"useNavigate"来实现编程式导航时,它会使用React Router的客户端路由机制,在不刷新整个页面的情况下导航到特定的路由,从而保留当前页面的JavaScript状态和数据。

综上所述,"window.location.href"和"useNavigate"都可以用于实现在React应用程序中进行编程式导航,但是它们之间的主要区别在于导航时是否执行标准的页面刷新和导航,以及是否保留当前页面的JavaScript状态和数据。

最后把那个 LoginWithEmail.js 的垃圾功能删掉了。

终于这个版本的代码在pip run build之后没有任何问题的上传到s3上,然后可以正确跳转页面了。关于如何上传React single-page到s3,请看这里(第一次没改policy导致403)。

GitHub - Iris1e27/book-subscription-system at 746894bff841f774f752a87f52aa96bf0f458668

A cloud full stack web app for course COMS E6156. Contribute to Iris1e27/book-subscription-system development by creating an account on GitHub.

2)