jsp横向遍历数据

在这里插入图片描述
使用jquery或者vue从后台拿到数据后,foreach或者v-for遍历默认都是竖着遍历,怎么才能像如图所示的样式展示商品呢?
其实很简单,只需要先设置好样式,在遍历数据就好

<div v-for="item in items">
<div
	style="border: 1px solid; width: 190px; height: 160px; float: left;"><!--画好格式,直接for遍历即可 -->
	<div style="border: 1px solid; width: 140px; height: 100px;margin: auto;">
		<img v-bind:src="item.image">
	</div>
	<div >
		<div>
			<a :href="'/CA/itemEdit/'+item.id" id="title">{{item.title}}</a>
		</div>
		<div><span id="price">{{item.price}}</span>
		</div>
	</div>
</div>
</div>
### JSP动态生成HTML页面并遍历数据 JSP(JavaServer Pages)是一种服务器端技术,允许开发者嵌入Java代码以动态生成HTML内容。通过使用`<c:forEach>`标签或其他循环结构,可以在JSP页面中轻松遍历集合或映射对象的数据。 #### 使用`<c:forEach>`遍历列表 如果需要在JSP页面中展示来自后端的列表数据,可以通过`request.setAttribute()`将数据存储到请求作用域中[^1]。随后,在JSP页面中利用JSTL库中的`<c:forEach>`标签进行迭代: ```html <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html> <html> <head> <title>遍历列表</title> </head> <body> <h3>书籍列表:</h3> <ul> <c:forEach var="book" items="${books}"> <li>${book}</li> </c:forEach> </ul> </body> </html> ``` 上述代码假设后端已将名为`books`的列表存入请求作用域中。每次迭代时,变量`book`代表当前项的内容[^2]。 #### 遍历Map键值对 当需要处理更复杂的数据结构如`Map`时,同样可以借助`<c:forEach>`标签完成操作。以下是一个示例,展示了如何遍历`Map`类型的键和对应的值: ```html <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html> <html> <head> <title>遍历 Map 键值对</title> </head> <body> <h3>用户信息:</h3> <table border="1"> <tr> <th>用户名</th> <th>年龄</th> </tr> <c:forEach var="entry" items="${users}"> <tr> <td>${entry.key}</td> <td>${entry.value}</td> </tr> </c:forEach> </table> </body> </html> ``` 这里假定`users`为一个`Map<String, Integer>`实例,并已被放置于请求作用域内[^3]。 #### 结合Spring MVC框架传递Map至前端 对于采用Spring MVC架构的应用程序而言,可以直接向模型添加`Map`对象以便其自动可用给视图层[JSP]: ```java @Controller public class UserController { @RequestMapping("/showUsers") public String showUsers(Model model){ Map<String,Integer> users=new HashMap<>(); users.put("Alice", 28); users.put("Bob", 24); model.addAttribute("users", users); return "userView"; // 转发到 userView.jsp } } ``` 此段代码片段说明了如何在一个控制器方法里准备数据并通过Model传送到指定名称的JSP文件去渲染。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值