Spring boot + (Thymeleaf 正在覆盖 React JS 视图)

Question

我用Thymeleaf创建了一个错误页面，我以这种方式使用它，因为我可以通过控制器向用户发送错误消息。

@ExceptionHandler(Exception.class)
public ModelAndView controllerExceptionHandler(
Exception e,
HttpServletRequest request) {
ModelAndView mav = new ModelAndView();
String[] messages = e.getMessage().split("</br>");
mav.addObject("message", messages);
mav.addObject("timestamp", new Date());
mav.addObject("url", request.getRequestURL());
mav.addObject("headerMessage", "Error :(");
mav.addObject("contentMessage", "We are working hard to resolve it.");
mav.setViewName("error");
mav.addObject("status", 500);
return mav;
}

在模板文件中，我有这样的东西：

<h1 class="mr-3 pr-3 align-top border-right inline-block align-content-center" th:text="${status}">404</h1>
<div class="inline-block align-middle">
<div>
<h1>Something went wrong...</h1>
</div>
<th:block th:each="msg : ${message}">
<h2 class="font-weight-normal lead" id="desc" th:text="${msg}">The page you requested was not found.</h2>
</th:block>
</div>

以前我有一个简单的 React JS 应用程序也运行在 Spring Boot 和 Thymeleaf 上，然后我使用 Thymeleaf 模板来展示这一点。我有一个模板索引.html实际上是 React JS 构建文件，所以每次我都必须将构建文件复制到其中，JS 和 CSS 文件到静态文件夹中(构建后(。现在 React APP 变得更加复杂，我决定使用 frontendmaven 插件直接通过后端构建它。

如何告诉 Spring Boot 在解析 ReactJS 视图时不要尝试使用 Thymeleaf？这就是我为 ReactJS 视图提供服务的方式。

@RequestMapping("/")
public String index() {
return "index.html";
}

还是有可能摆脱百里香叶？在提供 ReactJS 视图时，是否可以通过 Java 控制器将变量发送到这些视图？模型和视图示例？

Answer 1

如何告诉 Spring Boot 在解析时不要尝试使用 Thymeleaf 反应 JS 视图？

在 webconfiguration 中删除 ThymeleafViewResolver 并切换到 Rest api(@Restcontroller 而不是 @Controller (。通过这种方式，您告诉Spring不要渲染视图，而是充当api端点。

现在你可以更新你的反应代码来调用这些 Spring rest API，使用 maven-frontend-plugin 预构建并部署。

现在问题来了，您的应用程序的陈述点是什么

仅出于此目的，您可以创建一个控制器来处理对"/"的请求，并将返回驻留在资源/模板文件夹下的索引页。这个索引.html页面将使用你预构建的反应页面作为 -

<script src="built/bundle.js"></script>

演示应用程序：https://github.com/ankidaemon/Spring5-ReactJS/tree/master/Section5/Video5.3/SpringSecurity-Reactjs-RestAPI

是否可以通过 Java 将变量发送到 React JS 视图 提供这些视图时的控制器

这被称为服务器端渲染，但是对于 react 来说，这与 jsp 和 freemarker、thymeleaf 等不同，我会说这不是一个简单的方法来做 react。你可以试试运气 -> https://codeburst.io/jsx-react-js-java-server-side-rendering-ssr-2018-cf3aaff7969d