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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • java AJAX实现级联下拉框

    复制代码 代码如下: package com.ajaxlab.ajax; import java.util.ArrayList; import java.util.Collection; import java.util.Iterator; import org.jdom.Document; import org.jdom.Element; import org.jdom.input.SAXBuilder; import com.ajaxlab.ajax.ProductClass; public

  • ajax java 实现自动完成功能

    百度建议给了我们极大的方便,就像我们跟人说话的时候,你点头他知尾,不用多费唇舌,这样我们与之相处久轻松愉悦. 都知道百度建议是用ajax做的,想要做的快速稳定,可复制可移植就不容易了.网上找了半天,好多都是asp或者php的,还有使用jquery的,但说明性文档太少,花时间研究还不如自己来写.根据一个pdf文档提供的资料,用了小半天时间,终于实现了.在此与大家分享. 原理流程图如下:  流程图很明白了,没什么要说的,以下帖代码. Javascript代码: 复制代码 代码如下: var xmlH

  • AJAX省市区三级联动下拉菜单(java版)

    此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为: $(document).ready(function(){ $.get("getProvince.do", function(result){ $("#showp").html(result); }); }) var xmlhttp; function mysend(str){ $(docum

  • SSH框架网上商城项目第23战之在线支付功能实现

    上一节我们做好了支付页面的显示,从上一节支付页面显示的jsp代码中可以看出,当用户点击确认支付时,会跳到${shop}/pay_goBank.action的action,也就是说,提交后我们得在payAction中的goBank方法中处理一些逻辑(即21节demo中的那个流程图的逻辑),即获得明文,将明文加密成签名(密文)然后再去访问易宝服务器,易宝连接银行,完成支付. 但是考虑到MVC设计模式,我们会将上面这些业务逻辑放到Service层中处理,所以下面我们来实现21节中那个demo的支付逻辑

  • 在Java的Struts中判断是否调用AJAX及用拦截器对其优化

    Strut2判断是否是AJAX调用 1.   AJAX与传统Form表单 实际上,两者一般都是通过HTTP的POST请求.区别是浏览器提交Form表单后,期望服务器返回一个完整的HTML页面.而AJAX调用是由XMLHttpRequest对象(不同浏览器可能不一样)发出,浏览器期望服务器返回HTML片段即可,具体是JSON.XML等都没有要求.返回到浏览器后如何使用,也是由JS脚本自己决定的.   2. 请求是不是AJAX 那么对于服务器端,如何判断一个HTTP请求是不是AJAX调用?这需要看H

  • SSH框架网上商城项目第22战之银行图标以及支付页面显示

    从上一节的小demo中我们搞清楚了如何跟易宝对接以及易宝的支付流程.这一节我们来做一下支付页面以及在页面中导入银行图标. 1. 存储银行图标 银行图标一般不会总是去加载,因为这些东西是死的,没必要每次进入支付页面就去加载银行图标,这样性能会受到一定的影响.这让我们联想到了之前的加载首页数据了,其实跟那个道理是一样的,我们可以在项目启动的时候就将银行图标资源加载到application中,后面用到了就直接在application域中取就行了.所以跟原来一样,我们在监听器中加载银行图标. 银行图标易

  • 用ajax自动加载blogjava和博客园的rss

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>this is test</title> <sc

  • SSH框架网上商城项目第17战之购物车基本功能

    上一节我们将商品的详细页面做完了,并使用了Hibernate的二级缓存加载详细页面来提高系统的性能,点击文章查看:.这节我们开始做购物车部分. 1. 添加新的表 首先我们向数据库中添加几张表:用户表.订单状态表.订单表(购物车表)以及购物项表.用户表中存有用户的基本信息,订单状态表中主要存储订单的状态,比如已发货这种,订单表主要存储用户的信息和订单的状态,所以跟用户表和订单状态表关联,购物项表存储某个商品以及所属的订单,所以跟商品表和订单表相关联.具体的表信息见下面的sql语句: /*=====

  • 深入Ajax代理的Java Servlet的实现详解

    代码如下所示: 复制代码 代码如下: import java.io.IOException;import java.io.InputStream;import java.net.URL;import javax.servlet.ServletConfig;import javax.servlet.ServletException;import javax.servlet.ServletOutputStream;import javax.servlet.http.HttpServlet;impor

  • SSH框架网上商城项目第28战之使用Ajax技术局部更新商品数量和总价

    之前,把项目部署了一下,玩了玩,今天完善了一下购物车中修改商品数量就能局部更新相应的总价的功能,大家都知道这得用Ajax实现,我之前也没学Ajax,刚好借助这个小功能,去简单学习一下Ajax的知识. 1. 问题的分析 先看一下页面中的情况: 功能如上,在没有Ajax之前,一般都是根据用户修改的值去找Action,然后返回新的jsp页面重新加载整个页面,完成数字的更新.但是有了Ajax技术后,我们可以利用Ajax技术局部刷新要改变的地方,而不是重新加载整个页面.首先看一下上图对应的jsp部分的代码

随机推荐