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>
  1. 指定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>
  1. 添加依赖
<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>
  1. 添加插件
<plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
  1. 配置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
  1. 编写启动类
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);
    }
}
  1. 持久化对象类
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;
}
  1. 持久化操作接口
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> {


}
  1. 控制层
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;
    }
}
  1. 启动后台项目
  2. 在项目根路径创建前端项目，使用create-react-app 
npx create-react-app web

给命令会在当前目录下使用create-react-app创建一个react单页项目

  1. 进入web目录，添加依赖库
 npm install axios bootstrap@3.3.7 --save
  1. 在package.json中增加前后端交互代理
"proxy": "http://localhost:8080"
  1. 删除前端项目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;
  1. 在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'));

  1. 接下来进行页面布局，这是一个简单的增删改查功能，所以只需要在一个页面编写全部功能即可，左侧为一个表格，右侧为一个表单，如下图


    页面布局

  2. 首先利用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>
    );
}
  1. 添加表格
<table className="table table-bordered">
  <thead>
   <tr>
       <th>ID</th>
       <th>用户名</th>
       <th>操作</th>
   </tr>
   </thead>
   <tbody>

   </tbody>
</table>
  1. 添加表单
<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>
  1. 初始化 state 
constructor(props) {
    super(props);
    this.state = {
        id:'',
        name:'',
        list:[]
    }
}
  1. 实现查询函数，并在App组件挂载渲染完成后执行查询函数
  • 引入axios 

import axios from 'axios';
  • 声明查询函数
query = () =>{
    axios.get('/user').then(({data})=>{
        this.setState({
            list:data   
        });
    });
}
  • 组件挂载完成后执行查询函数
componentDidMount(){
    this.query();
}
  1. 向表格中填充数据
<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>
  1. 对表单中的文本框和提交按钮进行控制
  • 文本框
<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();
        })
    }
}
  1. 对表格中每一行的修改和删除按钮进行事件处理
<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();
    })
}
  1. 执行npm start启动前端
    26.表单数据居中显示
  • 添加App.css 
.table th, .table td {
    text-align: center;
    vertical-align: middle!important;
}
  • App.js中引入App.css 
import './App.css'

源码地址：
https://gitee.com/qinaichen/react-crud.git

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,558评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,002评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,036评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,024评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,144评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,255评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,295评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,068评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,478评论 1赞 305
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,789评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,965评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,649评论 4赞 336
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,267评论 3赞 318
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,982评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,800评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,847评论 2赞 351

推荐阅读更多精彩内容