SpringBoot React Demo
这个Demo 按照 地址 进行搭建的。
项目地址:xiaoFsu
学习一下React...
新建SpringBoot 项目连接数据库
这步不多说了,网上超级多的教程。
React Web项目
首先呢,React 使用 Node 进行一个启动,将它作为一个单独的项目进行启动,启动的端口是3000。
1:创建项目
npx create-react-app web
在项目路径打开命令窗口,输入命令构建一个 React 项目。
构建完成之后如图所示:
2:修改App.js文件
红框选中的为请求地址 + 请求参数。
黄框选中的为 在 state 中取值。
蓝框选中的为 遍历 result 中的值。
3:修改 package.json 文件
"proxy": "http://localhost:8081"
将以上 添加至 package.json 文件中,其中请求地址及端口需对应,在线文件。
4:启动项目
我们知道可以在 Idea 右上角方便的启动 Springboot 项目,现在我们将 React 项目启动放置在右上角。
1:选中该选项
2:添加 npm 启动项
3:两个启动项
红色框中的为 React 项目启动项。
蓝色框中的为 SpringBoot 项目启动项。
使用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 增删改查截图:
Q.E.D.