爪哇.百里香叶.CRUD 操作后,页面上的所有 .CSS 样式都消失了 [英] Java. Thymeleaf. After CRUD operation all .CSS styles on page disappearing

查看:35
本文介绍了爪哇.百里香叶.CRUD 操作后,页面上的所有 .CSS 样式都消失了的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

一个简单的 CRUD Web 应用程序.我想用 thymeleaf 绑定 UI 和后端.在我创建一些数据并获得服务器响应之后 - 所有样式都消失了.我是 thymeleaf、CSS 和 HTML 的新手.有人可以帮我找出问题出在哪里吗?之前和之后:

保存操作方法:

 @PostMapping("/user/save")public ModelAndView save(@ModelAttribute("userDTO") @Valid UserDTO userDTO,BindingResult bindingResult, WebRequest 请求, Errors 错误) {用户注册 = new User();如果 (!bindingResult.hasErrors()) {注册 = createUserAccount(userDTO, bindingResult);}如果(注册 == 空){bindingResult.rejectValue("email", "message.regError");}如果(bindingResult.hasErrors()){bindingResult.getAllErrors().forEach(error -> log.error(error.toString()));return new ModelAndView("授权/注册", "错误", bindingResult.getAllErrors());} 别的 {return new ModelAndView("users", "user", userDTO);}}

注册.html

<html lang="en" xmlns:th="http://www.thymeleaf.org"><头><meta charset="UTF-8"><title>用户注册</title><div th:replace="fragments/css_fragments::css_background_layer"></div><身体><div style="text-align:center"><div th:replace="fragments/menu_fragments::header_menu"></div>

<div style="margin: 0 auto; width: 20%; padding-top: 18%;"><div class="registration-form"><!--/*@thymesVar id="userDTO" type="com.socnetw.socnetw.model.UserDTO"*/--><form id="form" method="post" action="/user/save" th:object="${userDTO}"><标签><input name="username" placeholder="Username" required="required" th:field="*{username}"类型=文本"><ul><li th:each="err : ${#fields.errors('username')}" th:text="${err}"></li><标签><input name="realName" placeholder="真实姓名"type="text" th:field="*{realName}"><ul><li th:each="err : ${#fields.errors('realName')}" th:text="${err}"></li><span></span><br><标签><input name="email" placeholder="Email" required="required" th:field="*{email}"类型=电子邮件"><ul><li th:each="err : ${#fields.errors('email')}" th:text="${err}"></li><标签><input name="phoneNumber" placeholder="电话号码" required="required" th:field="*{phoneNumber}"类型=电话"><ul><li th:each="err : ${#fields.errors('phoneNumber')}" th:text="${err}"></li><span></span><br><标签><input name="password" placeholder="密码" th:field="*{password}"required="required" type="密码"><ul><li th:each="err : ${#fields.errors('password')}" th:text="${err}"></li><标签><input name="passwordMatcher" placeholder="重复密码" th:field="*{matchingPassword}"required="required" type="密码"><ul><li th:each="err : ${#fields.errors('matchingPassword')}" th:text="${err}"></li><span></span><br><button type="submit" style="margin-top: 20px">注册</button></表单>

</html>

css 片段

<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html"><div th:fragment="css_background_layer"><link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"rel="样式表"th:href="@{'https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'}"类型=文本/CSS"><link href="css/style.css" rel="样式表"th:href="@{css/style.css}"类型=文本/CSS"><div class="overlay"></div>

</html>

解决方案

您需要对 css 使用绝对网址,而不是相对网址.当您转到 /user/save 时,它正在寻找 /user/save/css/style.css —— 它可能不存在.

th:href="@{/css/style.css}"

A have simple CRUD web application. And I want to bind UI and backend with thymeleaf. After I create some data and get server response - all styles are disappearing. I'm new to thymeleaf, CSS and HTML. Can someone help me to figure out where is the problem? Before and after:

Save operation method:

  @PostMapping("/user/save")
    public ModelAndView save(@ModelAttribute("userDTO") @Valid UserDTO userDTO,
                             BindingResult bindingResult, WebRequest request, Errors errors) {
        User registered = new User();
        if (!bindingResult.hasErrors()) {
            registered = createUserAccount(userDTO, bindingResult);
        }
        if (registered == null) {
            bindingResult.rejectValue("email", "message.regError");
        }
        if (bindingResult.hasErrors()) {
            bindingResult.getAllErrors().forEach(error -> log.error(error.toString()));
            return new ModelAndView("authorization/registration", "error", bindingResult.getAllErrors());
        } else {
            return new ModelAndView("users", "user", userDTO);
        }
    }

registration.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>User Registration</title>
    <div th:replace="fragments/css_fragments :: css_background_layer"></div>
</head>

<body>
<div style="text-align:center">
    <div th:replace="fragments/menu_fragments :: header_menu"></div>
</div>
<div style="margin: 0 auto; width: 20%; padding-top: 18%;">
    <div class="registration-form">
        <!--/*@thymesVar id="userDTO" type="com.socnetw.socnetw.model.UserDTO"*/-->
        <form id="form" method="post" action="/user/save" th:object="${userDTO}">
            <label>
                <input name="username" placeholder="Username" required="required" th:field="*{username}"
                       type="text">
            </label>
            <ul>
                <li th:each="err : ${#fields.errors('username')}" th:text="${err}"></li>
            </ul>
            <label>
                <input name="realName" placeholder="Real Name"
                       type="text" th:field="*{realName}">
            </label>
            <ul>
                <li th:each="err : ${#fields.errors('realName')}" th:text="${err}"></li>
            </ul>
            <span></span><br>
            <label>
                <input name="email" placeholder="Email" required="required" th:field="*{email}"
                       type="email">
            </label>
            <ul>
                <li th:each="err : ${#fields.errors('email')}" th:text="${err}"></li>
            </ul>

            <label>
                <input name="phoneNumber" placeholder="Phone Number" required="required" th:field="*{phoneNumber}"
                       type="tel">
            </label>
            <ul>
                <li th:each="err : ${#fields.errors('phoneNumber')}" th:text="${err}"></li>
            </ul>
            <span></span><br>

            <label>
                <input name="password" placeholder="Password" th:field="*{password}"
                       required="required" type="password">
            </label>
            <ul>
                <li th:each="err : ${#fields.errors('password')}" th:text="${err}"></li>
            </ul>
            <label>
                <input name="passwordMatcher" placeholder="Repeat password" th:field="*{matchingPassword}"
                       required="required" type="password">
            </label>
            <ul>
                <li th:each="err : ${#fields.errors('matchingPassword')}" th:text="${err}"></li>
            </ul>
            <span></span><br>
            <button type="submit" style="margin-top: 20px">Register</button>
        </form>
    </div>
</div>
</body>
</html>

css fragment

<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<div th:fragment="css_background_layer">

    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
          rel="stylesheet"
          th:href="@{'https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'}"
          type="text/css">

    <link href="css/style.css" rel="stylesheet"
          th:href="@{css/style.css}"
          type="text/css">

    <div class="overlay"></div>
</div>
</html>

解决方案

You need to use an absolute url to your css, rather than a relative one. When you go to /user/save it's looking for /user/save/css/style.css -- which probably doesn't exist.

th:href="@{/css/style.css}"

这篇关于爪哇.百里香叶.CRUD 操作后,页面上的所有 .CSS 样式都消失了的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
Java开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆