前面我們利用EasyUI和SSH搭建好了后臺的基本框架，做好了后臺的基本功能，包括對商品類別的管理和商品的管理等，這一節我們開始搭建前臺頁面。
做首頁的思路：假設現在商品的業務邏輯都有了，首先我們需要創建一個監聽器，在項目啟動時將首頁的數據查詢出來放到application里，即在監聽器里調用后臺商品業務邏輯的方法。
1. 首頁商品顯示邏輯
在首頁，我們只顯示商品熱點類別中的前幾個商品，比如熱點類別有兒童休閑類，女性休閑類，男性休閑類，那我們會有三個板塊來顯示不同的商品類，每個類別里再顯示幾個具體的商品。如果要實現這樣的首頁的話，我們需要將哪些數據查詢出來呢？首先肯定是熱點類別，即在數據庫中查詢類別是熱點的項，然后再從數據庫中根據熱點類別級聯查詢該類別的商品，這樣我們所要的數據就都有了。下面我們先在后臺完成這些查詢業務：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
//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配置文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
//@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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
