create react app 项目部署在Spring(Tomcat)项目中
网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸。。。
正常的打包就不说了。至于package.json里面这个hompage的参数,无所谓,最后没有用到。项目用的库就是这些,react-router4,新的路由~

看下打包出来的项目: 相比一下其他方式(做后台出家的,前端那一堆复杂的打包方法没用过~)大同小异,直接使用脚手架确实方便,
改了下生成js的名字,生成的每次都要加几个随机的字符。

首先看下路由,就是这样

接下来,讲重点!!
Spring的@RequestMapping与Reat-Router4路由结合,这里也是最蛋疼的地方。
①如果是想要返回页面这种,比如{indexUrl},实际值是/wechat/index,
那么在Spring里面,RequestMapping 要一样!要一样!要一样!说3遍

什么,你说路径里包含了项目的名字,比如这个项目叫 health ,
那你就等着打开 http://localhost:8080/health/wechat/index 的时候GG吧,
赶紧拿nginx做个反向代理,反正你访问的路径只能是 http://{nginx配置的域名}/wechat/index,
相当于就是说的根路径,跟拿nginx做静态服务器的那种一样,要根目录访问。这样一来,React-router的路由才和你重叠了,
感觉就像写CSS欺骗人一样,明明这2货没啥联系,八竿子挨不着,结果实际的显示效果这2人竟然合体了......
这个时候返回页面就交给Spring了,把打包的html改成jsp,jsp哟,这下想往页面里丢什么参数都好办了

然后呢,然后就没有了。接下来的路由管理就交给React-Router4了,/add 和 /submit 现在都是由路由来响应了,Spring里面就没有RequestMapping了。
当然,你应该知道通过React-Router过去的页面,点击浏览器的刷新是要404的,这个就不解释了。
②实际项目中也还是会有通过浏览器路径跳转的,这个时候也有些蛋疼的时候,比如注册页面完成跳转到index页面。
那么只好写多个路由打包了...这个有点蛋疼,把需要额外@RequestMapping返回的页面,同上面的方式打包
打个包
又打个包
③接口,这个加个跨域的处理就行~

create react app 项目部署在Spring(Tomcat)项目中的更多相关文章
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- 多个springboot项目部署在同一tomcat上,出现jmx错误
多个springboot项目部署在同一tomcat上,出现jmx错误 原因:因为jmx某些东西重复,禁用jmx就可以了 endpoints.jmx.unique-names=true
- 【记录】Spring项目转化为Spring Web项目
前言 在将Spring项目转化为Spring Mvc项目时出现了点问题,总是无法成功部署,查阅资料也并没有找到一个完美的解决方案,最后是参考在idea中创建maven web app项目后的目录才成功 ...
- Spring Boot项目部署到外部Tomcat服务器
2017年04月27日 23:33:52 阅读数:7542 前言 Spring Boot项目一般都是内嵌tomcat或者jetty服务器运行,很少用war包部署到外部的服务容器,即使放到linux中, ...
- Idea+maven+tomcat部署第一个tomcat项目
IDEA创建Maven项目及部署发布,IDEA配置Tomcat,创建java源文件夹. 此教程适合刚刚使用IDEA的新手. 工具/原料 IntelliJ IDEA 2016.3.4 apache- ...
随机推荐
- 修改flume源码,使其HTTPSource具备访问路径功能
目前有一个需求,就是Flume可以作为一个类似于tomcat的服务器,可以通过post请求进行访问,并且路径需要:ip:port/contextPath格式. 经过一些资料获悉,httpSource只 ...
- 新盘进行LVM的划分
echo "- - -" > /sys/class/scsi_host/host2/scan LVM是 Logical Volume Manager(逻辑卷管理)的简写,它由 ...
- 【.NET Core】ASP.NET Core之IdentityServer4(1):快速入门
[.NET Core]ASP.NET Core之IdentityServer4 本文中的IdentityServer4基于上节的jenkins 进行docker自动化部署. 使用了MariaDB,EF ...
- 记住这个网站:服务器相关数据统计网站 http://news.netcraft.com/
http://news.netcraft.com/ 需要参考现在服务器相关数据,可以上这个网站. 当然google趋势也是一个可选得备案. 有一个数据统计更全面的: http://w3techs.co ...
- CSS的display:table
好久都没有写博客了,似乎总是觉得少了些什么-- 刚好最近在工作中遇到了一个新的东西display:table,这个也是css的布局的一种,而且又是display的,之前已经写过了display的fle ...
- spirng底层实现原理
什么是框架?框架解决的是什么问题? 编程有一个准则,Don't Repeat Yourself(不要重复你的代码),所以我们会将重复的代码抽取出来,封装到方法中:如果封装的方法过多,将将这些方法封装成 ...
- 如何查看chrome浏览器已保存的密码
该方法是针对在chrome中已经存储了登陆密码的情况. chrome版本是 66.0.3359.139(正式版本) (64 位),不知道哪天会改了这个bug. 一般来说,我们登陆chrome浏览器已经 ...
- redis的持久化之AOF
AOF Redis 分别提供了 RDB 和 AOF 两种持久化机制: RDB 将数据库的快照(snapshot)以二进制的方式保存到磁盘中. AOF 则以协议文本的方式,将所有对数据库进行过写入的命令 ...
- Java 使用BigDecimal类处理高精度计算
Java在java.math包中提供的API类BigDecimal,用来对超过16位有效位的数进行精确的运算.双精度浮点型变量double可以处理16位有效数,但在实际应用中,可能需要对更大或者更小的 ...
- css的input文本框的 propertychange、focus、blur
1.输入框检查的需求--即时搜索--解决方案 当input的value发生变化就会发生,无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化,propertychange,只要当前对象属性发生改变.(I ...