无法将CSS加载到Spring Boot资源模板中

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

所有其他HTML页面都已经能够加载CSS和 product.html 没有加载。

正在使用胸腺碎片互化。

github url--：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>

在您的 header.html中，您添加bootstrap css stylesheet，在通往webjars的路径之前添加slash /：

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

}

相关内容

最新更新

热门标签：