时间戳

首页 > 解决方案 > Spring boot +（Thymeleaf 覆盖 React JS 视图）

reactjs - Spring boot +（Thymeleaf 覆盖 React JS 视图）

问题描述

我已经使用 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 模板来展示它。我有一个模板 index.html，其中实际上是 React JS 构建文件，所以每次我必须将构建文件复制到那里，JS 和 CSS 文件到一个静态文件夹中（在构建之后）。现在 React APP 变得更加复杂，我决定使用 frontendmaven 插件直接用后端构建它。

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

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

或者有可能摆脱 Thymeleaf 吗？在为这些视图提供服务时，是否可以通过 Java 控制器将变量发送到 ReactJS 视图？模型视图示例？

标签： reactjsspringspring-bootthymeleaf

解决方案

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

在 webconfiguration 中删除 ThymeleafViewResolver 并切换到 Rest api（@Restcontroller 而不是 @Controller）。这样你就告诉 Spring 不要渲染视图，而是充当 api-endpoints。

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

现在问题来了，你的申请的出发点是什么

仅出于此目的，您可以创建一个控制器来处理对“/”的请求，并将返回位于资源/模板文件夹下的索引页面。这个 index.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

推荐阅读