1. 程式人生 > >react實現前後臺數據互動

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
      })
      })
  }

     上述程式碼是關於查詢頁面的函式,其中增加、修改、刪除一般情況下點選按鈕儲存,資料儲存到資料庫並能顯示到頁面,進而達到更新資料,就會顯示所操作的所有資料。

   以上是我的總結,希望可以提出寶貴的意見。