SSH Framework Online Mall project 14th War Mall homepage UI Design _java

We used Easyui and SSH to build the background of the basic framework, do a good job backstage basic functions, including the management of commodity categories and commodity management, this section we began to build the front page.
To do the idea of the home page: Assuming that the business logic of the commodity now has, first we need to create a listener, the project started when the first page of the data query out into the application, that is, in the listener calls the background merchandise business logic method.

1. Home Product Display Logic
on the home page, we only show the first few items in the commodity hotspot category, such as the hot category of children leisure category, female leisure class, Male leisure class, then we will have three plates to show different commodity classes, each category shows a few specific goods. If you want to implement such a home page, what data do we need to query out? The first is definitely the Hotspot category, where the query category is the hotspot item in the database, and then the category is queried from the database by the Hotspot category, so that all the data we need is available. Here we will finish the query business in the background:

Categoryservice interface public interface Categoryservice extends baseservice<category> {//Omit other methods ...///according to Boelen value query hot 
Point or non-hotspot category public list<category> Querybyhot (Boolean hot); @SuppressWarnings ("Unchecked") @Service ("Categoryservice") public class Categoryserviceimpl extends Baseserviceimpl <Category> implements Categoryservice {//Omit other methods ... @Override public list<category> querybyhot (Boolea 
  n Hot) {String hql = ' from Category c where C.hot=:hot '; 
 Return GetSession (). CreateQuery (HQL). SetBoolean (' hot ', hot). List (); }//productservice Interface public interface Productservice extends baseservice<product> {//Omit other methods ...///According to the hot category 
Consult the recommended product (query only the first 4) public list<product> Querbycategoryid (int cid); @SuppressWarnings ("Unchecked") @Service ("Productservice") public class Productserviceimpl extends BASESERVICEIMPL&L T Product> implements Productservice {//Omit other methods ... @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. Create Initdatalistener get home data
background to complete the display of merchandise logic business, below we start to get the required data. First, create a listener initdatalistener inherit Servletcontextlistener, for the listener how to get the spring configuration file, refer to this blog post: How the Listener gets the spring configuration file

@Component//listener is a component of the Web layer that is tomcat-instantiated, not spring-instantiated. cannot be placed in 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} @Ove Rride public void contextinitialized (Servletcontextevent event) {context = Webapplicationcontextutils.getwebapplic   
  Ationcontext (Event.getservletcontext ()); Categoryservice = (categoryservice) context.getbean ("Categoryservice")//load category Information Productservice = (Productservice) con Text.getbean ("Productservice")/Load commodity information list<list<product>> biglist = new arraylist<list<product& Gt;> (); Biglist contains a list//1 containing the category class. Query out hotspot category for (Category Category:categoryService.queryByHot (True)) {//Get the recommended product information based on the Hotspot category ID list<product> lst = ProductseRvice.querbycategoryid (Category.getid ()); Biglist.add (LST); Place the list with category in Biglist}//2. 
 Biglist the query to the application built-in object Event.getservletcontext (). setattribute ("Biglist", biglist); 
 } 
 
}

Okay, now all the data is in the Biglist collection.

3. Homepage UI Page Design

UI Home We will get the template from the art, the template is HTML, we have to do is to change it to our JSP, and then the Biglist collection of data displayed on the home page. First we copy the pictures and CSS required by the template to the Webroot directory, and then introduce the two files in WEBROOT/PUBLIC/HEAD.JSPF, because HEAD.JSPF is the common header that all other pages include:

The HTML in the template is then embedded in the front page index.jsp, using the JSTL tag to modify the display, as shown below (only the screenshot shows the part of the product):

Now we go into the background to do a good job to add Merchandise page, in the female leisure class to add a few items, and then start Tomcat, run the home index.jsp, the effect is as follows:

Well, the front end UI interface is a good one, and the next step is to do a few different businesses.

Original address: http://blog.csdn.net/eson_15/article/details/51373403

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.