鐵人賽 Day28自己做一個價值幾十萬的動態網站

第二十八課：最後篇章也是最後TypeScript與後台介面與資料串接管理part1

前言：這邊因為是新篇章也是最後的一章，在開始前，如製作自身想要架設的後台UI可以先使用這邊提供的展示用demo後台UI
後台UI連結中，裡面有的admin folder下載下來，並先嘗試安裝與打開，（這邊補充一下這邊都是動態網站所以在做任何資料連接時，如果是使用檔案中的Api應先連上自身的mongoDB資料庫與更改一下自己的JWT Token）並今天的最後因為本篇篇幅有點多，所以內容上一樣拆成上下兩篇，並最後會附上Day28,Day29完成的連接。
後台UI連結打開後應該會是下列樣子，然後就可以來實作如何將資料庫的資料串接到後台。

後台介面UI與tailwind css Config講解

首先先稍微講解一下，這邊採用了javaScript master大大的後台專案，針對我做的修改，除了延續@syncfusion/ej2-react-grids的表格設置，還有針對部分UI進行修改，唯一無變動的為整體的顏色與點擊Context，並這次可以嘗試看看，了解tailwind css Config在其中所扮演的角色。但因為一次跳太多觀念，容易造成許多卡點，但沒關係我們可以先注重在功能串連上為重。



然後打開App.tsx，可以來管理我們的首頁與先了解先在有哪些分頁跟tailwind更改練習，

實作串接order訂單資料

然後先跳到我們的order訂單直接進入主題


這邊如果不太了解syncfusion的用法，可以觀看官方解說，或是下面我們直接實作就會比較理解。因為現在ordersData都是測試資料，我們一樣要把他換成我們的資料庫資料，用到我們的useFetch來抓取資料。並可以把太過籠長的dummy.js的資料，先另外開一個ordersData.js在data.js之內，並把dummy.js的ordersGrid與ordersData拉過去，就可以針對order訂單中的導入資料做統一修改與導入，這邊的template目前都是放測試資料與上傳的資料並修改成他想要呈現的樣子。

// import { ordersData, ordersGrid} from '../data/dummy';
import { ordersGrid } from '../data/OrderData';

//Api完整url是 http://localhost:5000/api/v1/order 
const {data,loading,error} =useFetch("/order")

並這邊可以注意到因為我們那時候存入的訂單資料，都是直接存入飯店id與房型id，所以如果我們這邊想要直接顯示訂單中的飯店照片或是房型名稱，就必須把存取起來的資料id利用這些id來爬梳我們要的更詳細資料，所以這邊我們就必須來進行後端Api爬梳的資料再處理。並這邊使用Api將資料id轉換成我們的想要的相關資料（primary key來爬梳nosql類資料)的應用，需要寫新的Api我們統一放在明天完成他，並先來把剩下的Page中的roomsList ,HotelsList ,CustomersList用一樣的方式先讓他連上線，

admin-Page ,roomsData ,HotelsData ,CustomersData相關連結

這邊大家就可以自己練習看看，還有app介面的更改等等的。

結論

距離完賽還剩2天，前面可能有些文案錯誤與網站的持續優化，在10/15號以後如有問題歡迎提出來，我就來修改與2022年11月前伺服器到期前不能展示的話，會再找其他免費伺服器來deploy，因30天篇幅來不及帶到如何deploy教學，有需要的人可以留言，我可以之後做相關的操作教程。