Javascript

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

本文主要是介绍以Docker Compose 建立Node.js 全端开发环境(四) — Todo List Api 串接,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

以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 了。

前端部分

前端的部分我们将加入两个套件 axiosclsx 辅助我们的开发,前者是用来常用来管理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

这篇关于以Docker Compose 建立Node.js 全端开发环境(四) — Todo List Api 串接的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!