react與後臺互動注意點
今天總結一下前端使用react框架，後臺使用mybatis整合springBoot結合使用的要點以及我認為重要的點。
注意：我的程式程式碼：JDK是1.8版本，前端用的是es6版本的（與es5區別：定義函式的格式不同等等）
一、mybatis整合springBoot的注意事項
1、需要自己寫SQL語句--先建好所需要的資料庫表（可以使用逆向工程生成mapper.xml檔案，實體類，dao介面），不過最好是自己寫SQL語句
2、使用myBatis時，dao層不需要寫實現類，只需寫對應的介面類即可。
注意：介面類中的方法名和mapper.xml中的SQL語句的id值必須一致
mapper.xml檔案：
dao介面層：
二、前後臺互動（react作為前端框架，springBoot作為後臺框架）
1.後臺必須注意Controller層中的@RequestMapping("/xx")
2.react程式碼中：package.json檔案中新增（防止跨域）： "proxy":"http://127.0.0.1:8080"--類似這樣的後臺域名
3.react中表格的欄位對應於實體類中的屬性，必須保持一致
4.在react程式碼中新增與後臺互動資料的程式碼：
- // 請求後臺資料
- componentWillMount(){
- /* 查詢資料的格式 */
- let filter={
- object:{
- object:{
- }
- }
- }
- var getInformation ={
- method:"POST",
- headers:{
- "Content-Type":"application/json"
- },
- /* json格式轉換 */
- body:JSON.stringify(filter)
- }
- //注意：/org/find的方法名對應於後臺Controller層中的RequestMapping
- fetch("/org/find",getInformation)
- .then(response => response.json())
- .then(json =>{
- // 返回的資料型別
- this.setState({
- object:json.object.list
- })
- })
- }
上述程式碼是關於查詢頁面的函式，其中增加、修改、刪除一般情況下點選按鈕儲存，資料儲存到資料庫並能顯示到頁面，進而達到更新資料，就會顯示所操作的所有資料。
以上是我的總結，希望可以提出寶貴的意見。
今天總結一下前端使用react框架，後臺使用mybatis整合springBoot結合使用的要點以及我認為重要的點。
注意：我的程式程式碼：JDK是1.8版本，前端用的是es6版本的（與es5區別：定義函式的格式不同等等）
一、mybatis整合springBoot的注意事項
1、需要自己寫SQL語句--先建好所需要的資料庫表（可以使用逆向工程生成mapper.xml檔案，實體類，dao介面），不過最好是自己寫SQL語句
2、使用myBatis時，dao層不需要寫實現類，只需寫對應的介面類即可。
注意：介面類中的方法名和mapper.xml中的SQL語句的id值必須一致
mapper.xml檔案：
dao介面層：
二、前後臺互動（react作為前端框架，springBoot作為後臺框架）
1.後臺必須注意Controller層中的@RequestMapping("/xx")
2.react程式碼中：package.json檔案中新增（防止跨域）： "proxy":"http://127.0.0.1:8080"--類似這樣的後臺域名
3.react中表格的欄位對應於實體類中的屬性，必須保持一致
4.在react程式碼中新增與後臺互動資料的程式碼：
- // 請求後臺資料
- componentWillMount(){
- /* 查詢資料的格式 */
- let filter={
- object:{
- object:{
- }
- }
- }
- var getInformation ={
- method:"POST",
- headers:{
- "Content-Type":"application/json"
- },
- /* json格式轉換 */
- body:JSON.stringify(filter)
- }
- //注意：/org/find的方法名對應於後臺Controller層中的RequestMapping
- fetch("/org/find",getInformation)
- .then(response => response.json())
- .then(json =>{
- // 返回的資料型別
- this.setState({
- object:json.object.list
- })
- })
- }
上述程式碼是關於查詢頁面的函式，其中增加、修改、刪除一般情況下點選按鈕儲存，資料儲存到資料庫並能顯示到頁面，進而達到更新資料，就會顯示所操作的所有資料。
以上是我的總結，希望可以提出寶貴的意見。