spring-boot react如何一步一步實(shí)現(xiàn)增刪改查
更新時(shí)間：2018年11月02日 15:04:41 作者：心揚(yáng)
這篇文章主要介紹了spring-boot react如何一步一步實(shí)現(xiàn)增刪改查，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
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、編寫啟動(dòng)類
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、持久化對(duì)象類
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;
}
/**
* 根據(jù)ID刪除用戶
* @param id
* @return
*/
@DeleteMapping("/{id}")
public Object delete(@PathVariable Long id){
this.userDao.deleteById(id);
return true;
}
}
10、啟動(dòng)后臺(tái)項(xiàng)目
11、在項(xiàng)目根路徑創(chuàng)建前端項(xiàng)目，使用create-react-app
npx create-react-app web
給命令會(huì)在當(dāng)前目錄下使用create-react-app創(chuàng)建一個(gè)react單頁項(xiàng)目
12、進(jìn)入web目錄，添加依賴庫
npm install axios bootstrap@3.3.7 --save
13、在package.json中增加前后端交互代理
"proxy": http://localhost:8080
14、刪除前端項(xiàng)目src 目錄下無用的文件，只保留index.js和App.js，并修改文件使其能夠運(yùn)行
目錄結(jié)構(gòu)
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、接下來進(jìn)行頁面布局，這是一個(gè)簡單的增刪改查功能，所以只需要在一個(gè)頁面編寫全部功能即可，左側(cè)為一個(gè)表格，右側(cè)為一個(gè)表單，如下圖
17、首先利用bootstrap中提供的柵格模式，將頁面分為左右兩欄，兩欄中分別有一個(gè)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">
表格區(qū)域
</div>
</div>
</div>
<div className="col-xs-3 col-xs-offset-1">
<div className="panel panel-default">
<div className="panel-body">
表單區(qū)域
</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、實(shí)現(xiàn)查詢函數(shù)，并在App組件掛載渲染完成后執(zhí)行查詢函數(shù)
引入axios
import axios from 'axios';
聲明查詢函數(shù)
query = () =>{
axios.get('/user').then(({data})=>{
this.setState({
list:data
});
});
}
組件掛載完成后執(zhí)行查詢函數(shù)
componentDidMount(){
this.query();
}
22、向表格中填充數(shù)據(jù)
<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、對(duì)表單中的文本框和提交按鈕進(jìn)行控制
文本框
<input type="text" id="name" className="form-control" value={this.state.name} onChange={
(e)=>{
this.setState({
name:e.target.value
})
}
}/>
提交按鈕點(diǎn)擊事件
<button className="btn btn-default" onClick={this.handleFormSubmit}>提交</button>
點(diǎn)擊事件函數(shù)
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、對(duì)表格中每一行的修改和刪除按鈕進(jìn)行事件處理
<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>
刪除操作函數(shù)
deleteItem = (item) => {
axios.delete(`/user/${item.id}`).then(({data}) => {
this.query();
})
}
25、執(zhí)行npm start啟動(dòng)前端
26、表單數(shù)據(jù)居中顯示添加App.css
.table th, .table td {
text-align: center;
vertical-align: middle!important;
}
App.js中引入App.css
import './App.css'
源碼地址：react-crud_jb51.rar
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Java springboot Mongodb增刪改查代碼實(shí)例
- Spring boot+mybatis+thymeleaf 實(shí)現(xiàn)登錄注冊(cè)增刪改查功能的示例代碼
- Spring boot2+jpa+thymeleaf實(shí)現(xiàn)增刪改查
- SpringBoot+MySQL+Jpa實(shí)現(xiàn)對(duì)數(shù)據(jù)庫的增刪改查和分頁詳解
- spring boot2結(jié)合mybatis增刪改查的實(shí)現(xiàn)
- SpringBoot + Mybatis增刪改查實(shí)戰(zhàn)記錄
- Springboot+hibernate實(shí)現(xiàn)簡單的增刪改查示例
- IntelliJ Idea SpringBoot 數(shù)據(jù)庫增刪改查實(shí)例詳解
- 使用SpringBoot開發(fā)Restful服務(wù)實(shí)現(xiàn)增刪改查功能
- Spring Boot實(shí)現(xiàn)簡單的增刪改查
相關(guān)文章
這篇文章主要介紹了SpringBoot如何自定義starter，Springboot的出現(xiàn)極大的簡化了開發(fā)人員的配置，而這之中的一大利器便是springboot的starter，starter是springboot的核心組成部分，下面來看看集體引用過程吧2022-01-01
這篇文章主要介紹了MyBatis-Plus執(zhí)行SQL分析打印過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
Google?Kaptcha驗(yàn)證碼生成的使用實(shí)例說明
這篇文章主要為大家介紹了Google?Kaptcha驗(yàn)證碼的使用實(shí)例說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-03-03
Java之BigDecimal實(shí)現(xiàn)詳解
這篇文章主要介紹了Java之BigDecimal實(shí)現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了Activiti常用類,需要的朋友可以參考下2014-08-08
Spring Boot文件上傳原理與實(shí)現(xiàn)詳解
這篇文章主要介紹了Spring Boot 文件上傳原理與實(shí)現(xiàn)詳解,前端文件上傳是面向多用戶的,多用戶之間可能存在上傳同一個(gè)名稱、類型的文件；為了避免文件沖突導(dǎo)致的覆蓋問題這些應(yīng)該在后臺(tái)進(jìn)行解決,需要的朋友可以參考下2024-01-01
Spring ApplicationListener監(jiān)聽器用法詳解
這篇文章主要介紹了Spring ApplicationListener監(jiān)聽器用法詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了Java多線程之同步工具類CountDownLatch，CountDownLatch是一個(gè)同步工具類，它允許一個(gè)或多個(gè)線程一直等待，直到其他線程執(zhí)行完后再執(zhí)行。例如，應(yīng)用程序的主線程希望在負(fù)責(zé)啟動(dòng)框架服務(wù)的線程已經(jīng)啟動(dòng)所有框架服務(wù)之后執(zhí)行,下面一起來學(xué)習(xí)學(xué)習(xí)內(nèi)容吧2021-10-10
本文給大家介紹ZXing-core生成二維碼的方法并解析，主要用到goggle發(fā)布的jar來實(shí)現(xiàn)二維碼功能，對(duì)此文感興趣的朋友一起學(xué)習(xí)吧2016-05-05
Spring注解@Configuration和@Component區(qū)別詳解
@Component和@Configuration都可以作為配置類,之前一直都沒覺得這兩個(gè)用起來有什么差別,可能有時(shí)程序跑的和自己想的有所區(qū)別也沒注意到,下面這篇文章主要給大家介紹了關(guān)于Spring注解@Configuration和@Component區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-04-04