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

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

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)【操作數(shù)據(jù)庫，在該項目中是查詢商品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; /*** 執(zhí)行數(shù)據(jù)查詢* *在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
【連接數(shù)據(jù)庫操作和顯示】

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; /*** * 調(diào)用*DaoImpl中的方法查詢回所有的商品，然后進行頁面跳轉(zhuǎn)**/ 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的商品，這種方法有點死板，在這個功能上可以生成相應(yīng)范圍內(nèi)的六個隨機數(shù)來作為要展示的每種商品的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");} %>

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。