Question

我正在使用SpringBoot和Thymeleaf。

加载页面后，如何在index.html中显示产品列表？

当前products.html显示了bd中的所有产品，而index.html显示了具有products.html形式的标头的片段，但是我不知道如何显示这些产品。

如果我的方法不对，怎么做才是正确的方法？

index.html

<body>
<section layout:fragment="custom-content">
    <br> <br>
    <div class="container">
        <section th:replace="products :: content"></section>
                <br> <br>
        <h2>This is index.html</h2>
        </div>

这是带有products.html片段的index.html index.html

products.html

<body>
<div class="container">
    <div th:fragment="content">

        <h3>This is the fragment from products.html</h3>

        <h2>List of products</h2>
        <table class="table table-stripped">
            <tr>
                <th>Id</th>
                <th>Description</th>
                <th>Price</th>
                <th>Image Url</th>
                <th>List</th>
                <th>Edit</th>
                <th>Delete</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.imageUrl}"></td>
                <td><a th:href="${'/products/numArt/' + product.numArt}">View</a></td>
                <td><a>Edit</a></td>
                <td><a>Delete</a></td>
            </tr>
        </table>

        <div class="row">
            <div class="col-sm-3">
                <button>New Product</button>
            </div>
        </div>

    </div>
</div>

这是products.html products.html

控制器

@GetMapping("/products")
public String listProducts(Model model) {
    System.out.println("Get all products...");
    model.addAttribute("products", productRepository.findAll());
     return "products";
    }

Answer 1

您正在将products.html中的products对象与片段绑定在一起。因此，使另一种方法如下所示。

@GetMapping("/products/fragment")
public ModelAndView listOfProducts() {
     ModelAndView mv = new ModelAndView("index::custom-content");
    mv.addObject("products", productRepository.findAll());
     return mv;
    }

并通过index.html中的ajax调用它。在索引文件中添加以下行

<script th:inline="javascript">
    $(document).ready(function () {
		   loadData();
       });
       
     function loadData(){
     $.ajax({
			  type: 'get',
			  url: /*[[ @{'/product/fragment'} ]]*/,
			  
			  success: function(data){
				 $('.container').html(data);
				},
			  async:false
			})
     
     
     }
     </script>

<body>
<section >
    <br> <br>
    
    
    <div class="container">
    <div th:fragment="custom-content">
        <section th:replace="products :: content"></section>
                <br> <br>
        <h2>This is index.html</h2>
    </div>
    </div>
    </section>....

希望这会有所帮助。

使用Thymeleaf在index.html中显示列表

1 个答案: