【问题标题】:Spring boot + (Thymeleaf is overriding React JS views)Spring boot +(Thymeleaf 覆盖 React JS 视图)
【发布时间】:2020-03-24 01:31:39
【问题描述】:

我已经使用 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 视图?模型视图示例?

【问题讨论】:

    标签: reactjs spring spring-boot thymeleaf


    【解决方案1】:

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

    在 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

    【讨论】:

    • 1.如果将其更改为 @RestController 它现在只返回一个字符串而不是一个视图。 2.所以我可以通过使用这个包.js来摆脱这个解决方案中的“return 'index.html'”部分?
    • 不仅仅是 Restcontroller。您还需要创建一个控制器来返回 index.html 页面以开始渲染反应页面。查看我的演示示例了解所有详细信息
    • 对于 bundle.js 文件我需要 webback 吗?不仅纱线会这样做。
    • Yarn 只是一个包管理器。你需要 babel 和 webpack 。 Babel 是编译器,webpack 是打包器。此外,您可能想更改问题标题,因为这更多的是“reactjs with spring boot”问题
    • 所以在 package.json 中我也应该告诉使用 webpack?目前,Maven 前端正在调用“react-scripts buld”
    猜你喜欢
    • 2017-04-14
    • 2015-05-01
    • 2015-12-27
    • 1970-01-01
    • 2016-04-20
    • 2015-04-07
    • 2017-07-23
    • 2017-06-18
    • 2018-11-02
    相关资源
    最近更新 更多