我正在开发一个小游戏，在后端使用 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中文网其它相关文章！