商城网页上的商品数据基本都放在数据库,都是在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:效果图