图们市建设局网站,毕业设计成品网站,专门做问卷的调查的网站,手机app官方安装下载看了很多 关于 SpringBoot 增删改查 的文章 #xff0c;但是 React 前端框架这块似乎没什么人玩#xff0c;一般都是Vue进行整合 #xff0c;所以想写一篇关于 React 整合 SpringBoot 增删改查的项目 React 学习区域 React中文教程: https://www.php.cn/doc/react/tutorial/… 看了很多 关于 SpringBoot 增删改查 的文章 但是 React 前端框架这块似乎没什么人玩一般都是Vue进行整合 所以想写一篇关于 React 整合 SpringBoot 增删改查的项目 React 学习区域 React中文教程: https://www.php.cn/doc/react/tutorial/tutorial.html React 社区: https://www.php.cn/doc/react/tutorial/tutorial.html 其他React技术社区 : https://www.duidaima.com/Group/Category/React
搭建环境
导入依赖
dependenciesdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-data-jpa/artifactId/dependencydependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactId/dependencydependencygroupIdcom.alibaba/groupIdartifactIddruid/artifactIdversion1.1.10/version/dependencydependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactId/dependencydependencygroupIdorg.apache.commons/groupIdartifactIdcommons-text/artifactIdversion1.2/version/dependency/dependencies这里我们使用的Spring Data JPA 来作为持久层 当然你也可以使用MyBATIS 或者其他方案
为什么选择 JPA
因为JPA 他可以自动根据实体类进行生成表
配置对应的数据库 连接 spring:datasource:driver-class-name: com.mysql.jdbc.Driverurl: jdbc:mysql://localhost:3306/reactusername: rootpassword: 123456type: com.alibaba.druid.pool.DruidDataSourcejpa:show-sql: truehibernate:ddl-auto: updatedatabase: mysqldatabase-platform: org.hibernate.dialect.MySQL5InnoDBDialect编写实体类
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 {IdGeneratedValue(strategy GenerationType.IDENTITY)private Long id;private String name;
}
编写 Dao层(Mapper) import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;Repository
public interface UserDao extends JpaRepositoryUser,Long {}
大家这里可以 把 ddl-auto : create
前端环境
使用create-react-app创建react应用
xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置语法检查、jsx编译、devServer… 下载好了所有相关的依赖 可以直接运行一个简单效果 react提供了一个用于创建react项目的脚手架库: create-react-app 项目的整体技术架构为: react webpack es6 eslint 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化 1.2. 创建项目并启动
第一步全局安装
npm install -g create-react-app第二步切换到想创项目的目录使用命令
create-react-app hello-react第三步进入项目文件夹
cd hello-react第四步启动项目
npm startReact 脚手架项目结构
public ---- 静态资源文件夹favicon.icon ------ 网站页签图标index.html -------- 主页面logo192.png ------- logo图logo512.png ------- logo图manifest.json ----- 应用加壳的配置文件robots.txt -------- 爬虫协议文件
src ---- 源码文件夹App.css -------- App组件的样式App.js --------- App组件App.test.js ---- 用于给App做测试index.css ------ 样式index.js ------- 入口文件logo.svg ------- logo图reportWebVitals.js--- 页面性能分析文件(需要web-vitals库的支持)setupTests.js---- 组件单元测试的文件(需要jest-dom库的支持)Index.js 是入口文件
import React from react;
import ReactDOM from react-dom;
import bootstrap/dist/css/bootstrap.min.cssimport App from ./App;ReactDOM.render(App /, document.getElementById(root));
前端代码 import React, {Component} from react;
import axios from axios
import ./App.cssclass App extends Component {constructor(props) {super(props);this.state {id:,name:,list:[]}}render() {return (div classNamecontainer-fluid style{{marginTop: 20px}}div classNamerowdiv classNamecol-xs-4 col-xs-offset-1table classNametable table-borderedtheadtrthID/thth用户名/thth操作/th/tr/theadtbody{this.state.list.map(item{return (tr key{item.id}td{item.id}/tdtd{item.name}/tdtdbutton classNamebtn btn-primary onClick{(){this.setState({id:item.id,name:item.name})}}修改/buttonbutton classNamebtn btn-danger style{{marginLeft:5px}} onClick{(){this.deleteItem(item)}}删除/button/td/tr)})}/tbody/table/divdiv classNamecol-xs-3 col-xs-offset-1form classNameform-horizontaldiv classNameform-grouplabel htmlForname classNamecol-xs-3用户名/labeldiv classNamecol-xs-8input typetext idname classNameform-control value{this.state.name} onChange{(e){this.setState({name:e.target.value})}}//div/divdiv classNameform-groupdiv classNamecol-sm-offset-2 col-sm-10button classNamebtn btn-default onClick{this.handleFormSubmit}提交/button/div/div/form/div/div/div);}componentDidMount(){this.query();}query () {axios.get(/user).then(({data}){this.setState({list:data});})}deleteItem (item) {axios.delete(/user/${item.id}).then(({data}){console.log(data);this.query();})}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();})}}
}export default App;
前端源码 https://github.com/jaywhen/springboot-react-crud-frontend后端源码: https://github.com/jaywhen/springboot-react-crud-backend
