网上看了许多,大多数都是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)项目中的更多相关文章

  1. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  2. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  3. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  4. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  5. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  6. 多个springboot项目部署在同一tomcat上,出现jmx错误

    多个springboot项目部署在同一tomcat上,出现jmx错误 原因:因为jmx某些东西重复,禁用jmx就可以了 endpoints.jmx.unique-names=true

  7. 【记录】Spring项目转化为Spring Web项目

    前言 在将Spring项目转化为Spring Mvc项目时出现了点问题,总是无法成功部署,查阅资料也并没有找到一个完美的解决方案,最后是参考在idea中创建maven web app项目后的目录才成功 ...

  8. Spring Boot项目部署到外部Tomcat服务器

    2017年04月27日 23:33:52 阅读数:7542 前言 Spring Boot项目一般都是内嵌tomcat或者jetty服务器运行,很少用war包部署到外部的服务容器,即使放到linux中, ...

  9. Idea+maven+tomcat部署第一个tomcat项目

    IDEA创建Maven项目及部署发布,IDEA配置Tomcat,创建java源文件夹. 此教程适合刚刚使用IDEA的新手. 工具/原料   IntelliJ IDEA 2016.3.4 apache- ...

随机推荐

  1. 使用SecureCRT的SFTP在WINDOWS与LINUX之间传输文件(转载)

    参考文献: http://ice-k.iteye.com/blog/1068275 http://www.cnblogs.com/chen1987lei/archive/2010/11/26/1888 ...

  2. JTA 分布式事务

    什么是JTA - 2009-07-25 18:31:06|  分类: 技术文章|举报|字号 订阅     什么是JTA? Java Transaction API(Java事务API) (JTA)Ja ...

  3. WebRequestHelper

    老是浪费时间写这个类,干脆记录在博客里: public class WebRequestHelper { #region Post public static CookieContainer GetC ...

  4. JS基础:this的指向以及call、apply的作用

    this 的指向 在具体的实际应用中,this 的指向无法在函数定义时确定,而是在函数执行的时候才确定的,根据执行时的环境大致可以分为以下3种: 1.当函数作为普通函数调用时,this 指向全局对象 ...

  5. windows10上pip install channels

    之前一直在MBP上做开发,在windows偶尔改一次代码,最近在windows上Pipi nstall了一次Django Channels,其中到twisted那步出现数坑 1. Microsoft  ...

  6. Install OpenCV on Ubuntu or Debian

    http://milq.github.io/install-OpenCV-ubuntu-debian/转注:就用第一个方法吧,第二个方法的那个sh文件执行失败,因为我价格kurento.org的源,在 ...

  7. .net捕捉全局未处理异常的3种方式

    前言: 我们在实际项目开发中,经常会遇到一些不可预见的异常产生,有的异常在程序运行时就对其进行处理(try)但是,有的程序不需要每一个地方都用try进行处理,那么针对这种情况,可以参照下面的方式,实现 ...

  8. php根据地球上任意两点的经纬度计算两点间的距离 原理

    地球是一个近乎标准的椭球体,它的赤道半径为6378.140千米,极半径为6356.755千米,平均半径6371.004千米.如果我们假设地球是一个完美的球体,那么它的半径就是地球的平均半径,记为R.如 ...

  9. 对Python这门课程的理解。

    这门课程是现在热门,对之后的就业和利用的帮助还是很大的. 希望能学完整本书并且能学以致用,而不是单单只获得理论知识. 学完之后能用于数据库.大数据处理.图形编程等等

  10. 集成支付宝,报警告warning: (arm64) /Users/tommy/Desktop/Project/ios-msdk-git/AlipaySDK4Standard/AlipaySDK/Library/UTDI

    集成支付宝的时候遇到的问题,找到了解决办法,还说明了原因,非常好,觉得应该记下来,反正以我的记性下次一定是会忘光光哒~ 1)  Go to Build Settings -> Build Opt ...