spring-boot react如何一步一步实现增删改查

<parent>

     <groupid>org.springframework.boot</groupid>

     <artifactid>spring-boot-starter-parent</artifactid>

     <version> 2.0 . 6 .release</version>

     <relativepath/> <!-- lookup parent from repository -->

</parent>

<properties>

     <project.build.sourceencoding>utf- 8 </project.build.sourceencoding>

     <project.reporting.outputencoding>utf- 8 </project.reporting.outputencoding>

     <java.version> 1.8 </java.version>

</properties>

<dependencies>

     <dependency>

         <groupid>org.springframework.boot</groupid>

         <artifactid>spring-boot-starter-web</artifactid>

     </dependency>

     <dependency>

         <groupid>org.springframework.boot</groupid>

         <artifactid>spring-boot-starter-test</artifactid>

         <scope>test</scope>

     </dependency>

     <dependency>

         <groupid>org.springframework.boot</groupid>

         <artifactid>spring-boot-starter-data-jpa</artifactid>

     </dependency>

     <dependency>

         <groupid>mysql</groupid>

         <artifactid>mysql-connector-java</artifactid>

     </dependency>

     <dependency>

       <groupid>com.alibaba</groupid>

       <artifactid>druid</artifactid>

       <version> 1.1 . 10 </version>

     </dependency>

     <dependency>

       <groupid>org.projectlombok</groupid>

       <artifactid>lombok</artifactid>

     </dependency>

     <dependency>

         <groupid>org.apache测试数据mons</groupid>

         <artifactid>commons-text</artifactid>

         <version> 1.2 </version>

     </dependency>

</dependencies>

<plugin>

     <groupid>org.springframework.boot</groupid>

     <artifactid>spring-boot-maven-plugin</artifactid>

</plugin>

spring:

  datasource:

   driver- class -name: com.mysql.jdbc.driver

   url: jdbc:mysql: //localhost:3306/react

   username: root

   password: 123456

   type: com.alibaba.druid.pool.druiddatasource

  jpa:

   show-sql: true

   hibernate:

    ddl-auto: update

   database: mysql

   database-platform: org.hibernate.dialect.mysql5innodbdialect

package com.example.react;

import org.springframework.boot.springapplication;

import org.springframework.boot.autoconfigure.springbootapplication;

@springbootapplication

public class reactapplication {

     public static void main(string[] args) {

         springapplication.run(reactapplication. class , args);

     }

}

package com.example.react.model;

import lombok.*;

import lombok.experimental.accessors;

import javax.persistence.*;

/**

  * 用户类

  */

@table (name = "t_user" )

@entity

@setter

@getter

@noargsconstructor

@allargsconstructor

@tostring

@accessors (chain = true )

public class user {

   /**

    * 用户id

    */

   @id

   @generatedvalue (strategy = generationtype.identity)

   private long id;

   /**

    * 用户名

    */

   private string name;

}

package com.example.react.dao;

import com.example.react.model.user;

import org.springframework.data.jpa.repository.jparepository;

import org.springframework.stereotype.repository;

@repository

public interface userdao extends jparepository<user, long > {

}

package com.example.react.controller;

import com.example.react.model.user;

import com.example.react.dao.userdao;

import org.springframework.beans.factory.annotation.autowired;

import org.springframework.web.bind.annotation.*;

import java.util.list;

@restcontroller

@requestmapping ( "/user" )

public class usercontroller {

   @autowired

   private userdao userdao;

   /**

    * 查询所有用户

    * @return

    */

   @getmapping

   public list<user> all(){

     return this .userdao.findall();

   }

   /**

    * 保存用户

    * 新增或更新

    * @param user

    * @return

    */

   @postmapping

   public object save( @requestbody user user){

     this .userdao.save(user);

     return true ;

   }

   /**

    * 根据id删除用户

    * @param id

    * @return

    */

   @deletemapping ( "/{id}" )

   public object delete( @pathvariable long id){

     this .userdao.deletebyid(id);

     return true ;

   }

}

npx create-react-app web

npm install axios bootstrap @3 .3. 7 --save

"proxy" : http: //localhost:8080

import react from 'react' ;

import reactdom from 'react-dom' ;

import app from './app' ;

reactdom.render(<app />, document.getelementbyid( 'root' ));

import react, { component } from 'react' ;

class app extends component {

  render() {

   return (

    <div>

    </div>

   );

  }

}

export default app;

import react from 'react' ;

import reactdom from 'react-dom' ;

import 'bootstrap/dist/css/bootstrap.min.css' ;

import app from './app' ;

reactdom.render(<app />, document.getelementbyid( 'root' ));

render() {

   return (

     <div classname= "container-fluid" style={{margintop: '20px' }}>

       <div classname= "row" >

         <div classname= "col-xs-4 col-xs-offset-1" >

           <div classname= "panel panel-default" >

             <div classname= "panel-body" >

               表格区域

             </div>

           </div>

         </div>

         <div classname= "col-xs-3 col-xs-offset-1" >

           <div classname= "panel panel-default" >

             <div classname= "panel-body" >

               表单区域

             </div>

           </div>

         </div>

       </div>

     </div>

   );

}

<table classname= "table table-bordered" >

  <thead>

   <tr>

     <th>id</th>

     <th>用户名</th>

     <th>操作</th>

   </tr>

   </thead>

   <tbody>

   </tbody>

</table>

<form classname= "form-horizontal" >

   <div classname= "form-group" >

     <label htmlfor= "name" classname= "col-xs-3" >用户名</label>

     <div classname= "col-xs-8" >

       <input type= "text" id= "name" classname= "form-control" />

     </div>

   </div>

   <div classname= "form-group" >

     <div classname= "col-sm-offset-2 col-sm-10" >

       <button classname= "btn btn-default" >提交</button>

     </div>

   </div>

</form>

constructor(props) {

   super (props);

   this .state = {

     id: '' ,

     name: '' ,

     list:[]

   }

}

import axios from 'axios' ;

query = () =>{

     axios.get( '/user' ).then(({data})=>{

         this .setstate({

             list:data  

         });

     });

}

componentdidmount(){

     this .query();

}

<tbody>

{

   this .state.list.map(item=>{

     return (

       <tr key={item.id}>

         <td>{item.id}</td>

         <td>{item.name}</td>

         <td>

           <button classname= "btn btn-primary" >修改</button>

           <button classname= "btn btn-danger" style={{marginleft: '5px' }}>删除</button>

         </td>

       </tr>

     )

   })

}

</tbody>

<input type= "text" id= "name" classname= "form-control" value={ this .state.name} onchange={

   (e)=>{

     this .setstate({

       name:e.target.value

     })

   }

}/>

<button classname= "btn btn-default" onclick={ this .handleformsubmit}>提交</button>

handleformsubmit = (e) => {

   e.preventdefault();

   if ( this .state.name != '' ) {

     axios.post( '/user' , {

       id: ! this .state.id ? '' : this .state.id,

       name: this .state.name

     }).then(({data}) => {

       this .setstate({

         id: '' ,

         name: ''

       });

       this .query();

     })

   }

}

<button classname= "btn btn-primary" onclick={() => {

    this .setstate({id: item.id, name: item.name})

  }}>修改

  </button>

  <button classname= "btn btn-danger" style={{marginleft: '5px' }}

      onclick={() => {

        this .deleteitem(item)

      }}>删除

  </button>

deleteitem = (item) => {

   axios.delete(`/user/${item.id}`).then(({data}) => {

     this .query();

   })

}

.table th, .table td {

   text-align: center;

   vertical-align: middle!important;

}

import './app.css'