Anteriormente, usamos o easyui e o SSH para criar a estrutura básica do back -end e fazer as funções básicas do back -end, incluindo o gerenciamento de categorias de produtos e gerenciamento de produtos. Nesta seção, começamos a construir a página de front -end.
A idéia de fazer a página inicial: supondo que a lógica de negócios dos produtos esteja agora disponível, primeiro precisamos criar um ouvinte e consultar os dados na página inicial e colocá-los no aplicativo quando o projeto iniciar, ou seja, chamar o método de lógica de negócios de produtos de back-end no ouvinte.
1. Lógica de exibição do produto da página inicial
Na página inicial, exibimos apenas os primeiros produtos nas categorias de produtos quentes, como lazer infantil, lazer feminino e lazer masculino. Teremos três seções para exibir diferentes categorias de produtos, e vários produtos específicos serão exibidos em cada categoria. Se queremos implementar uma página inicial, quais dados precisamos consultar? Primeiro de tudo, é definitivamente uma categoria de tópico quente, ou seja, itens de consulta no banco de dados para os quais a categoria é um tópico quente e, em seguida, em cascata produtos de consulta dessa categoria a partir do banco de dados com base na categoria de tópico quente, para que tenhamos todos os dados que queremos. Vamos completar esses serviços de consulta em segundo plano:
// CategoryService Interface Interface pública CategoryService estende BaseService <Categoria> {// omiti outros métodos ... // Categorias de ponto quente ou não-hot Spot com base nos valores de boelen list public <Categoria> Querybyhot (Boolean Hot); } @Suppresswarnings ("desmarcada") @service ("categoryService") Categoria de classe pública ServiceImpl estende BaseServiceImpl <category> implementa categoryService {// omit outros métodos ... @Override list <Category> QuerybyHot (Boolean) Hot) {String> HQL) retorno getSession (). CreateEquery (HQL) .SetBoolean ("Hot", Hot) .List (); }} // Interface do produto Products Service Public Interface ProductService estende BaseService <Production> {// omitir outros métodos ... // Produtos recomendados de consulta com base em categorias quentes (apenas a primeira 4) lista pública <Product> querbycategoryId (int cid); } @Suppresswarnings ("não contraced") @service ("ProductService") classe pública ProductServiceImpl estende BaseServiceImpl <Production> implementa o ProductService {// omitis outros métodos ... p.category.id =: Cid Order by P.Date Desc "; retorno getSession (). CreateEquery (HQL) .setInteger ("cid", cid) .SetFirstResult (0) .setMaxResults (4) .List (); }} 2. Crie um initDatalistener para obter dados da página inicial
O plano de fundo concluiu o negócio de lógica de exibição do produto e começaremos a obter os dados necessários. Primeiro, crie um ouvinte initDatalistener herda o servletContextListener. Para como o ouvinte recebe o arquivo de configuração da primavera, consulte esta postagem do blog: como o ouvinte recebe o arquivo de configuração da primavera
//@componente // ouvinte é um componente da camada da web. É instanciado por Tomcat, não na primavera. Não pode ser colocado na classe pública da primavera initdatalistener implementa servetlextextlistener {private Products Service ProduckerService = null; CategoryService CategoryService = nulo; ApplicationContext de ApplicationContext privado = NULL; @Override public void contextDestroyed (Evento ServletContextevent) {// TODO Método Geral Goletomado} @Override public void contextinitialized (Evento de servletContextevent) {context = webApplicationContextutils.getwebapplicationContext (event.getServletConxtConxtContenxtContetConxtConxtTutils.getwebapplicationContext (event.getServletConxtConxtConxtContetConxtConxtConxtTenTtutils.getweBapplicationContext (EventServletConxtConxtConxtConxtConxtTenxtTenxtutil.getweBapplicationContext) categoryService = (categoryService) context.getBean ("categoryService"); // Categoria de carga Products Service = (ProductService) Context.getBean ("ProductService"); // Carregar Lista de Informações do Produto <Lista <Product>> biglist = novo ArrayList <List <Product> (); // O BigList armazena uma lista com a classe de categoria em BigList // 1. Consulte a categoria Hot Spot para (Categoria Categoria: CategoryService.QueryByHot (true)) {// Obtenha informações recomendadas do produto com base na lista de identificação da categoria Hot Spot <Production> lst = Production.QuerBycateGoryId (Categoria.get.get.gets (); biglist.add (LST); // Coloque a lista com a categoria em BigList} // 2. Deixe a consulta BigList no evento de objeto interno.getServletContext (). SetAttribute ("biglist", biglist); }} OK, agora todos os dados são colocados na coleção BigList.
3. Design da página da interface do usuário da página inicial
Obteremos o modelo do artista na página inicial da interface do usuário. Este modelo é html. Tudo o que precisamos fazer é alterá -lo para o nosso JSP e, em seguida, exibir os dados na coleção BigList na página inicial. Primeiro, copiamos a imagem e o CSS exigidos pelo modelo ao diretório Webroot e depois apresentamos esses dois arquivos em webroot/public/head.jspf, porque o Head.jspf é um cabeçalho público que outras páginas precisam incluir:
Em seguida, incorpore o HTML no modelo no index.jsp na página inicial da recepção e use a tag JSTL para modificar o conteúdo da tela, como mostrado abaixo (apenas as capturas de tela para exibir a parte do produto):
Agora, inserimos a página de back -end adicione o produto que já fizemos antes, adicionamos alguns produtos à aula casual feminina, depois começamos o Tomcat e executamos o home Page Index.jsp, o efeito é o seguinte:
Ok, a interface da interface do usuário da recepção foi configurada e a próxima etapa é concluir algumas empresas diferentes.
Endereço original: http://blog.csdn.net/eson_15/article/details/51373403
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.