SSH框架網上商城項目第14戰之商城首頁UI的設計。本站提示廣大學習愛好者：（SSH框架網上商城項目第14戰之商城首頁UI的設計）文章只能為提供參考，不一定能成為您想要的結果。以下是SSH框架網上商城項目第14戰之商城首頁UI的設計正文
後面我們應用EasyUI和SSH搭建好了後台的根本框架，做好了後台的根本功效，包含對商品種別的治理和商品的治理等，這一節我們開端搭建前台頁面。
做首頁的思緒：假定如今商品的營業邏輯都有了，起首我們須要創立一個監聽器，在項目啟動時將首頁的數據查詢出來放到application裡，即在監聽器裡挪用後台商品營業邏輯的辦法。
1. 首頁商品顯示邏輯
在首頁，我們只顯示商品熱門種別中的前幾個商品，好比熱門種別有兒童休閒類，女性休閒類，男性休閒類，那我們會有三個板塊來顯示分歧的商品類，每一個種別裡再顯示幾個詳細的商品。假如要完成如許的首頁的話，我們須要將哪些數據查詢出來呢？起首確定是熱門種別，即在數據庫中查詢種別是熱門的項，然後再從數據庫中依據熱門種別級聯查詢該種別的商品，如許我們所要的數據就都有了。上面我們先在後台完成這些查詢營業：
//CategoryService接口
public interface CategoryService extends BaseService<Category> {
//省略其他辦法……
//依據boelen值查詢熱門或非熱門種別
public List<Category> queryByHot(boolean hot);
}
@SuppressWarnings("unchecked")
@Service("categoryService")
public class CategoryServiceImpl extends BaseServiceImpl<Category> implements CategoryService {
//省略其他辦法……
@Override
public List<Category> queryByHot(boolean hot) {
String hql = "from Category c where c.hot=:hot";
return getSession().createQuery(hql)
.setBoolean("hot", hot)
.list();
}
}
//ProductService接口
public interface ProductService extends BaseService<Product> {
//省略其他辦法……
//依據熱門種別查詢推舉商品（僅僅查詢前4個）
public List<Product> querByCategoryId(int cid);
}
@SuppressWarnings("unchecked")
@Service("productService")
public class ProductServiceImpl extends BaseServiceImpl<Product> implements ProductService {
//省略其他辦法……
@Override
public List<Product> querByCategoryId(int cid) {
String hql = "from Product p join fetch p.category "
+ "where p.commend=true and p.open=true and p.category.id=:cid order by p.date desc";
return getSession().createQuery(hql)
.setInteger("cid", cid)
.setFirstResult(0)
.setMaxResults(4)
.list();
}
}
2. 創立InitDataListener獲得首頁數據
後台完成了商品的顯示邏輯營業，上面我們開端獲得所須要的數據了。起首創立一個監聽器InitDataListener繼續ServletContextListener，關於監聽器若何獲得Spring設置裝備擺設文件，請參考這篇博文：監聽器若何獲得Spring設置裝備擺設文件
//@Component //監聽器是web層的組件，它是tomcat實例化的，不是Spring實例化的。不克不及放到Spring中
public class InitDataListener implements ServletContextListener {
private ProductService productService = null;
private CategoryService categoryService = null;
private ApplicationContext context = null;
@Override
public void contextDestroyed(ServletContextEvent event) {
// TODO Auto-generated method stub
}
@Override
public void contextInitialized(ServletContextEvent event) {
context = WebApplicationContextUtils.getWebApplicationContext(event.getServletContext());
categoryService = (CategoryService) context.getBean("categoryService");//加載種別信息
productService = (ProductService) context.getBean("productService");//加載商品信息
List<List<Product>> bigList = new ArrayList<List<Product>>(); //bigList中寄存一個裝有Category類的list
// 1. 查詢出熱門種別
for(Category category : categoryService.queryByHot(true)) {
//依據熱門種別id獲得推舉商品信息
List<Product> lst = productService.querByCategoryId(category.getId());
bigList.add(lst); //將裝有category的list放到bigList中
}
// 2. 把查詢的bigList交給application內置對象
event.getServletContext().setAttribute("bigList", bigList);
}
}
好了，如今數據全都放到bigList這個聚集中了。
3.首頁UI頁面設計
UI首頁我們會從美工那拿到模板，這個模板是html，我們要做的就是將其改成我們的jsp，然後將bigList聚集中的數據顯示在首頁上。起首我們將模板所須要的圖片和css拷貝到WebRoot目次下，然後在WebRoot/public/head.jspf中將這兩個文件引入便可，由於head.jspf是其他頁面都要包括出去的公共頭：
然後將模板中的html嵌到前台首頁index.jsp中去，應用jstl標簽修正一下顯示內容，以下所示（只截圖顯示商品那一部門）：
如今我們進入之前做好的後台添加商品頁面，在女性休閒類添加幾個商品，然後啟動tomcat，運轉一下首頁index.jsp，後果以下：
好了，前台的UI界面算是搭好了，接上去就是完成一些分歧的營業了。
原文地址：http://blog.csdn.net/eson_15/article/details/51373403
以上就是本文的全體內容，願望對年夜家的進修有所贊助，也願望年夜家多多支撐。
