連接創建管理hotel user room頁面挑戰能修改與新增的UI視窗與完賽感言

14th鐵人賽 dropdownlist 照片files上傳 input 表單製作

K.o

2022-10-15 22:14:15

6063 瀏覽

分享至

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

最後一課：連接創建管理hotel user room頁面挑戰能修改與新增的UI視窗與完賽感言

最後一天就附上挑戰的最後連接，大家可以下載使用 Day30.version 中的admin folder，這次的新增內容為加上CRUD管理介面上，今天最後講解如何使用tailwind開發與Ts在專案的定位等等的

如何將scss轉換使用tailwind

這邊雖然不注重在教學如何做出介面了，但從我們一開始使用scss轉換到現在tailwind的過程，本作者是習慣先用scss快速排版，因為tailwindcss縮寫指令常常會打錯與需要查詢的過程較慢，我會像挑戰之前開發的方式先針對需求快速排版後，大概確定方向後才全部轉換成tailwindcss。

並搞懂可能會需要的需求，與相關的Api需要怎麼架設等等的，先列出一個大綱，並思考說要使用現有的Api還是乾脆寫一個新的符合現在新的需求等等的，
過程中，也可以剛好先對component劃分有概念，如常出現的表單，既可以送出資料也可以拿來顯示資料，那就可以寫好一個框架，然後重複使用即可，如需要查詢等等的道理也是。

然後完成初步設想後，就可以用製圖軟體線上的什麼都可以，來顯示看看如何排版會最有質感等等的。也可以初步整理出RWD等樣式。

這邊當然一般公司的流程是設計、前端，後端在不斷的時間內去協同合作完成，而如果想要自己一條龍完成，就必須具備邏輯與美感，這樣也能提升你自身的不可取代性，並自己做出自己專屬能應用的軟體，最後如果連測試自動化與資料視覺化都自己完成的話，就真的能做出一個能改變社會的軟體，同時也改變了自己，最大的資產就是自身的腦袋。
並這邊推薦
https://tailwind-converter.netlify.app/
可以方便把css轉換成tailwind

串接CRUD管理介面挑戰作業

回歸到正題，來把串接資料庫資料，上述連接下載打開admin後，應該會有上述的介面，最後一天我們要來把CRUD資料上傳、修改串接去後台做一個結尾，且做法就跟我們在registerPage與order訂單做的時候一樣，我們要來收集表單資料並送出創建資料，或是利用/:id來搜尋相關資料。

const handleInput=(e)=>{
state(prev=>({...prev,[e.target.id]: e.target.value}))
}

dropdownList的資料輸入

這邊dropdownList下拉式選單，連動方式跟之前我們在做searchbar時一模一樣，這次我們要來讓她連動的瞬間一樣輸入進去state內，也就是formData內，所以一樣在Form component內找到DropdownList把state={state}傳入

const handleInputChange =(set)=>{
    setClickIndex(set)
    state(prev=>({...prev,[data.id]:set}))
}

input輸入照片等等的files上傳

並這邊

 const handleInputPhotos =(e)=>{
setFile(e.target.files)
state(prev=>({...prev,[e.target.id]:e.target.files}))
 }
 const handleInputDesc =(e)=>{
  state(prev=>({...prev,[e.target.id]:e.target.value}))
   }

handleInputDesc與handleInputPhotos都分別處理上傳去formData資料
URL.createObjectURL(file[0])的用法是把file object轉成暫時性url，但我們還是需要將他轉成

axios.post上傳

最後我們將製作好得formdata來連接上axios.post上傳看看，並這邊之後要加入條件子句來讓表單到時候可以選擇要使用axios.get還是axios.post是要上傳創建資料，還是上傳修改資料等等的，傳遞的url也需要分別寫入，這邊就示範寫入create hotel的axios.post過程。所以一樣回到Crud之中，

Form.tsx

const handleInputPhotos = async(e) => {
    e.preventDefault()
    setFile(e.target.files[0])
    const ImgData = new FormData()
    ImgData.append("file", e.target.files[0] )
    ImgData.append("upload_preset", "sambooking") 
    try {
        const res = await axios.post("https://api.cloudinary.com/v1_1/dgr5mhnbn/image/upload",ImgData)
        const {url}= res.data
        state(prev=>({...prev,[e.target.id]: url}))
        console.log(res)
    } catch (err){}
  }

Crud.tsx

 const [buttonClick , setButtonClick] = useState(false)
    useEffect(()=>{
        const createForm = ()=>{
            const res = axios.post("/hotels/",formData)
            console.log(res)
        }
        if(type=="創建" || buttonClick==true ){
            createForm()
            setButtonClick(false)
        }
    },[buttonClick])

最後的這樣就上傳成功了，但這邊其實還有很多細節需要加入，如必須輸入的紅匡紅字，與輸入錯誤等等的防呆機制，所以如果覺得後台細節太麻煩，可以先使用Api上傳即可，而軟體細節的追求可以先以前台為主，最後相對於create其餘的updated,get與delete就相對簡單了這邊就交給各位自己完成了，如還有疑問，或是想要免費的完整教程，都可以下方留言，等之後有空我會在回來完成他也說不定。

完賽結論

在打最後這篇的時候其實心情非常激動，過程中其實常常一度想要放棄跟懷疑自我為什麼要把自己搞得這麼累，就連最後一篇其實也一直的在刪減內容因為時間上做不太完，但現在回頭看都非常值得，雖然知道自己對全端開發還有很多需要了解的，包括coding的簡潔度，還有前後端相關的深究，跟已不同領域的角度去貼進使用者的心態，總共三十天每天字數都在1萬到5000字內，少說真的打出了十幾萬的文字出來，雖然不知道有多少人在進行這個挑戰，但也有不斷在支持我的人，最後其實自己的收穫也是滿滿的，但經過這次挑戰後，發覺到最好的學習就是嘗試做出自己的筆記並嘗試把他解釋跟表達出來給他人聽，雖然可能會辭不達意，卻在自身開發side project上多了些組織性跟表達給別人看就會怕打錯更仔細的去探求其意，最後的最後講一些人生雞湯，能開始願意嘗試有難度的事務並堅持下來的人，不管在哪一個領域都是令人尊敬的，期許自己能夠不斷往前不斷學習，並對社會有些回饋，謝謝看到最後的你。