이전에는 EasyUI 및 SSH를 사용하여 백엔드의 기본 프레임 워크를 구축하고 제품 범주 관리 및 제품 관리를 포함하여 백엔드의 기본 기능을 수행했습니다. 이 섹션에서는 프론트 엔드 페이지를 구축하기 시작했습니다.
홈페이지 만들기 아이디어 : 제품의 비즈니스 논리를 사용할 수 있다고 가정하면 먼저 리스너를 생성하고 홈페이지에서 데이터를 쿼리하고 프로젝트가 시작될 때, 즉 리스너의 백엔드 제품 비즈니스 논리 방법을 호출해야합니다.
1. 홈페이지 제품 디스플레이 로직
홈페이지에는 어린이 레저, 여성 레저 및 남성 레저와 같은 핫 제품 카테고리에서 처음 몇 가지 제품 만 표시합니다. 다른 제품 카테고리를 표시 할 세 가지 섹션이 있으며 각 범주에 여러 특정 제품이 표시됩니다. 이러한 홈페이지를 구현하려면 어떤 데이터가 쿼리해야합니까? 우선, 그것은 분명히 뜨거운 주제 카테고리, 즉 카테고리가 뜨거운 주제 인 데이터베이스의 쿼리 항목과 핫 주제 범주를 기반으로 해당 카테고리의 캐스케이드 쿼리 제품이므로 원하는 모든 데이터를 갖도록합니다. 먼저 백그라운드에서 이러한 쿼리 서비스를 완료하겠습니다.
// CategoryService 인터페이스 공용 인터페이스 범주를 확장합니다 BaseService <범주> {// 다른 메소드를 생략 ... // 쿼리 핫 또는 비 hOT 스팟 카테고리를 기반으로 한 핫 또는 비 hOT 스팟 카테고리 공개 목록 <Cat } @SuppressWarnings ( "Checked") @Service ( "CategoryService") 공개 클래스 카테고리를 확장하여 BaseServiceImpl <category> rement CategoryService {// 다른 메소드를 생략 ... @OverRide public List <Category> QueryByHot (boolean) hql = "; return getsession (). Createquery (HQL) .setBoolean ( "hot", hot) .list (); }} // ProductService 인터페이스 공용 인터페이스 ProductService 확장 기본 서비스 <Product> {// 다른 방법을 생략합니다 ... // 핫 카테고리를 기반으로 권장 제품 (첫 번째 4) 공개 목록 <Product> QuerByCategoryID (int CID); } @SuppressWarnings ( "Checked") @Service ( "ProductService") 공개 클래스 ProductServiceimpl은 BaseServiceImpl <Product> ProductService를 구현합니다 {// 다른 방법을 생략합니다 ... @Override public list <Product> QuerbyCategoryId (int cid) {String hql = " +" + " +" + "p.commend = p.cporate" p.category.id = : p.date desc의 CID 주문 "; return getsession (). Createquery (HQL) .setInteger ( "CID", CID) .SetFirstResult (0) .SetMaxResults (4) .list (); }} 2. 홈페이지 데이터를 얻기 위해 initdatalistener를 만듭니다
배경은 제품 디스플레이 로직 비즈니스를 완료했으며 필요한 데이터를 얻기 시작합니다. 먼저 청취자 InitDatalistener가 ServletContextListener를 상속합니다. 리스너가 스프링 구성 파일을 가져 오는 방법은이 블로그 게시물을 참조하십시오 : 리스너가 스프링 구성 파일을 얻는 방법
// component // Listener는 웹 계층의 구성 요소입니다. 그것은 봄이 아닌 Tomcat에 의해 인스턴스됩니다. Spring Public Class InitDatalistener 구현 ServletContextListener {Private ProductService ProductService = NULL; 개인 카테고리 서비스 카테고리 서비스 = null; private applicationcontext context = null; @override public void contextDestroyed (servletcontextevent event) {// todo 자동 생성 메소드 스터브} @override public void contextinitialized (servletcontextevent event) {context = webApplicationContutUls.getWebApplicationContext (event.getServletContxt ()); CategoryService = (CategoryService) context.getBean ( "CategoryService"); // 범주 정보 alfuctionervice = (ProductsErvice) Context.GetBean ( "ProductService"); // 제품 정보 목록 <Product >> biglist = new arraylist <list <product >> (); // biglist는 biglist // 1의 카테고리 클래스와 함께 목록을 저장합니다. (카테고리 카테고리 : categoryService.queryByHot (true)) {// 핫 스팟 카테고리 ID 목록을 기반으로 권장되는 제품 정보를 얻습니다. lst = productService.querByCategoryId (category.getID ()); biglist.add (lst); // biglist에 카테고리로 목록을 넣습니다.} // 2. 쿼리 biglist를 내장 객체 이벤트에 두십시오. getServletContext (). setAttribute ( "biglist", biglist); }} 이제 모든 데이터가 Biglist 컬렉션에 넣습니다.
3. 홈페이지 UI 페이지 디자인
우리는 UI 홈페이지의 아티스트로부터 템플릿을 얻을 것입니다. 이 템플릿은 HTML입니다. 우리가해야 할 일은 JSP로 변경 한 다음 홈페이지의 Biglist 컬렉션에 데이터를 표시하는 것입니다. 먼저 템플릿에서 요구하는 이미지와 CSS를 Webroot 디렉토리에 복사 한 다음 head.jspf가 다른 페이지가 포함 해야하는 공개 헤더이기 때문에 webroot/public/head.jspf 에이 두 파일을 소개합니다.
그런 다음 템플릿에 HTML을 프론트 데스크 홈페이지의 index.jsp에 넣고 JSTL 태그를 사용하여 아래 표시된대로 디스플레이 컨텐츠를 수정하십시오 (제품 부품을 표시하는 스크린 샷 만).
이제 우리는 이전에 수행 한 백엔드 추가 제품 페이지를 입력하고 여성 캐주얼 클래스에 몇 가지 제품을 추가 한 다음 Tomcat으로 시작한 다음 홈페이지 인덱스를 실행하십시오. 효과는 다음과 같습니다.
자, 프론트 데스크 UI 인터페이스가 설정되었으며 다음 단계는 다른 비즈니스를 완성하는 것입니다.
원래 주소 : http://blog.csdn.net/eson_15/article/details/51373403
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.