react mysql增删改查_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 bootstrap@3.3.7 --save

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

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、对表单中的文本框和提交按钮进行控制

文本框

(e)=>{

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

}}>修改

onClick={() => {

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'

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。