Previously, we used EasyUI and SSH to build the basic framework of the backend and do the basic functions of the backend, including the management of product categories and product management. In this section, we began to build the frontend page.
The idea of making home page: Assuming that the business logic of products is now available, first we need to create a listener, and query the data on the home page and put it into the application when the project starts, that is, call the method of back-end product business logic in the listener.
1. Home page product display logic
On the home page, we only display the first few products in the hot product categories, such as children's leisure, women's leisure, and men's leisure. We will have three sections to display different product categories, and several specific products will be displayed in each category. If we want to implement such a homepage, what data do we need to query? First of all, it is definitely a hot topic category, that is, query items in the database for which the category is a hot topic, and then cascade query products of that category from the database based on the hot topic category, so that we have all the data we want. Let’s complete these query services in the background first:
//CategoryService interface public interface CategoryService extends BaseService<Category> { //Omit other methods... //Query hot or non-hot spot 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) .setBoolean("hot", hot) .list(); } } //ProductService interface public interface ProductService extends BaseService<Product> { //Omit other methods... //Query recommended products based on hot categories (only the first 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.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 an InitDataListener to get homepage data
The background has completed the product display logic business, and we will start to obtain the required data. First create a listener InitDataListener inherits ServletContextListener. For how the listener gets the Spring configuration file, please refer to this blog post: How the listener gets the Spring configuration file
//@Component // Listener is a component of the web layer. It is instantiated by tomcat, not Spring. Can't be put 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 } @Override public void contextInitialized(ServletContextEvent event) { context = WebApplicationContextUtils.getWebApplicationContext(event.getServletContext()); categoryService = (CategoryService) context.getBean("categoryService");//Load category information productService = (ProductService) context.getBean("productService");//Load product information List<List<Product>> bigList = new ArrayList<List<Product>>(); // BigList stores a list with the Category class in bigList // 1. Query the hot spot category for(Category category: categoryService.queryByHot(true)) { //Get recommended product information based on the hot spot category id List<Product> lst = productService.querByCategoryId(category.getId()); bigList.add(lst); //Put the list with category in bigList} // 2. Leave the query bigList to the built-in object event.getServletContext().setAttribute("bigList", bigList); } } OK, now all the data is put into the bigList collection.
3. Home Page UI Page Design
We will get the template from the artist on the UI homepage. This template is html. All we have to do is change it to our jsp, and then display the data in the bigList collection on the homepage. First, we copy the image and css required by the template to the WebRoot directory, and then introduce these two files in WebRoot/public/head.jspf, because head.jspf is a public header that other pages need to include:
Then embed the html in the template into the index.jsp on the front desk homepage, and use the jstl tag to modify the display content, as shown below (only the screenshots to display the product part):
Now we enter the backend add product page that we have done before, add a few products to the female casual class, then start to tomcat, and run the home page index.jsp, the effect is as follows:
Okay, the front desk UI interface has been set up, and the next step is to complete some different businesses.
Original address: http://blog.csdn.net/eson_15/article/details/51373403
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.