SSH框架网上商城项目第14战之商城首页UI的设计

 更新时间:2016年06月03日 14:15:30   投稿:lijiao  
这篇文章主要为大家详细介绍了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

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

相关文章

  • 详解Java编程中线程同步以及定时启动线程的方法

    详解Java编程中线程同步以及定时启动线程的方法

    这篇文章主要介绍了详解Java编程中线程同步以及定时启动线程的方法, 讲到了wait()与notify()方法以及阻塞队列等知识,需要的朋友可以参考下
    2016-01-01
  • SpringBoot多种环境自由切换的实现

    SpringBoot多种环境自由切换的实现

    本文主要介绍了SpringBoot多种环境自由切换的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • SpringBoot快速实现接口消息加密的过程详解

    SpringBoot快速实现接口消息加密的过程详解

    在项目中,为了保证数据的安全,我们常常会对传递的数据进行加密,常用的加密算法包括对称加密(AES)和非对称加密(RSA),博主选取码云上最简单的API加密项目进行下面的讲解,需要的朋友可以参考下
    2023-11-11
  • Java守护线程和用户线程的区别

    Java守护线程和用户线程的区别

    这篇文章主要介绍了Java守护线程和用户线程的区别,用户线程和守护线程,默认情况下我们创建的线程或线程池都是用户线程,所以用户线程也被称之为普通线程,下文更多详细内容需要的小伙伴可以参考一下
    2022-05-05
  • 解决IDEA报错Caused by: org.springframework.boot.web.server.WebServerException: Unable to start embedded

    解决IDEA报错Caused by: org.springframework.boot.web.se

    遇到IDEA启动报错,可尝试以下方法:打开项目设置(Ctrl+Shift+Alt+S),将JDK版本修改为1.8;或者检查TomCat依赖,若有问题可尝试删除,此外,确保每次拉取项目后,maven地址设置为本地,并且JDK版本设置为1.8,以上为个人解决经验,希望对大家有所帮助
    2024-09-09
  • SpringBoot使用Graylog日志收集的实现示例

    SpringBoot使用Graylog日志收集的实现示例

    Graylog是一个生产级别的日志收集系统,集成Mongo和Elasticsearch进行日志收集,这篇文章主要介绍了SpringBoot使用Graylog日志收集的实现示例,感兴趣的小伙伴们可以参考一下
    2019-04-04
  • Spring Boot中防止递归查询的两种方式

    Spring Boot中防止递归查询的两种方式

    这篇文章主要给大家介绍了关于Spring Boot中防止递归查询的两种方式,两种方式分别是在application.properties中配置和在entity中添加注解,都给出了详细的示例代码,需要的朋友们下面来一起看看吧。
    2017-06-06
  • Java如何获取属性的注释信息详解

    Java如何获取属性的注释信息详解

    Java注解是从Java5开始添加到Java的,这篇文章主要给大家介绍了关于Java如何获取属性的注释信息的相关资料,文中介绍的非常详细,需要的朋友可以参考下
    2021-07-07
  • SpringBoot整合Canal与RabbitMQ监听数据变更记录

    SpringBoot整合Canal与RabbitMQ监听数据变更记录

    这篇文章主要介绍了SpringBoot整合Canal与RabbitMQ监听数据变更记录,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • Spring data JPA只查询部分字段问题及解决

    Spring data JPA只查询部分字段问题及解决

    这篇文章主要介绍了Spring data JPA只查询部分字段问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08

最新评论