Question

在资源文件夹下的springboot项目中，我放置了模板。

所有其他html网页都能加载css，并且 product.html 未加载。

使用百里香叶片进行整合。

Github网址 - ：https://github.com/javayp/springbootmvc

ProductController.java

package com.sm.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

import com.sm.services.ProductService;

@Controller
public class ProductController {

    private ProductService productService;

    @Autowired
    public void setProductService(ProductService productService) {
        this.productService = productService;
    }

    @RequestMapping("/products")
    public String productList(Model model){
        model.addAttribute("products", productService.productList());
        return "productList";
    }

    @RequestMapping("/viewproduct/{id}")
    public String productList(@PathVariable("id") Integer id,Model model){
        System.out.println("Id is------------"+id);
        model.addAttribute("product", productService.getProductById(id));
        return "product";
    }

}

CommonHeader- 的 header.html中

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common-header">
<title>DevOps</title>

<!-- Bootstrap core CSS -->
<link type="text/css"
    th:href="@{webjars/bootstrap/3.3.6/css/bootstrap.min.css}"
    rel="stylesheet" media="screen" />

<!--Custom Css  -->
<link type="text/css" th:href="@{/css/style.css}" rel="stylesheet"
    media="Screen" />
</head>

<div th:fragment="before-body-script">
    <script th:src="@{/webjars/jquery/2.1.4/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/3.3.6/js/bootstrap.min.js}"></script>
</div>
</html>

products.html放在

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header :: common-header" />

<body>
    <div th:replace="common/navbar :: common-navbar"></div>

    <div class="container">
        <div th:if="${not #lists.isEmpty(products)}">
            <h2>Product List</h2>
            <table class="table table-striped">
                <tr>
                    <th>Id</th>
                    <th>Description</th>
                    <th>Price</th>
                    <th>Image URL</th>
                    <th>Link</th>
                </tr>
                <tr th:each="product: ${products}">
                    <td th:text="${product.id}"></td>
                    <td th:text="${product.description}"></td>
                    <td th:text="${product.price}"></td>
                    <td th:text="${product.url}"></td>
                    <td><a th:href="${'viewproduct/'+product.id}">View</a></td>
                </tr>
            </table>
        </div>
    </div>

    <div th:replace="common/header :: before-body-scripts"></div>

</body>
</html>

product.html

<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header :: common-header" />

<body>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm2 control-label">Product ID</label>
            <div class="col-sm-10">
                <p class="form-control-static" th:text="${product.id}">Product
                    ID</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm2 control-label">Description</label>
            <div class="col-sm-10">
                <p class="form-control-static" th:text="${product.description}">Description</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm2 control-label">Price</label>
            <div class="col-sm-10">
                <p class="form-control-static" th:text="${product.price}">Price</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm2 control-label">Url</label>
            <div class="col-sm-10">
                <p class="form-control-static" th:text="${product.url}">url</p>
            </div>
        </div>
    </form>
</body>
</html>

Answer 1

在您添加Bootstrap CSS样式表的header.html中，在webjars路径之前添加斜杠/：

<!-- Bootstrap core CSS -->
<link type="text/css"
      th:href="@{/webjars/bootstrap/3.3.6/css/bootstrap.min.css}"
      rel="stylesheet" media="screen"/>

无法在spring boot资源模板中加载css

}

1 个答案: