SpringBoot React Demo

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 增删改查截图:

image.png