"SSH online Mall project actual combat 14" Mall home UI Design

Before we use Easyui and SSH to build the basic framework of the background, do the basic functions of the background, including the management of commodity categories and merchandise management, this section we began to build the front page.

The idea of home: assuming that the business logic of the commodity now has, first we need to create a listener, in the project launch, the first page of data query out into the application, that is, in the listener call back-end commodity business logic method.

1. Home Product Display Logic

On the home page, we only show the first few items in the product hot category, such as the hot category has children's leisure category, women's leisure category, men's Leisure class, then we will have three plates to show the different commodity categories, each category shows a few specific products. If we want to implement such a homepage, what data do we need to query out? First of all, it must be the hotspot category, that is, querying the database for categories that are hotspots, and then querying that category of items from the database based on the hotspot category, so that we have all the data we need. Here we first complete these query business in the background:

//categoryservice interface Pu Blic interface Categoryservice extends baseservice<category> {//Omit other methods ...//query hot or non-hotspot categories based on boelen values 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 (boolean hot) {        string hql = "from Category c where c.hot=:hot ";        return getsession (). CreateQuery (HQL)    & nbsp;        .setboolean ("Hot", Hot)              .list ();    }}  

Productservice interface public interface Productservice extends baseservice<product> {//Omit other methods ...// Query recommended items based on Hotspot category (query only the top 4) public list<product> Querbycategoryid (int cid);} @SuppressWarnings ("Unchecked") @Service ("Productservice") public class Productserviceimpl extends Baseserviceimpl <Product> implements Productservice {    //omit other methods ......     @Override     public list<product> Querbycategoryid (int cid) {        string hql = "from Product p Join fetch p.category "                +" where p.c Ommend=true and P.open=true and p.category.id=:cid order by p.date Desc ";        return get Session (). CreateQuery (HQL)             .setinteger ("CID", CID)              .setfirstresult (0)             &NBSP;.SETMAXresults (4)             .list ();    }} 

2. Create Initdatalistener to get home data

Backstage completed the product display logic business, below we began to obtain the required data. First create a listener initdatalistener inherit Servletcontextlistener, for the listener how to get the spring profile, refer to this post: how the listener obtains the spring configuration file

The @Component//listener is a component of the Web layer, which is instantiated by Tomcat and not by spring. You can't put it in spring. public class Initdatalistener implements Servletcontextlistener {         Private Productservice Productservice = null;    private categoryservice categoryservice = null; & nbsp  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") ;//Load category info                 productservice = (productservice) context.getbean ("Productservice");//Load Product info          List<List<Product>> biglist = new arraylist<list<product>> (); The biglist contains a category list        //1. Query out hotspot category         for (category Category:categoryService.queryByHot (true)) {            //Get recommended product information based on hotspot category ID             List<Product> lst = Productservice.querbycategoryid (Category.getid ());            biglist.add (LST); Place list with category in Biglist         }        //2. Give the biglist of the query to application built-in objects         event.getservletcontext (). SetAttribute (" Biglist ", biglist);    }}

and configure the listener in Web. XML:

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

3. Homepage UI Page Design

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

Then embed the HTML in the template into the front page index.jsp, and use the JSTL tag to modify the display, as shown below (only the part of the product is shown):

Now we go to do before the background Add product page, in the female leisure class add several items, and then start Tomcat, run the homepage index.jsp, the effect is as follows:

Well, the front desk UI is a good one, and the next step is to do some different business.

(Note: To the end to provide the entire project source code download!) Welcome to our collection or attention)

Related reading: http://blog.csdn.net/column/details/str2hiberspring.html

___________________________________________________________________________________________________________ __________________________________________

-----willing to share and progress together!

-----More articles please see: http://blog.csdn.net/eson_15

"SSH online Mall project actual combat 14" Mall home UI Design