SpringBoot React Demo

这个Demo 按照地址进行搭建的。

项目地址：xiaoFsu

学习一下React...

新建SpringBoot 项目连接数据库

这步不多说了，网上超级多的教程。

React Web项目

首先呢，React 使用 Node 进行一个启动，将它作为一个单独的项目进行启动，启动的端口是3000。

1：创建项目

npx create-react-app web 在项目路径打开命令窗口，输入命令构建一个 React 项目。

构建完成之后如图所示：

React 项目构建完成.png

2：修改App.js文件

详细的App.js文件

红框选中的为请求地址 + 请求参数。
黄框选中的为在 state 中取值。
蓝框选中的为遍历 result 中的值。

Appjs截图.png

3：修改 package.json 文件

"proxy": "http://localhost:8081"

将以上添加至 package.json 文件中，其中请求地址及端口需对应，在线文件。

4：启动项目

我们知道可以在 Idea 右上角方便的启动 Springboot 项目，现在我们将 React 项目启动放置在右上角。

1：选中该选项

Idea右上角截图.png

2：添加 npm 启动项

添加 npm 启动项.png

3：两个启动项

红色框中的为 React 项目启动项。
蓝色框中的为 SpringBoot 项目启动项。
两个启动项.png

使用SpringBoot + Mybatis 获取到数据做为后端处理。
使用React 作为前端展示数据，做到前后端分离。

之前介绍了如何将查出来的数据进行展示，接下来操作增删改。

由于我在 index.js中引入了 bootstrap.css，所以需要安装一下组件：npm install axios bootstrap@3.3.7 --save 。

在列表中的每一行添加一个操作栏目，分别放置删除与修改按钮：

{/*当修改点击，获取当前行的数据，放置在state域中。*/}
<button className="btn btn-primary" onClick={() => {
    this.setState({
        id: item.id,
        name: item.name,
        sex: item.sex,
        age: item.age
    })
}}>修改
</button>
{/*当删除点击，获取当前行的ID数据，传入到方法体内进行操作。*/}
<button className="btn btn-danger"
        style={{marginLeft: '5px'}}
        onClick={() => {
            this.deleteValue(item.id)
        }}>删除
</button>

也在当前页面的其他地方放置了增加与修改公用输入框，获取值的方法如下：

{/*默认获取到 state 域中的值，当数据发生时，会将当前变更的数据重新变更到 state域中。*/}
<input type="text" id="sex" className="form-control" value={this.state.sex}
       onChange={
           (e) => {
               this.setState({
                   sex: e.target.value
               })
           }
       }/>

为了在自定义方法体内使用this 关键字，获取到state值，需要在 constructor 初始化方法中进行初始化：
this.handleFormSubmit = this.handleFormSubmit.bind(this);
例如 handleFormSubmit 则是自定义方法名称。

SpringBoot + React 增删改查截图：