spring-boot react如何一步一步实现增删改查
更新时间：2018年11月02日 15:04:41 作者：心扬
这篇文章主要介绍了spring-boot react如何一步一步实现增删改查，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
1、maven继承spring-boot
<parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.0.6.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent>
2、指定jdk版本和字符集
<properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> </properties>
3、添加依赖
<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.commons</groupId>
<artifactId>commons-text</artifactId>
<version>1.2</version>
</dependency>
</dependencies>
4、添加插件
<plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </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<User,Long> {
}
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<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;
}
}
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中增加前后端交互代理
"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(<App />, document.getElementById('root'));
App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
</div>
);
}
}
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(<App />, document.getElementById('root'));
16、接下来进行页面布局，这是一个简单的增删改查功能，所以只需要在一个页面编写全部功能即可，左侧为一个表格，右侧为一个表单，如下图
17、首先利用bootstrap中提供的栅格模式，将页面分为左右两栏，两栏中分别有一个panel
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>
);
}
18、添加表格
<table className="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
19、添加表单
<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>
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、向表格中填充数据
<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>
23、对表单中的文本框和提交按钮进行控制
文本框
<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();
})
}
}
24、对表格中每一行的修改和删除按钮进行事件处理
<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();
})
}
25、执行npm start启动前端
26、表单数据居中显示添加App.css
.table th, .table td {
text-align: center;
vertical-align: middle!important;
}
App.js中引入App.css
import './App.css'
源码地址：react-crud_jb51.rar
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- Java springboot Mongodb增删改查代码实例
- Spring boot+mybatis+thymeleaf 实现登录注册增删改查功能的示例代码
- Spring boot2+jpa+thymeleaf实现增删改查
- SpringBoot+MySQL+Jpa实现对数据库的增删改查和分页详解
- spring boot2结合mybatis增删改查的实现
- SpringBoot + Mybatis增删改查实战记录
- Springboot+hibernate实现简单的增删改查示例
- IntelliJ Idea SpringBoot 数据库增删改查实例详解
- 使用SpringBoot开发Restful服务实现增删改查功能
- Spring Boot实现简单的增删改查
相关文章
文档中可通过应用不同的字体来呈现不一样的视觉效果，通过字体来实现文档布局、排版等设计需要。本文将详细为大家介绍如何利用Java实现替换PDF文中的字体，需要的可以参考一下2022-03-03
SpringBoot后端接收参数优化代码示例(统一处理前端参数)
使用Spring Boot开发API的时候,读取请求参数是服务端编码中最基本的一项操作,下面这篇文章主要给大家介绍了关于SpringBoot后端接收参数优化(统一处理前端参数)的相关资料,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了Spring中属性注入的几种方式以及复杂属性的注入详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了Java并发编程之同步容器,文中有非常详细的代码示例,对正在学习java的小伙伴们有很好的帮助,需要的朋友可以参考下2021-05-05
这篇文章主要介绍了SpringMVC后端返回数据到前端代码示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了MyBatis分页查询返回list的时候出现null的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要为大家详细介绍了springboot实现发送邮件，qq邮箱代码实现邮件发送，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
SpringBoot整合mybatis-generator-maven-plugin的方法
这篇文章主要介绍了SpringBoot整合mybatis-generator-maven-plugin,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
解决Springboot项目报错:java:错误:不支持发行版本 17
这篇文章主要给大家介绍了关于解决Springboot项目报错:java:错误:不支持发行版本17的相关资料,这个错误意味着你的Spring Boot项目正在使用Java 17这个版本,但是你的项目中未配置正确的Java版本,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了Java的位图和布隆过滤器,在学习之前的数据结构的时候,我们使用的数据量都不是很大,但是在生活中,我们常常面临着要处理大量数据结果并得出最终结果,那么有没有什么数据结构可以帮助我们实现这样的功能呢,想要继续了解的朋友可以参考下2024-10-10
最新评论