SSH框架網(wǎng)上商城項目第14戰(zhàn)之商城首頁UI的設計
前面我們利用EasyUI和SSH搭建好了后臺的基本框架,做好了后臺的基本功能,包括對商品類別的管理和商品的管理等,這一節(jié)我們開始搭建前臺頁面。
做首頁的思路:假設現(xiàn)在商品的業(yè)務邏輯都有了,首先我們需要創(chuàng)建一個監(jiān)聽器,在項目啟動時將首頁的數(shù)據(jù)查詢出來放到application里,即在監(jiān)聽器里調(diào)用后臺商品業(yè)務邏輯的方法。
1. 首頁商品顯示邏輯
在首頁,我們只顯示商品熱點類別中的前幾個商品,比如熱點類別有兒童休閑類,女性休閑類,男性休閑類,那我們會有三個板塊來顯示不同的商品類,每個類別里再顯示幾個具體的商品。如果要實現(xiàn)這樣的首頁的話,我們需要將哪些數(shù)據(jù)查詢出來呢?首先肯定是熱點類別,即在數(shù)據(jù)庫中查詢類別是熱點的項,然后再從數(shù)據(jù)庫中根據(jù)熱點類別級聯(lián)查詢該類別的商品,這樣我們所要的數(shù)據(jù)就都有了。下面我們先在后臺完成這些查詢業(yè)務:
//CategoryService接口 public interface CategoryService extends BaseService<Category> { //省略其他方法…… //根據(jù)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> { //省略其他方法…… //根據(jù)熱點類別查詢推薦商品(僅僅查詢前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. 創(chuàng)建InitDataListener獲取首頁數(shù)據(jù)
后臺完成了商品的顯示邏輯業(yè)務,下面我們開始獲取所需要的數(shù)據(jù)了。首先創(chuàng)建一個監(jiān)聽器InitDataListener繼承ServletContextListener,關于監(jiān)聽器如何獲取Spring配置文件,請參考這篇博文:監(jiān)聽器如何獲取Spring配置文件
//@Component //監(jiān)聽器是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)) { //根據(jù)熱點類別id獲取推薦商品信息 List<Product> lst = productService.querByCategoryId(category.getId()); bigList.add(lst); //將裝有category的list放到bigList中 } // 2. 把查詢的bigList交給application內(nèi)置對象 event.getServletContext().setAttribute("bigList", bigList); } }
好了,現(xiàn)在數(shù)據(jù)全都放到bigList這個集合中了。
3.首頁UI頁面設計
UI首頁我們會從美工那拿到模板,這個模板是html,我們要做的就是將其改成我們的jsp,然后將bigList集合中的數(shù)據(jù)顯示在首頁上。首先我們將模板所需要的圖片和css拷貝到WebRoot目錄下,然后在WebRoot/public/head.jspf中將這兩個文件引入即可,因為head.jspf是其他頁面都要包含進來的公共頭:
然后將模板中的html嵌到前臺首頁index.jsp中去,使用jstl標簽修改一下顯示內(nèi)容,如下所示(只截圖顯示商品那一部分):
現(xiàn)在我們進入之前做好的后臺添加商品頁面,在女性休閑類添加幾個商品,然后啟動tomcat,運行一下首頁index.jsp,效果如下:
好了,前臺的UI界面算是搭好了,接下來就是完成一些不同的業(yè)務了。
原文地址:http://blog.csdn.net/eson_15/article/details/51373403
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- 用ajax自動加載blogjava和博客園的rss
- java AJAX實現(xiàn)級聯(lián)下拉框
- ajax java 實現(xiàn)自動完成功能
- 深入Ajax代理的Java Servlet的實現(xiàn)詳解
- 在Java的Struts中判斷是否調(diào)用AJAX及用攔截器對其優(yōu)化
- AJAX省市區(qū)三級聯(lián)動下拉菜單(java版)
- SSH框架網(wǎng)上商城項目第17戰(zhàn)之購物車基本功能
- SSH框架網(wǎng)上商城項目第22戰(zhàn)之銀行圖標以及支付頁面顯示
- SSH框架網(wǎng)上商城項目第23戰(zhàn)之在線支付功能實現(xiàn)
- SSH框架網(wǎng)上商城項目第28戰(zhàn)之使用Ajax技術局部更新商品數(shù)量和總價
相關文章
SpringBoot項目將mybatis升級為mybatis-plus的方法
本文主要介紹了SpringBoot項目將mybatis升級為mybatis-plus的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-01-01Java實現(xiàn)經(jīng)典游戲2048的示例代碼
2014年Gabriele Cirulli利用周末的時間寫2048這個游戲的程序。本文將用java語言實現(xiàn)這一經(jīng)典游戲,并采用了swing技術進行了界面化處理,需要的可以參考一下2022-02-02MyBatis中的循環(huán)插入insert foreach問題
這篇文章主要介紹了MyBatis中的循環(huán)插入insert foreach問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11