以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
标签：Node,Compose,apps,blog,串接,compose,Api,docker,post From： https://www.cnblogs.com/amboke/p/16652317.html