我正在尝试用java、spring和thymeleaf做一个amazon克隆web应用程序。我的数据库中有多个产品,我想在页面中显示,如下所示(在本例中,我的数据库中有3个产品):
我使用thymeleaf th:each来遍历数据库中的产品。但是当我尝试放置多行时有一个问题。我使用引导行和列,以便每行有3个产品。当有3个以上的产品要显示时,我需要用thymeleaf动态添加另一行,问题就来了。以下是所有基本代码:
这是html:
<div class="row" th:each="row : ${rows}">
<div class="col-xl-4" th:each="product : ${products}">
<div class="product-container">
<div class="product">
<p th:text="${product.getTitle()}"></p>
<div class="d-flex justify-content-center">
<small>$</small>
<strong th:text="${product.getPrice()}"></strong>
</div>
<div class="d-flex justify-content-center mb-2">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<img th:src="${product.getImageUrl()}">
<div class="d-flex justify-content-center">
<button>Add To Cart</button>
</div>
</div>
</div>
</div>
</div>
这是控制器:
@Controller
@RequiredArgsConstructor
public class HomeController {
private final ProductService productService;
@GetMapping("/home")
public ModelAndView showHome(){
ModelAndView modelAndView = new ModelAndView();
modelAndView.addObject("products", productService.getAllProducts());
modelAndView.addObject("rows", productService.getRows());
System.out.println(productService.getRows().size());
return modelAndView;
}
}
这就是产品服务:
@Service
@RequiredArgsConstructor
public class ProductService {
private final ProductRepository productRepository;
public List<ProductDto> getAllProducts(){
List<ProductEntity> productsEntity = productRepository.findAll();
List<ProductDto> productsDto = new ArrayList<>();
for (ProductEntity product :
productsEntity) {
productsDto.add(ProductMapper.entityToDto(product));
}
return productsDto;
}
public List<Integer> getRows() {
List<ProductEntity> productEntities = productRepository.findAll();
List<Integer> rows = new ArrayList<>();
int rowCount = productEntities.size() / 4;
for (int i = 0; i <= rowCount; i++)
rows.add(i);
return rows;
}
}
如果我向数据库中再添加一个产品,则会发生这种情况,因此总共有4个产品:
当我有4个产品时,它应该添加另一行,并且第4个产品应该显示在该行上。我的整个逻辑是这样的:使用productservice中的getrows()计算应该添加多少行,考虑数据库中产品的数量,然后遍历产品。但我认为问题出在这里。对于每一行,我显示数据库中的每一个产品。我需要一种方法,只显示第一行的前3个产品,然后再显示第二行的下3个产品,等等。我如何实现这一点?
1条答案
按热度按时间h22fl7wq1#
使用bootstrap,您不需要处理所有这些。要在每行中显示3个产品,您只需执行以下操作。
col类表示每行可能使用的12列中的列数。所以,如果您想要三个等宽的列,可以使用.col-4。