标签：Node Compose apps blog 串接 compose Api docker post
以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 来源： https://www.cnblogs.com/amboke/p/16652317.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。