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

	org.springframework.boot
	spring-boot-starter-parent
	2.0.6.RELEASE
	 

	UTF-8
	UTF-8
	1.8

	
		org.springframework.boot
		spring-boot-starter-web
	
	
		org.springframework.boot
		spring-boot-starter-test
		test
	
	
		org.springframework.boot
		spring-boot-starter-data-jpa
	
	
		MySQL
		mysql-connector-java
	
    
      com.alibaba
      druid
      1.1.10
    
    
      org.projectlombok
      lombok
    
	
		org.apache.commons
		commons-text
		1.2
	

	org.springframework.boot
	spring-boot-maven-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 {


}

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 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(, document.getElementById('root'));

import React, { Component } from 'react';

class App extends Component {
 render() {
  return (
   

    
   
  );
 }
}

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(, document.getElementById('root'));

render() {
  return (
    

      

        

          

            

              表格区域
            
          
        
        

          

            

              表单区域
            
          
        
      
    
  );
}

 

  

    
ID
    
用户名
    
操作
  
  
  


  

  

    用户名
    

      
    
  
  

    

      提交
    
  

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

{
  this.state.list.map(item=>{
    return (
      
        {item.id}
        {item.name}
        
          修改
          删除
        
      
    )
  })
}

{
    this.setState({
      name:e.target.value
    })
  }
}/>

提交

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

 {
   this.setState({id: item.id, name: item.name})
 }}>修改
 
  {
       this.deleteItem(item)
     }}>删除
 

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'