Anteriormente, utilizamos EasyUI y SSH para construir el marco básico del backend y hacer las funciones básicas del backend, incluida la gestión de las categorías de productos y la gestión de productos. En esta sección, comenzamos a construir la página delantera.
La idea de hacer la página de inicio: suponiendo que la lógica comercial de los productos ahora esté disponible, primero necesitamos crear un oyente y consultar los datos en la página de inicio y ponerlo en la aplicación cuando el proyecto comience, es decir, llamar al método de la lógica comercial de productos de fondo en el oyente.
1. Lógica de pantalla del producto de la página de inicio
En la página de inicio, solo mostramos los primeros productos en las categorías de productos calientes, como el ocio infantil, el ocio de las mujeres y el ocio masculino. Tendremos tres secciones para mostrar diferentes categorías de productos, y se mostrarán varios productos específicos en cada categoría. Si queremos implementar una página de inicio de este tipo, ¿qué datos necesitamos consultar? En primer lugar, definitivamente es una categoría de tema candente, es decir, los elementos de consulta en la base de datos para la cual la categoría es un tema candente, y luego los productos de consulta en cascada de esa categoría de la base de datos basada en la categoría de tema candente, para que tengamos todos los datos que queremos. Completemos estos servicios de consulta en el fondo primero:
// Interfaz de servicio CategyService Interfaz pública CategyService extiende BasesService <Cateatory> {// omitir otros métodos ... // Consulta categorías de Spot Hot o no Hot basadas en valores de Boelen Public List <Catery> QueryByHot (boolean Hot); } @Suppleswarnings ("sin verificar") @Service ("CategyService") Clasificación pública CategyServiceImpl extiende BaseServiceImpl <Cateatory> Implementa CategoryService {// Omita otros métodos ... @Override Public List <Catery> QueryByHot (Boolean) Hot) {Cadena HQL = "de Categorial C. return getSession (). CreateQuery (HQL) .SetBoolean ("Hot", Hot) .List (); }} // Interfaz de servicio Products Interface Public Interface Productservice extiende BaseService <Product> {// omitir otros métodos ... // Consulta productos recomendados basados en categorías calientes (solo las primeras 4) Lista pública <Product> QuerbyCategoryID (int Cid); } @SupplesSwarnings ("no verificado") @Service ("Productservice") Public Class ProductserviceImpl extiende BaseServiceImpl <Product> Implementa Productservice {// omitir otros métodos ... @Override Public List <Product> QuerbyCategoryID (int cid) {String hql = "de Product Poin Fetch P.Category" + "P.Coopen = P.copen = P.Coopen = P.Coopen = P.Coopen = P.Coopen = P.Coopen = P.Coopen = P.Coopen = P.Coopen = P.Coopen = P.Coopen = P.Coopen = P.Coopen = P.Coopen p.category.id =: orden cid por p.date Desc "; return getSession (). CreateQuery (HQL) .SetInTeger ("Cid", Cid) .SetFirStresult (0) .SetMaxResults (4) .List (); }} 2. Cree un initDatalistener para obtener datos de la página de inicio
El fondo ha completado el negocio de lógica de pantalla de productos, y comenzaremos a obtener los datos requeridos. Primero cree un oyente InitDatalistener herede ServletContextListener. Para obtener cómo el oyente obtiene el archivo de configuración de Spring, consulte esta publicación de blog: cómo el oyente obtiene el archivo de configuración de Spring
//@componente // El oyente es un componente de la capa web. Está instanciado por Tomcat, no en la primavera. No se puede poner en la clase pública de primavera initDatalistener implementa servletContextListener {private Productservice Productservice = null; categoría de categoría privada CategoríaService = NULL; Aplicación privadaContext context = null; @Override public void contextDestroyed (evento de servletContextEvent) {// TODO Auto Generated Method Stub} @Override public void contextInitialized (ServletContextEvent Event) {context = WebApplicationContextUtils.getWebApplicationContextExt (event.getServletContext ()); CategyService = (CategoryService) context.getBean ("CategoryService"); // Cargue la información de la categoría Productservice = (Productservice) context.getBean ("Productservice"); // Cargue la lista de información de productos <List <Product>> BigList = New ArrayList <List <Product> (); // Biglist almacena una lista con la clase de categoría en BigList // 1. Consulte la categoría de punto caliente para (categoría de categoría: categoryService.QueryByHot (true)) {// Obtener información de producto recomendada basada en la lista de identificación de categoría de punto caliente <Product> LST = Productservice.querByCategyId (categoría.getid ()); BigList.Add (LST); // Ponga la lista con la categoría en BigList} // 2. Deje la consulta BigList en el evento de objeto incorporado.getServletContext (). SetAttribute ("BigList", BigList); }} Ok, ahora todos los datos se ponen en la colección BigList.
3. Diseño de página de interfaz de usuario de la página de inicio
Obtendremos la plantilla del artista en la página de inicio de la UI. Esta plantilla es HTML. Todo lo que tenemos que hacer es cambiarlo a nuestro JSP y luego mostrar los datos en la colección BigList en la página de inicio. Primero, copiamos la imagen y el CSS requerido por la plantilla en el directorio de Webroot, y luego presentamos estos dos archivos en Webroot/public/head.jspf, porque head.jspf es un encabezado público que otras páginas deben incluir:
Luego, incruste el HTML en la plantilla en el índice.jsp en la página de inicio de la recepción y usa la etiqueta JSTL para modificar el contenido de visualización, como se muestra a continuación (solo las capturas de pantalla para mostrar la parte del producto):
Ahora ingresamos a la página de producto Agregar backend que hemos hecho antes, agregamos algunos productos a la clase informal femenina, luego comenzamos a Tomcat y ejecutamos la página de inicio. JSP, el efecto es el siguiente:
De acuerdo, se ha configurado la interfaz de interfaz de usuario de recepción, y el siguiente paso es completar algunos negocios diferentes.
Dirección original: http://blog.csdn.net/eson_15/article/details/51373403
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.