我正在开发一个小游戏,在后端使用 Go,在前端使用 TypeScript 进行 React。在我的日常工作中,我主要使用 Laravel 框架来使用 PHP,因此 Go 对我来说是一种新的编程语言,我发现最好的学习方法就是实践。那么请跟随我一起了解构建这个项目的旅程。我已经完成了一半,但我会与您分享未来的 PR。
这款游戏名为嫌疑人召回。您可以在这里查看到目前为止我所掌握的内容:https://www.suspectrecall.com 首先,您会看到嫌疑人几秒钟,然后您必须记住嫌疑人具有哪些属性。我稍后会改进设计,尽管这不是这个项目的重点。
接下来的待办事项是随机获取嫌疑人。我为这部分代码打开了 PR:https://github.com/artisanphil/suspect_recall/pull/4 欢迎代码审查!我还计划保存答案,以便我可以了解有多少人尝试过该网站以及他们犯了多少错误。
原本我有两个文件夹,后端和前端,但我发现实际上最好的方法是将后端代码放在根目录中,将前端文件夹放在后端文件夹中。
我们不需要部署前端代码,只需部署从构建中创建的代码即可。在自述文件中了解如何运行本地开发代码。
如果您刚刚下载了该项目,则需要在前端文件夹中运行 npm install 将依赖项拉入文件夹“node_modules”。
在前端文件夹中创建一个 .env 文件并添加 REACT_APP_MODE=development。这样,当通过实时重新加载运行前端代码时,它将调用在另一个端口上运行的 api 端点。然后运行 npm run start。
我们现在可以访问 localhost:3000 并查看前端。正如您将看到的,api 端点将无法工作,因此让我们转到根文件夹并运行 go run .. 请注意,我们需要在本地运行时允许跨域请求,因为它在另一个端口(端口 8080、前端为 3000)。
c := cors.New(cors.Options{ AllowedOrigins: []string{"http://localhost:3000"}, AllowedHeaders: []string{"Origin", "Content-Type", "Accept"}, AllowCredentials: true, })
在生产环境中运行时,它将在同一端口上运行,因为我们在使用 npm run build 构建前端代码(创建静态文件)后运行后端代码。顺便说一句,我将代码部署到了 Google App Engine。
请查看此 PR,其中我添加了一个新的 api,用于动态获取嫌疑人(当前是硬编码的)并在前端调用该端点:https://github.com/artisanphil/suspect_recall/pull/4
预先感谢您对如何改进代码的任何评论,我将尽力回答您可能有的任何问题。
为了查看未来的进展,请观看此存储库:https://github.com/artisanphil/suspect_recall
以上是跟随我一起踏上 Go 学习之旅的详细内容。更多信息请关注PHP中文网其他相关文章!