SSH框架網(wǎng)上商城項(xiàng)目第14戰(zhàn)之商城首頁UI的設(shè)計(jì)
前面我們利用EasyUI和SSH搭建好了后臺(tái)的基本框架,做好了后臺(tái)的基本功能,包括對(duì)商品類別的管理和商品的管理等,這一節(jié)我們開始搭建前臺(tái)頁面。
做首頁的思路:假設(shè)現(xiàn)在商品的業(yè)務(wù)邏輯都有了,首先我們需要?jiǎng)?chuàng)建一個(gè)監(jiān)聽器,在項(xiàng)目啟動(dòng)時(shí)將首頁的數(shù)據(jù)查詢出來放到application里,即在監(jiān)聽器里調(diào)用后臺(tái)商品業(yè)務(wù)邏輯的方法。
1. 首頁商品顯示邏輯
在首頁,我們只顯示商品熱點(diǎn)類別中的前幾個(gè)商品,比如熱點(diǎn)類別有兒童休閑類,女性休閑類,男性休閑類,那我們會(huì)有三個(gè)板塊來顯示不同的商品類,每個(gè)類別里再顯示幾個(gè)具體的商品。如果要實(shí)現(xiàn)這樣的首頁的話,我們需要將哪些數(shù)據(jù)查詢出來呢?首先肯定是熱點(diǎn)類別,即在數(shù)據(jù)庫中查詢類別是熱點(diǎn)的項(xiàng),然后再從數(shù)據(jù)庫中根據(jù)熱點(diǎn)類別級(jí)聯(lián)查詢?cè)擃悇e的商品,這樣我們所要的數(shù)據(jù)就都有了。下面我們先在后臺(tái)完成這些查詢業(yè)務(wù):
//CategoryService接口
public interface CategoryService extends BaseService<Category> {
//省略其他方法……
//根據(jù)boelen值查詢熱點(diǎn)或非熱點(diǎn)類別
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ù)熱點(diǎn)類別查詢推薦商品(僅僅查詢前4個(gè))
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ù)
后臺(tái)完成了商品的顯示邏輯業(yè)務(wù),下面我們開始獲取所需要的數(shù)據(jù)了。首先創(chuàng)建一個(gè)監(jiān)聽器InitDataListener繼承ServletContextListener,關(guān)于監(jiān)聽器如何獲取Spring配置文件,請(qǐng)參考這篇博文:監(jiān)聽器如何獲取Spring配置文件
//@Component //監(jiān)聽器是web層的組件,它是tomcat實(shí)例化的,不是Spring實(shí)例化的。不能放到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中存放一個(gè)裝有Category類的list
// 1. 查詢出熱點(diǎn)類別
for(Category category : categoryService.queryByHot(true)) {
//根據(jù)熱點(diǎn)類別id獲取推薦商品信息
List<Product> lst = productService.querByCategoryId(category.getId());
bigList.add(lst); //將裝有category的list放到bigList中
}
// 2. 把查詢的bigList交給application內(nèi)置對(duì)象
event.getServletContext().setAttribute("bigList", bigList);
}
}

好了,現(xiàn)在數(shù)據(jù)全都放到bigList這個(gè)集合中了。
3.首頁UI頁面設(shè)計(jì)
UI首頁我們會(huì)從美工那拿到模板,這個(gè)模板是html,我們要做的就是將其改成我們的jsp,然后將bigList集合中的數(shù)據(jù)顯示在首頁上。首先我們將模板所需要的圖片和css拷貝到WebRoot目錄下,然后在WebRoot/public/head.jspf中將這兩個(gè)文件引入即可,因?yàn)閔ead.jspf是其他頁面都要包含進(jìn)來的公共頭:

然后將模板中的html嵌到前臺(tái)首頁index.jsp中去,使用jstl標(biāo)簽修改一下顯示內(nèi)容,如下所示(只截圖顯示商品那一部分):

現(xiàn)在我們進(jìn)入之前做好的后臺(tái)添加商品頁面,在女性休閑類添加幾個(gè)商品,然后啟動(dòng)tomcat,運(yùn)行一下首頁index.jsp,效果如下:

好了,前臺(tái)的UI界面算是搭好了,接下來就是完成一些不同的業(yè)務(wù)了。
原文地址:http://blog.csdn.net/eson_15/article/details/51373403
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 用ajax自動(dòng)加載blogjava和博客園的rss
- java AJAX實(shí)現(xiàn)級(jí)聯(lián)下拉框
- ajax java 實(shí)現(xiàn)自動(dòng)完成功能
- 深入Ajax代理的Java Servlet的實(shí)現(xiàn)詳解
- 在Java的Struts中判斷是否調(diào)用AJAX及用攔截器對(duì)其優(yōu)化
- AJAX省市區(qū)三級(jí)聯(lián)動(dòng)下拉菜單(java版)
- SSH框架網(wǎng)上商城項(xiàng)目第17戰(zhàn)之購物車基本功能
- SSH框架網(wǎng)上商城項(xiàng)目第22戰(zhàn)之銀行圖標(biāo)以及支付頁面顯示
- SSH框架網(wǎng)上商城項(xiàng)目第23戰(zhàn)之在線支付功能實(shí)現(xiàn)
- SSH框架網(wǎng)上商城項(xiàng)目第28戰(zhàn)之使用Ajax技術(shù)局部更新商品數(shù)量和總價(jià)
相關(guān)文章
Spring Boot靜態(tài)資源路徑的配置與修改詳解
最近在做SpringBoot項(xiàng)目的時(shí)候遇到了“白頁”問題,通過查資料對(duì)SpringBoot訪問靜態(tài)資源做了總結(jié),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
java使用Jdom實(shí)現(xiàn)xml文件寫入操作實(shí)例
這篇文章主要介紹了java使用Jdom實(shí)現(xiàn)xml文件寫入操作的方法,以完整實(shí)例形式分析了Jdom針對(duì)XML文件寫入操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
使用RestTemplate訪問https實(shí)現(xiàn)SSL請(qǐng)求操作
這篇文章主要介紹了使用RestTemplate訪問https實(shí)現(xiàn)SSL請(qǐng)求操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-10-10
JVM內(nèi)存區(qū)域劃分相關(guān)原理詳解
這篇文章主要介紹了JVM內(nèi)存區(qū)域劃分相關(guān)原理詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
Springmvc數(shù)據(jù)格式化原理及代碼案例
這篇文章主要介紹了Springmvc數(shù)據(jù)格式化原理及代碼案例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
MyBatis深入分析數(shù)據(jù)庫交互與關(guān)系映射
這篇文章主要介紹了MyBatis中的數(shù)據(jù)庫交互與關(guān)系映射,MyBatis是一款優(yōu)秀的持久層框架,它支持定制化SQL、存儲(chǔ)過程以及高級(jí)映射,MyBatis避免了幾乎所有的JDBC代碼和手動(dòng)設(shè)置參數(shù)以及獲取結(jié)果集,需要的朋友可以參考下2024-05-05
Spring Boot RestTemplate提交表單數(shù)據(jù)的三種方法
本篇文章主要介紹了Spring Boot RestTemplate提交表單數(shù)據(jù)的三種方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03

