上個章節我們加入了 Prisma 作為與資料庫溝通的中間層，這篇我們將使用它來協助我們開幾隻基礎的 Api 並且完成 Todo List 的功能，而本篇會有些 React 的部分，但很抱歉這邊並不會針對 React 的細節做說明，這邊預設讀者是有使用過 React 的經驗。
這邊先附上上個章節與這個章節目標的樣子：
上個章節結尾
這個章節目標
Prisma Client
在這邊我們會使用到一些基本的 Prisma 的 Operator 來協助我們我們開 API：
- findUnique：能以一個 Unique 的欄位來查詢並回傳一筆資料
- findMany
- create
- update
- delete
如上面的範例，基本來說大部分的 Operator 會吃的參數就是這些，當然還有些沒有提到的如 include ，不過這篇文章的範例將不會有關聯的 Table ，所以並不會說明到這個部分，詳細的用法可以參考官方的 API 文件。
後端 CRUD Api
在前面已經提到了一些 Prisma 的 Operator，那這邊就是直接使用到這些方法去產生 Api ：
建立完之後你可以用 curl 確認看看 Api 有沒有正常運作：
# create todo
curl --location --request POST 'localhost:8081/todos' \
--header 'Content-Type: application/json' \
--data-raw '{
"name": "task1"
}'# list todos
curl --location --request GET 'localhost:8081/todos'
後端的部分到這邊應該是差不多了，但是我們可以先前端的頁面上以 Console 試打一下 Api：
fetch('http://localhost:8081/todos')這時你會發現有問題：
因為目前兩個容器所綁定的 Port 不相同，基本上只要 Domain、Protocol、Port 不相同的時候兩者溝通都會遇到跨域的問題，所以我們還需要對後端稍作調整才能跨過這個問題。
這邊需要安裝了 CORS 的套件，並在 Express 中使用它：
目前我們用 origin: '*'允許了所有的來源，現在我們可以在打一次：
這次就能看到沒有問題了。
那麼雖然目前是開發環境，但最終我們還是可能上線，比起先 Hard Code 我們還是可以先把這個部分納入 .env ，未來讓使用者有彈性的選擇允許的來源，這邊就添加個 ALLOW_CORS_ORIGIN 到環境變數中：
這樣的話我們就可以自行添加 CORS 允許的 URL 了。
前端部分
前端的部分我們將加入兩個套件 axios 與 clsx 輔助我們的開發，前者是用來常用來管理 api 的套件、而後者則是能夠拼接 className 的工具：
為了等等可以讓前端打到後端的 api 我們需要給 axios 後端 api 的位置，所以在這邊要加入新的環境變數 PUBLIC_BACKEND_URL：
等等要將這個環境變數傳給 CRA 所建立的 React App，但 CRA 有個規則是，環境變數要前綴 REACT_APP 才會帶入，所以名稱會稍作修改：
有了後端的 URL 後，我們現在加入 axios 的 api ：
基本上與這邊雨後端的 Api 對稱即可，完成之後我們最後再加入 Todo 的 UI 組件並修改 App.tsx：
完成之後就能看到結果了：
總結
這個章節說明了目前這個架構從前端到後端串接的過程，不過中間有蠻多細節還是要參閱相關的文件，因為這個系列文章的都比較著重在整體建構的過程，然而不管是後端的框架、 ORM、或是前端的框架，這邊都是可以自由選擇的，只要大致的架構類似，應該都不會有太多問題。
