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

1. maven继承spring-boot

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

2. 指定jdk版本和字符集

    UTF-8
    UTF-8
    1.8

3. 添加依赖

    
        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
    

4. 添加插件

    org.springframework.boot
    spring-boot-maven-plugin

5. 配置src/main/resources/application.yml

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

6. 编写启动类

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

7. 持久化对象类

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

8. 持久化操作接口

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 {


}

9. 控制层

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

10. 启动后台项目
11. 在项目根路径创建前端项目，使用create-react-app

npx create-react-app web

给命令会在当前目录下使用create-react-app创建一个react单页项目

12. 进入web目录，添加依赖库

 npm install axios [email protected] --save

13. 在package.json中增加前后端交互代理

"proxy": "http://localhost:8080"

14. 删除前端项目src 目录下无用的文件，只保留index.js和App.js，并修改文件使其能够运行

• 目录结构

  
  
  

  目录结构

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(, document.getElementById('root'));

• App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      

        
      
    );
  }
}

export default App;

15. 在index.js中引入bootstrap样式文件
    注意：这里只需要引入css文件即可

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'));

16. 接下来进行页面布局，这是一个简单的增删改查功能，所以只需要在一个页面编写全部功能即可，左侧为一个表格，右侧为一个表单，如下图

    
    
    

    页面布局

17. 首先利用bootstrap中提供的栅格模式，将页面分为左右两栏，两栏中分别有一个panel

render() {
   return (
        

            

                

                    

                        

                            表格区域
                        
                    
                
                

                    

                        

                            表单区域
                        
                    
                
            
        
    );
}

18. 添加表格

  

   

       
ID
       
用户名
       
操作
   
   
   


   

19. 添加表单

    

        用户名
        

            
        
    
    

        

            提交
        
    

20. 初始化 state

constructor(props) {
    super(props);
    this.state = {
        id:'',
        name:'',
        list:[]
    }
}

21. 实现查询函数，并在App组件挂载渲染完成后执行查询函数

• 引入axios

import axios from 'axios';

• 声明查询函数

query = () =>{
    axios.get('/user').then(({data})=>{
        this.setState({
            list:data   
        });
    });
}

• 组件挂载完成后执行查询函数

componentDidMount(){
    this.query();
}

22. 向表格中填充数据

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

23. 对表单中的文本框和提交按钮进行控制

• 文本框

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

24. 对表格中每一行的修改和删除按钮进行事件处理

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

• 删除操作函数

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

25. 执行npm start启动前端
    26.表单数据居中显示

• 添加App.css

.table th, .table td {
    text-align: center;
    vertical-align: middle!important;
}

• App.js中引入App.css

import './App.css'

源码地址：
https://gitee.com/qinaichen/react-crud.git