商城网页上的商品数据基本都放在数据库,都是在servlet中对数据库信息进行操作的。我还没有学到对数据库的操作,就暂时在servlet中模拟几条数据,继而显示在jsp页面中。
1、创建一个Phone的对象
public class Phone {
//id,名称,图片,价格
private int id;
private String name;
private String image;
private String price;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getImage() {
return image;
}
public void setImage(String image) {
this.image = image;
}
public String getPrice() {
return price;
}
public void setPrice(String price) {
this.price = price;
}
}
2、模拟3条手机产品信息
Phone phone = new Phone();
phone.setId(001);
phone.setImage("https://img11.360buyimg.com/n4/jfs/t10675/253/1344769770/66891/92d54ca4/59df2e7fN86c99a27.jpg!q95.jpg");
phone.setName("iphone6");
phone.setPrice("4000");
3、添加到List中
List<Phone> phoneList = new ArrayList<>();
phoneList.add(phone);
phoneList.add(phone1);
phoneList.add(phone2);
4、将List对象存放到域对象中
request.setAttribute("list",phoneList);
5、请求转发到JSP页面中
request.getRequestDispatcher("/phone_list.jsp").forward(request,response);
6、在JSP页面中接受值
使用EL表达式(获取值)和JSTL标签(forEach循环)
<c:forEach items="${list}" var="phone">
<div class="col-md-2">
<img src="${phone.image}">
<p>
<a href="product_info.html" style="color: green">${phone.name}</a>
</p>
<p>
<font color="#ff0000">商城价:¥${phone.price}</font>
</p>
</div>
</c:forEach>
END:效果图