實現一：
大前提：商城只賣四種商品（book，clothes，electric，snack），要在首頁上分四行分別顯示這四種商品；
先上一個效果圖：

實現類：
Product.java
BooksDaoImpl.java(接口BooksDao.java)
ClothesDaoImpl.java(接口ClothesDao.java)
ElectricDaoImpl.java(接口ElectricDao.java)
SnacksDaoImpl.java(接口SnacksDao.java)
IndexProductsServlet.java
index.jsp
代碼、相關功能實現及描述如下：

Product.java
【一個java bean，存放商品屬性以及getter、setter方法】

import java.io.Serializable;public class Product implements Serializable {private static final long serialVersionUID = 1L;private Integer id;private String name;private String title;private double price;private String imgURL;private String manufacture;private Integer counts;private double countBack;private double cashBack;public double getCashBack() {return cashBack;}public void setCashBack(double cashBack) {this.cashBack = cashBack;}public double getCountBack() {return countBack;}public void setCountBack(double countBack) {this.countBack = countBack;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getTitle() {return title;}public void setTitle(String title) {this.title = title;}public double getPrice() {return price;}public void setPrice(double price) {this.price = price;}public String getImgURL() {return imgURL;}public void setImgURL(String imgURL) {this.imgURL = imgURL;}public String getManufacture() {return manufacture;}public void setManufacture(String manufacture) {this.manufacture = manufacture;}public Integer getCounts() {return counts;}public void setCounts(Integer counts) {this.counts = counts;} }

BooksDaoImpl.java
(接口BooksDao.java)【操作數據庫，在該項目中是查詢商品ClothesDaoImpl.java、ElectricDaoImpl.java、SnacksDaoImpl.java類似，代碼略】

import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import com.ymw.domain.PageBean; import com.ymw.domain.Product; import com.ymw.domain.User; import com.ymw.exception.DataBaseException; import com.ymw.util.DBUtil; /*** 執行數據查詢* *在selectAllBooks方法中查詢所有商品； **/ public class BooksDaoImpl implements BooksDao {@Overridepublic List<Product> selectAllBooks() {List<Product> books = new ArrayList<Product>();Connection connection = DBUtil.getConnection();PreparedStatement preparedStatement = null;ResultSet resultSet = null;try {String sql = "select * from books";preparedStatement = connection.prepareStatement(sql);resultSet = preparedStatement.executeQuery();while (resultSet.next()) {Product book = new Product();book.setCounts(resultSet.getInt("counts"));book.setId(resultSet.getInt("id"));book.setImgURL(resultSet.getString("imgURL"));book.setManufacture(resultSet.getString("manufacture"));book.setName(resultSet.getString("name"));book.setPrice(resultSet.getDouble("price"));book.setTitle(resultSet.getString("title"));books.add(book);}} catch (SQLException e) {throw new DataBaseException();} catch (Exception e) {e.printStackTrace();} finally {}return books;} }

IndexProductsServlet.java
【連接數據庫操作和顯示】

import java.io.IOException; import java.io.PrintWriter; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.ymw.exception.DataBaseException; import com.ymw.dao.BooksDao; import com.ymw.dao.BooksDaoImpl; import com.ymw.dao.ClothesDao; import com.ymw.dao.ClothesDaoImpl; import com.ymw.dao.ElectricDao; import com.ymw.dao.ElectricDaoImpl; import com.ymw.dao.SnacksDao; import com.ymw.dao.SnacksDaoImpl; import com.ymw.domain.Product; /*** * 調用*DaoImpl中的方法查詢回所有的商品，然后進行頁面跳轉**/ public class IndexProductsServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {BooksDao bookDao = new BooksDaoImpl();ClothesDao clothesDao = new ClothesDaoImpl();ElectricDao electricDao = new ElectricDaoImpl();SnacksDao snacksDao = new SnacksDaoImpl();try {List<Product> books = bookDao.selectAllBooks();List<Product> clothes = clothesDao.selectAllClothes();List<Product> electric = electricDao.selectAllElectric();List<Product> snacks = snacksDao.selectAllSnacks(); request.setAttribute("books", books);request.setAttribute("clothes", clothes);request.setAttribute("electric", electric);request.setAttribute("snacks", snacks); request.getRequestDispatcher("index.jsp").forward(request, response);} catch (DataBaseException e) {e.printStackTrace();request.getRequestDispatcher("dataBase.jsp").forward(request,response);} catch (Exception e) {e.printStackTrace();request.getRequestDispatcher("error.jsp").forward(request, response);}} }

index.jsp
（主要代碼）【在該jsp中使用了(c:forEach)的幾個屬性展示出每種id從1到6的商品，這種方法有點死板，在這個功能上可以生成相應范圍內的六個隨機數來作為要展示的每種商品的Id】

<%List<Product> books = (List<Product>) request.getAttribute("books");List<Product> clothes = (List<Product>) request.getAttribute("clothes");List<Product> electric = (List<Product>) request.getAttribute("electric");List<Product> snacks = (List<Product>) request.getAttribute("snacks");if (books != null || clothes != null || electric != null || snacks != null) { %> <div class="main"><div class="hot"><h2>今日特價</h2><ul class="product clearfix"><c:forEach var="book" items="${requestScope.books}" begin="1"end="6" step="1"><li><dl><dt><a href="findOneBook.do?id=${book.id}&aaa=1" target="_blank"><img src="${book.imgURL}" /></a></dt><dd class="title"><a href="findOneBook.do?id=${book.id}&aaa=1" target="_blank">${book.title}</a></dd><dd class="price">${book.price}</dd></dl></li></c:forEach><c:forEach var="cloth" items="${requestScope.clothes}" begin="1"end="6" step="1"><li><dl><dt><a href="findOneClothes.do?id=${cloth.id}&aaa=1"target="_blank"><img src="${cloth.imgURL}" /></a></dt><dd class="title"><a href="findOneClothes.do?id=${cloth.id}&aaa=1"target="_blank">${cloth.title}</a></dd><dd class="price">${cloth.price}</dd></dl></li></c:forEach></ul></div><div class="spacer clear"></div><div class="hot"><h2>熱賣推薦</h2><ul class="product clearfix"><c:forEach var="e" items="${requestScope.electric}" begin="1"end="6" step="1"><li><dl><dt><a href="findOneElectric.do?id=${e.id}&aaa=1" target="_blank"><img src="${e.imgURL}" /></a></dt><dd class="title"><a href="findOneElectric.do?id=${e.id}&aaa=1" target="_blank">${e.title}</a></dd><dd class="price">${e.price}</dd></dl></li></c:forEach><c:forEach var="snack" items="${requestScope.snacks}" begin="1"end="6" step="1"><li><dl><dt><a href="findOneSnack.do?id=${snack.id}&aaa=1" target="_blank"><img src="${snack.imgURL}" /></a></dt><dd class="title"><a href="findOneSnack.do?id=${snack.id}&aaa=1" target="_blank">${snack.title}</a></dd><dd class="price">${snack.price}</dd></dl></li></c:forEach></ul></div></div> <%} else {response.sendRedirect("indexProducts.do");} %>

在接下來的博客中會繼續更新其它形式的首頁實現，如：商品圖片自動跳轉、顯示最近瀏覽的商品等。

總結

以上是生活随笔為你收集整理的网上商城首页实现总结（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。