# Resful Ajax 前後端分離用json來交換資料 現在發出http請求不一定要透過Form表單 restcontroller 把物件用json格式丟出去 ![](https://hackmd.io/_uploads/Sylrt0Bwn.png) ![](https://hackmd.io/_uploads/ry4BYASP3.png) entity 透過header來設定要回傳什麼type 所以上面是controller也可以傳回不同格式 不只頁面 ![](https://hackmd.io/_uploads/SyoIK0Sv2.png) 沒有在設定檔新增這行設定,就只能使用http的 get/post方法 局部更改才做ajax,如果要render更改80%畫面就用跳轉方式 上課錄影 https://drive.google.com/drive/folders/1-KxTMnezmyGwgCvkOrQ4atYYBW4bofRf?usp=sharing new js file 方式 .js ![](https://hackmd.io/_uploads/SyD5KArvh.png) 3個等號= 聯資料型別都有判斷 清除快取方式 ![](https://hackmd.io/_uploads/S14RtCBw3.png) ![](https://hackmd.io/_uploads/Syly5RHDh.png) 預設 ![](https://hackmd.io/_uploads/BkI7cAHw2.png) 回傳的格式不寫會自動幫你自動偵測 ![](https://hackmd.io/_uploads/SyMN50Bv3.png) ![](https://hackmd.io/_uploads/BJE_qRSwh.png) 將解析內容轉成JS 物件,後續才能繼續對資料進行其他操作 axios cdn ![](https://hackmd.io/_uploads/HJZ2cCHvn.png) ![](https://hackmd.io/_uploads/HJah5AHv2.png) 把axios檔案複製過去 ![](https://hackmd.io/_uploads/ryOA5RHPn.png) 這樣是因為我們沒有.map的檔案 ![](https://hackmd.io/_uploads/HJIgsRBP2.png) ![](https://hackmd.io/_uploads/SJW4iRrPn.png) ![](https://hackmd.io/_uploads/S19mi0SDh.png) ![](https://hackmd.io/_uploads/S194s0Bvh.png) 有了@JsonProperty會從讀JAVA屬性 轉成讀@JsonProperty標籤裡面的屬性 ![](https://hackmd.io/_uploads/rJHSoRHPh.png) 重整頁面時候 有prevent default 就不會再詢問你重複送出表單 --- 利用ajax 和JS 讓送出後, 底下顯示前三筆 ![](https://hackmd.io/_uploads/H1x12CBvh.png) ![](https://hackmd.io/_uploads/SJD13ABw3.png) 先開發 Restful api 用 postman 做測試 寫前端 form 要做 preventdefault 功能: 新增資料後,印出最新的前三筆(Ajax) ![](https://hackmd.io/_uploads/SyIbnRSw3.png) { "text":"這隨便打" } 在controller 寫完api 方法就到postman去做測試 //DTO 專門接受前端傳過來的資料 //當回傳@RequestBody 跟目前現有物件不匹配時,可以在建立一個DTO物件,但裡面不要有entity ![](https://hackmd.io/_uploads/H1WY2RBwh.png) redirect是get請求 <!-- 把原本showMessages的兩個form 都用ajax取代 --> ![](https://hackmd.io/_uploads/r1U93CrPh.png) 送ajax 回傳 但頁面 ajax type屬性(舊版)-->method(新版) --- ``` //JS 沒有insertAfter 所以自己寫一個方法來做轉換 //insertBefore 把東西塞到東西之前 function insertAfter(referenceNode, newNode){ referenceNode.parentNode.insertBefore(newNode,referenceNode.nextSibling) //referenceNode.nextSibling 為<span>的下一個Node,我們要在下一個Node前面加入東西 } ``` --- 在專案資料夾內新增README.md檔 寫說明文件 .md就是markdown格式的意思 --- 程式相關技術: Servlet / JSP / JDBC / Spring Boot / Spring / Spring MVC / Hibernate / MSSQL / MySQL / HTML / CSS / JavaScript / Restful API / Ajax / Git / GitHub / jQuery/Maven --- controller 寫完就趕緊去測試api ![](https://hackmd.io/_uploads/rka5QZPv3.png) ![](https://hackmd.io/_uploads/BkzsQ-DD2.png) 下拉選擇file (可選擇text/file) --- 可以在資料庫設定unique讓照片不會重複,或是儲存前利用判斷檢查是否重複 public static void main(String[] args) ORM就是幫你把Java物件對應到資料庫的資料 JDBC速度比較快 追求速度的環境不能用ORM ORM還要額外產生JDBC程式,所以很追求速度環境不要用ORM spring-boot-devtool 是設定一存檔就幫你重新載入的pom.xml設定 要記錄每一家面試問過你的問題,但是最好是離開公司之後再做筆記,才不會下次問一樣問題但又回答不出來 功能做的越複雜越好 1. 紀錄使用者輸入的資料有沒有包含不合規格的文字,有就跳出訊息,不給輸入 2. 跳頁時紀錄記錄使用者是幾點幾分跳頁的 瀏覽紀錄 沒有登入時候存 1. cookie 2. session(分為有登入的和沒登入的) 但要怎麼處理登入和沒登入的session?如何交換 沒有想法就去大一點的公司看他們怎麼做這功能,去思考要怎麼做,不要做單純的CRUD,但還是要先有再想怎麼做複雜 --- 網頁 透過form ,用dto來傳資料/接資料 @restcontroller 才是用ajax,不是用dto