spring-bootreact如何一步一步实现增删改查
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 Listall(){ 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(, 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、对表单中的文本框和提交按钮进行控制
文本框
{ 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、对表格中每一行的修改和删除按钮进行事件处理
删除操作函数
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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
文章名称:spring-bootreact如何一步一步实现增删改查
文章起源:http://pwwzsj.com/article/jscjpe.html