Spring集成React用来开发前端----SpringMVC + react 开发实时测试

妖狐艹你老母 2022-06-15 06:40 281阅读 0赞

之前的博客主要是写了如何用maven将webpack功能开启用于打包react相关的组件成bundle.js，并把bundle.js导入HTML中，这里主要介绍一下如何在项目开发中随时查看react修改的效果，这里运行的project使用了springMVC；IDE用STS（spring tool suite，Eclipse类似）；React在Atom中修改；测试结果在chrome浏览器。

之前我尝试过将webpack部署到project中，run project并测试react，发现run failure，原因是bundle.js文件 out of sync，最终原因并没有很了解，猜测是webpack是maven plugin导入的，在run project时也是maven build 这样就会run project时候生成新的bundle.js，造成project building时的bundle.js总在更新，就会出现out of sync。这里的策略应该webpack和project分开运行，并将webpack生成的bundle.js路径设置成在project里生成，从而进行导入。 步骤如下：

**1、项目结构**  
webpack和我的application project 是分开的两个maven webapp project，webpack project按照之前的maven-webpack进行配置，application project就是你自己的application了  
![这里写图片描述][format_png]

![下面看一下webpack.config.js配置的bundle.js输出路径][webpack.config.js_bundle.js]

webpack.config.js里output的file路径设置成你application project里的路径，从而将bundle.js导入application（这里我用相对路径定位到api-view project）。

![这里写图片描述][format_png 1]

ok, 这样 就可以 mven clean install 或者 npm run-script watch(修改实时生成bundle.js)，不懂的看我另一篇博文啦[Spring集成React用来开发前端----maven项目中用webpack打包react相关组件][Spring_React_----maven_webpack_react]

**2、下面来看一下project里 关于react的组成**  
我的project是用了springMVC，前期的架构是很low的，controller里控制页面跳转及业务逻辑处理，当然会有service/dao/entity等，持久层用的hibernate，前端主要是ajax发请求，接受后端controller传递过来的json数据去拼接页面，对！很乱很low的一种方式，所以我后边的业务都打算用react实现了（前期选型真的很重要，有时候别偷懒会发现后边开发越来越顺利…），看一下project结构：

![这里写图片描述][format_png 2]

bundle.js是webpack project生成的，这里只要我修改了react相关组件，由于webpack是watch模式，它就会自动打包成新的bundle.js，对，打包到这里！bundle.js这个文件在哪里用得到呢？在queryAll.jsp里，看一下：  
![这里写图片描述][format_png 3]

ok，这样你就可以顺利的run application了，application run起来后，你的应用就可以本地运行并用浏览器打开你的测试页面了（我的就是queryAll.jsp了），下一步的关注点就是bundle.js里的内容了，这里再重温下webpack，webpack将你写的所有react组件以及用到的package统统打包成一个文件，就是 bundle.js。下面介绍下如何开发react的IDE

**3、Atom用来开发react**  
这个比较好用，你只需要把installed Packages里language-babel install一下就好，它可以转换jsx成js。  
然后**webpack project的woringdir（上边有提到）在Atom中打开，这里就可以随意编辑里边的jsx文件并保存，由于webpack的watch模式，会实时生成bundle.js文件，这个js在application中更新从而触发整个正在running的project在容器中更新（需要设置STS中的workspace：Preferences–>General–>workspace–>build automatically/refresh using native hooks or polling/save automatically before build打勾），这样你就可以直接在前端测试页面看到变化了。**

![这里写图片描述][format_png 4]

当你在atom中修改组件并保存后，不要立刻就去页面测试，因为project 重新 refresh 并且building稍微用些时间。

[format_png]: /images/20220615/cebfc57306cb4b69aa8b7d596060181c.png
[webpack.config.js_bundle.js]: /images/20220615/8488bcc1248843e08d344d113a2646fa.png
[format_png 1]: /images/20220615/d019594a407948ecafbf127007ad70a4.png
[Spring_React_----maven_webpack_react]: http://blog.csdn.net/linfujian1999/article/details/72639194
[format_png 2]: /images/20220615/2c73037be93f428fa7f221b95c1145da.png
[format_png 3]: /images/20220615/8bf87ba84fc04856ab614d7f1c411fb8.png
[format_png 4]: /images/20220615/88907f4ecfd0496088a3001c81a40d3a.png