react java_Spring Boot与React集成的示例代码

前言

前不久学习了Web开发,用React写了前端,Spring Boot搭建了后端,然而没有成功地把两个工程结合起来,造成前端与后端之间需要跨域通信,带来了一些额外的工作。

这一次成功地将前端工程与后端结合在一个Project中,记录一下,也希望能帮到那些和我一样的入门小白。

环境

Windows 10 - x64, Java 1.8.0, node v8.9.4, npm 6.1.0

前奏

*JDK, Node 和 NPM请自行安装

新建一个Spring Boot工程

在Intellij里选择Spring Initializer新建,

09cd7402621ddce59284911b1b7b4834.png

依赖添加devTool和Web

8fce1c47d0cbd7439abc443b7a8d394b.png

随后就初始化了后端的Spring boot项目

在Spring boot项目的文件夹内,新建一个React工程,推荐用create-react-app,没有的话通过npm安装到全局

// npm install -g create-react-app

create-react-app frontene

主曲

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Spring Boot是一个用于构建Java应用程序的开源框架,它提供了快速、方便的方式来构建独立的、生产级别的应用程序。React是一个用于构建用户界面的JavaScript库,它提供了组件化的方式来构建现代化的Web应用程序。 要实现一个图床,可以使用Spring Boot来构建后端服务,使用React来构建前端界面。首先,我们可以使用Spring Boot来创建一个RESTful API服务,用于接收和处理上传的图片文件,并将其保存到服务器的文件系统或者数据库中。可以使用Spring Boot提供的各种工具和库来处理文件上传、文件存储、安全控制等功能。 接着,我们可以使用React来构建一个用户友好的前端界面,用于用户上传、浏览和管理图片。通过React组件化的特性,可以轻松地创建用户界面,包括图片上传组件、图片展示组件、图片管理组件等。同时,可以利用React的生命周期函数、状态管理等特性来优化用户体验,并提高前端界面的性能和可维护性。 在将Spring Boot后端服务和React前端界面集成起来时,可以使用RESTful API来实现数据的传输和交互。通过在前端使用Ajax或者Fetch等技术来调用后端API服务,并实现图片的上传、展示和管理功能。 综上所述,使用Spring BootReact来实现图床是一个非常合适的选择。Spring Boot提供了强大的后端服务能力,而React则提供了灵活、高效的前端界面构建方式,通过它们的结合可以实现一个功能完善、易用的图床应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值