React realizes data interaction between front and back

  Today, I will summarize the main points of using the react framework on the front end and mybatis integrated springBoot on the background and what I think are important points.

   Note: My program code: JDK is version 1.8, and the front end uses es6 version (difference from es5: the format of defining functions is different, etc.)

1. Precautions for integrating springBoot with mybatis

1. You need to write SQL statements by yourself -- first build the required database tables (you can use reverse engineering to generate mapper.xml files, entity classes, and dao interfaces), but it is best to write SQL statements yourself

2. When using myBatis, the dao layer does not need to write the implementation class, but only needs to write the corresponding interface class.

Note: The method name in the interface class must be consistent with the id value of the SQL statement in mapper.xml

mapper.xml file:

dao interface layer:

2. Front-background interaction (react as the front-end framework, springBoot as the back-end framework)

1. The background must pay attention to @RequestMapping("/xx") in the Controller layer

2. In the react code: Add in the package.json file (to prevent cross-domain): "proxy": "http://127.0.0.1:8080"--a background domain name like this

3. The fields of the table in react correspond to the attributes in the entity class and must be consistent

4. Add the code to interact with the background data in the react code:

// 请求后台数据
  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
      })
      })
  }

     The above code is a function about querying the page. Adding, modifying, and deleting generally click the button to save, the data is saved to the database and can be displayed on the page, and then to update the data, all the operated data will be displayed.

   The above is my summary, I hope you can put forward valuable opinions.