1、 思路是首先首頁打開是一個寫死的html檔案，我們需要在使用者通路的時候，是一個從資料庫裡先得到資料然後再展示。是以我們讓使用者通路servlet，轉發到index.jsp上。
package com.sikiedu.servelt;
import java.io.IOException;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.sikiedu.service.GoodsService;
/**
* Servlet implementation class IndexServlet
*/
@WebServlet("/index")
public class IndexServlet extends HttpServlet {
//為了友善調用Service裡的方法，這裡建立一個service對象
private GoodsService gService=new GoodsService();
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//取得條幅商品
Map<String,Object> scrollGoods=gService.getScrollGoods();
request.setAttribute("scroll", scrollGoods);
//取得熱銷商品
List<Map<String, Object>> hotlist=gService.getHotGoodsList();//得到熱銷商品的List集合後面通過jstl和el表達式放到頁面上
request.setAttribute("hotList", hotlist);//放到request裡面
//取得新品商品
List<Map<String, Object>> newList=gService.getNewGoodsList();
request.setAttribute("newList", newList);
//跳轉到index.jsp
//帶資料的請求的轉發
request.getRequestDispatcher("index.jsp").forward(request, response);
}
}
2、 關于jsp頁面的開發，我們需要用jstl和el表達式結合使用。
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<title>商品清單</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript" src="js/cart.js"></script>
</head>
<body>
<!-- 頭部 -->
<jsp:include page="/header.jsp"></jsp:include>
<!--banner-->
<div class="banner">
<div class="container">
<h2 class="hdng"><a href="detail.action?goodid=7">${scroll.name }</a><span></span></h2>
<p>今日精選推薦</p>
<a class="banner_a" href="javascript:;" onclick="buy(7)">立刻購買</a>
<div class="banner-text">
<a href="detail.action?goodid=7">
<img src="${pageContext.request.contextPath }${scroll.cover}" alt="${scroll.name }" width="350" height="350">
</a>
</div>
</div>
</div>
<!--//banner-->
<div class="subscribe2"></div>
<!--gallery-->
<div class="gallery">
<div class="container">
<div class="alert alert-danger">熱銷推薦</div>
<div class="gallery-grids">
<c:forEach items="${hotList}" var="g">
<div class="col-md-4 gallery-grid glry-two">
<a href="detail.action?goodid=6">
<img src="${pageContext.request.contextPath }${g.cover}" class="img-responsive" alt="${g.name }" width="350" height="350"/>
</a>
<div class="gallery-info galrr-info-two">
<p>
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
<a href="detail.action?goodid=6">檢視詳情</a>
</p>
<a class="shop" href="javascript:;" onclick="buy(6)">立刻購買</a>
<div class="clearfix"> </div>
</div>
<div class="galy-info">
<p>${g.typeName } > ${g.name }</p>
<div class="galry">
<div class="prices">
<h5 class="item_price">¥ ${g.price }</h5>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</c:forEach>
</div>
<div class="clearfix"></div>
<div class="alert alert-info">新品推薦</div>
<div class="gallery-grids">
<c:forEach items="${newList }" var="g">
<div class="col-md-3 gallery-grid ">
<a href="detail.action?goodid=14">
<img src="${pageContext.request.contextPath }${g.cover}" class="img-responsive" alt="${g.name }"/>
</a>
<div class="gallery-info">
<p>
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
<a href="detail.action?goodid=14">檢視詳情</a>
</p>
<a class="shop" href="javascript:;" onclick="buy(14)">立刻購買</a>
<div class="clearfix"> </div>
</div>
<div class="galy-info">
<p>${g.typeName } > ${g.name }</p>
<div class="galry">
<div class="prices">
<h5 class="item_price">¥ ${g.price }</h5>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</c:forEach>
</div>
</div>
</div>
<!--//gallery-->
<!--subscribe-->
<div class="subscribe"></div>
<!--//subscribe-->
<!-- 尾部 -->
<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>
這是我們需要引入的JSTL核心标簽
使用forEach循環周遊hotList集合，需要兩個參數，第一個是集合，第二個是參數名稱。
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)