SpringBoot和ReactJS项目集成开发

       前一阵子有前端管理台的开发需求,而之前前端涉及的较少,就找了一个现成的模版CoreUI,其中有ReactJS版本的模板,试了试就发现欲罢不能了。而后台为了开发便捷,还是选择了Spring Boot(其实还是选择Express玩JS全栈会更有意思)。

       后续整理了一套基于maven和gradle的SpringBootReact开发模版示例,上传到了Github(SpringBootReactDemo),这次就来简单谈谈其中的具体实现。

       首先在ReactJS开发的时候,使用“npm start”开启3000端口开始调试ReactJS,前端的JS请求后端数据的时候,由于后台使用SpringBoot开发,直接通过JS访问时会产生跨域问题,当然解决的方法很多,例如通过“Access-Control-Allow-Orgin”头域、JSONP等。但是在实际环境中,ReactJS资源打包后作为SpringBoot应用的静态资源部署时,并不会出现CORS问题,为此,最好能够将JS API后台接口请求发往3000端口后,再由3000端口转发至8080端口,好在Node提供了这个功能,且配置十分简单,只需要在pacakge.json中添加如下配置即可实现:

"proxy": "http://localhost:8080"

       解决了开发的问题,接下来最重要的就是打包了,最好的就是无论通过Grale还是Maven打包,能够自动执行ReactJS App的编译,并将编译后的静态资源一并打包。首先需要确保你的机器上安装好了Node环境,最好是也安装了Yarn,这个就不赘述了,接下来就来看看Gradle和Maven实现ReactJS App的编译工作。


Gradle方式

       build.gradle中的相关部分如下所示:

task npmBuild(type: Exec) {
    workingDir = file(NODE_PROJ_DIR)
    commandLine NODE_MANAGER, "run", "build"
}

task npmInstall(type: Exec) {
    workingDir = file(NODE_PROJ_DIR)
    commandLine NODE_MANAGER, "install"
}

task frontendAssemble(type: Copy, dependsOn: "npmBuild") {
    def buildDir = file("$NODE_PROJ_DIR/build")
    from buildDir
    into "build/resources/main/stat
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值