1、maven繼承spring-boot
成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司一直秉承“誠(chéng)信做人，踏實(shí)做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶多一個(gè)朋友！專(zhuān)注中小微企業(yè)官網(wǎng)定制，做網(wǎng)站、網(wǎng)站制作，塑造企業(yè)網(wǎng)絡(luò)形象打造互聯(lián)網(wǎng)企業(yè)效應(yīng)。
org.springframework.boot
spring-boot-starter-parent
2.0.6.RELEASE
2、指定jdk版本和字符集
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、編寫(xiě)啟動(dòng)類(lèi)
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ì)象類(lèi)
package com.example.react.model;
import lombok.*;
import lombok.experimental.Accessors;
import javax.persistence.*;
/**
* 用戶類(lèi)
*/
@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;
}
/**
* 根據(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
給命令會(huì)在當(dāng)前目錄下使用create-react-app創(chuàng)建一個(gè)react單頁(yè)項(xiàng)目
12、進(jìn)入web目錄，添加依賴庫(kù)
npm install axios bootstrap@3.3.7 --save
13、在package.json中增加前后端交互代理
"proxy": http://localhost:8080
14、刪除前端項(xiàng)目src 目錄下無(wú)用的文件，只保留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(, 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、接下來(lái)進(jìn)行頁(yè)面布局，這是一個(gè)簡(jiǎn)單的增刪改查功能，所以只需要在一個(gè)頁(yè)面編寫(xiě)全部功能即可，左側(cè)為一個(gè)表格，右側(cè)為一個(gè)表單，如下圖
17、首先利用bootstrap中提供的柵格模式，將頁(yè)面分為左右兩欄，兩欄中分別有一個(gè)panel
18、添加表格
19、添加表單
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ù)
{
this.state.list.map(item=>{
return (
| {item.id} |
{item.name} |
|
)
})
}
23、對(duì)表單中的文本框和提交按鈕進(jìn)行控制
文本框
提交按鈕點(diǎn)擊事件
點(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)行事件處理
刪除操作函數(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
源碼地址：react-crud_jb51.rar
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
新聞名稱：spring-bootreact如何一步一步實(shí)現(xiàn)增刪改查
標(biāo)題鏈接：
http://weahome.cn/article/jscjpe.html
重慶分公司
重慶分公司
