以Docker Compose 建立Node.js 全端开发环境（四） — Todo List Api 串接

上个章节我们加入了Prisma 作为与资料库沟通的中间层，这篇我们将使用它来协助我们开几只基础的Api 并且完成Todo List 的功能，而本篇会有些React 的部分，但很抱歉这边并不会针对React 的细节做说明，这边预设读者是有使用过React 的经验。

这边先附上上个章节与这个章节目标的样子：

上个章节结尾

[

blog-post-docker-compose-nodejs/my-project-3 在 main · tokileecy/blog-post-docker-compose-nodejs

通过在 GitHub 上创建一个帐户，为 tokileecy/blog-post-docker-compose-nodejs 开发做出贡献。

github.com

](https://github.com/tokileecy/blog-post-docker-compose-nodejs/tree/main/my-project-3)

这个章节目标

[

blog-post-docker-compose-nodejs/my-project-4 在 main · tokileecy/blog-post-docker-compose-nodejs

通过在 GitHub 上创建一个帐户，为 tokileecy/blog-post-docker-compose-nodejs 开发做出贡献。

github.com

](https://github.com/tokileecy/blog-post-docker-compose-nodejs/tree/main/my-project-4)

棱镜客户端

在这边我们会使用到一些基本的Prisma 的Operator 来协助我们我们开API：

• 查找唯一 ：能以一个Unique 的栏位来查询并回传一笔资料

• 找很多

• 创造

• 更新

• 删除

如上面的范例，基本来说大部分的Operator 会吃的参数就是这些，当然还有些没有提到的如 包括 ，不过这篇文章的范例将不会有关联的Table ，所以并不会说明到这个部分，详细的用法可以参考官方的 API 文件 。

后端CRUD Api

在前面已经提到了一些Prisma 的Operator，那这边就是直接使用到这些方法去产生Api ：

apps/backend/src/server.ts

建立完之后你可以用 卷曲 确认看看Api 有没有正常运作：

 #全部创建  
 curl --location --request POST 'localhost:8081/todos' \  
 --header '内容类型：应用程序/json' \  
 --data-raw '{  
 “名称”：“任务1”  
 }' # 列出待办事项  
 curl --location --request GET 'localhost:8081/todos'

后端的部分到这边应该是差不多了，但是我们可以先前端的页面上以Console 试打一下Api：

 拿来（'[ http://localhost:8081/all'](http://localhost:8081/todos') )

这时你会发现有问题：

CORS error

因为目前两个容器所绑定的Port 不相同，基本上只要 领域 、 协议 、 港口 不相同的时候两者沟通都会遇到跨域的问题，所以我们还需要对后端稍作调整才能跨过这个问题。

这边需要安装了CORS 的套件，并在Express 中使用它：

apps/backend/package.json

apps/backend/src/server.ts

目前我们用 起源： '*' 允许了所有的来源，现在我们可以在打一次：

Api 呼叫成功

这次就能看到没有问题了。

那么虽然目前是开发环境，但最终我们还是可能上线，比起先Hard Code 我们还是可以先把这个部分纳入 .env ，未来让使用者有弹性的选择允许的来源，这边就添加个 ALLOW_CORS_ORIGIN 到环境变数中：

.env

apps/backend/src/server.ts

这样的话我们就可以自行添加CORS 允许的URL 了。

前端部分

前端的部分我们将加入两个套件 axios 与 clsx 辅助我们的开发，前者是用来常用来管理api 的套件、而后者则是能够拼接className 的工具：

apps/frontend/package.json

为了等等可以让前端打到后端的api 我们需要给axios 后端api 的位置，所以在这边要加入新的环境变数 PUBLIC_BACKEND_URL ：

.env

等等要将这个环境变数传给CRA 所建立的React App，但CRA 有个规则是，环境变数要前缀REACT_APP 才会带入，所以名称会稍作修改：

docker-compose.yml

有了后端的URL 后，我们现在加入axios 的api ：

apps/frontend/src/api.ts

基本上与这边雨后端的Api 对称即可，完成之后我们最后再加入Todo 的UI 组件并修改 ** 应用程序.tsx** ：

apps/frontend/src/TodoItem.tsx

apps/frontend/src/TodoItem.css

apps/frontend/src/App.tsx

apps/frontend/src/App.css

完成之后就能看到结果了：

Api 順利打出

总结

这个章节说明了目前这个架构从前端到后端串接的过程，不过中间有蛮多细节还是要参阅相关的文件，因为这个系列文章的都比较着重在整体建构的过程，然而不管是后端的框架、 ORM、或是前端的框架，这边都是可以自由选择的，只要大致的架构类似，应该都不会有太多问题。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/11698/52440311