Este projeto finalmente está chegando ao fim, então não farei a função de registro. Outro artigo sobre a função de registro introduziu a verificação do formulário de registro em detalhes. Você pode adicionar diretamente a função a este projeto e modificar os saltos relevantes, para que não o faça mais. Além disso, atualmente, este projeto possui apenas a camada de ação e a camada de serviço. Ainda não extrai a camada dao. Depois de concluir este relatório, extraí a camada DAO e depois resumi todo o projeto. Você pode fazer upload do código -fonte. Você pode baixá -lo naquele momento ~
Esta seção cria principalmente a última função: use o JSChart como uma ferramenta para exibir relatórios de vendas de produtos. O JSChart é uma ferramenta muito útil para fazer relatórios. A razão pela qual é fácil de usar é porque seus exemplos oficiais são muito bem feitos. Você pode gerar diretamente o código correspondente após operar na interface gráfica. Nós o modificamos e depois o colocamos na lógica de nosso próprio projeto.
1. Introdução às ferramentas JSChart
O JSChart é uma excelente ferramenta de criação de relatórios. O código gerado é JS, por isso é uma boa ferramenta para usar as páginas JSP front-end. Você pode dar uma olhada no site oficial da JSChart, clicar em editar on -line depois de abri -lo e, em seguida, selecionar um relatório e clicar para inserir. Você pode editar o tipo de gráfico e o formato que queremos on -line, como segue:! ! [JSCHART] (http://img.blog.csdn.net/20160526130958645) Afinal, você pode clicar no botão que gera o código JS acima e copia o código correspondente ao nosso JSP. Aqui está o código JS que eu gerei (basta interceptar a parte útil):
<div id = "Chart_Container"> Cartão de carregamento ... </div> <script type = "text/javascript"> var myChart = new jsChart ('Chart_container', bar '', ''); MyChart.SetDataArray (['#44A622', '#A7B629', '#CAD857', '#e4db7b', '#ecde49', '#ec9649', '#d97431', 'd95531'); MyChart.Colorize (colorarr.slice (0, data.length)); MyChart.SetSize (100*$ ("#número"). Val (), 400); MyChart.SetBarValues (false); MyChart.setBarsPacingRatio (45); MyChart.setBaropacity (1); MyChart.setBarborderwidth (1); MyChart.Settitle ('Relatório de vendas do shopping'); MyChart.SettitleFontSize (10); myChart.settitlecolor ('#607985'); myChart.setAxisValuesColor ('#607985'); myChart.setAxisNamex ('Nome do produto', false); MyChart.setAxisNamey ('Sales', True); MyChart.setGridOpacity (0,8); myChart.setaxispaddingleft (50); MyChart.setaxispaddingbottom (40); MyChart.Set3D (true); MyChart.draw (); </sCript> Dessa forma, temos o código JS para gerar o gráfico. Vamos analisar todo o processo: primeiro, a página JSP front-end envia uma solicitação AJAX e, em seguida, o back-end busca os dados correspondentes do banco de dados. Precisamos apenas recuperar os dados aqui quais produtos foram vendidos e a quantidade vendida correspondente, o que significa que temos que retirar da tabela de itens de linha. Além disso, o front-end deve passar por um parâmetro para informar o back-end quantos dados de dados obtêm. Após a obtenção do plano de fundo, os dados são enviados para o primeiro plano no formato JSON, e o primeiro plano executa o código JS acima (é claro, são necessárias modificações correspondentes) para exibir os dados na forma de um relatório. OK, de acordo com esse processo, faça o back -end primeiro.
2. Complete a lógica da consulta de fundo
Primeiro, a função de consulta é concluída na camada de serviço. Durante esta consulta, dois itens são consultados: o produto e a quantidade de vendas do produto. Dê uma olhada no código:
// interface sorderService Interface pública sorderService estende BaseService <sorder> {// Salvar código irrelevante ... // Consulte o volume de vendas de produtos quentes listar <Object> querysale (int number);} // SordserSericeImpl implementation Class @Service ("sordserverice") @suplemento BaseServiceImpl <sorder> implementa SorderService {// Salvar código irrelevante ... @Override Public List <Becut> QuerySale (Int Number) {// Os dois itens encontrados sem afeto são String HQL = "Selecione S.Name, Sum (s.number) do Sorder S Junção Grupo S.product por S.product.id"; retorno getSession (). CreateEquery (HQL) // .SetFirstResult (0) // .SetMaxResults (número) // .List (); }} Em seguida, concluímos a parte da ação:
@Controlador@scope ("prototype") a classe pública SorderAction estende a base <sorder> {public string addSorder () {// salvar código irrelevante ... // Retornar produtos populares e suas vendas public string querysale () {list <json> jsonList = SoorderService.QuerySale (Model.getNumber (); // Coloque a lista de consultas na parte superior da pilha de valor, por que fazer isso? Veja a explicação abaixo do actionContext.getContext (). GetValuestack (). Push (jsonlist); retornar "jsonList"; }} Existe um objeto de 'list` no Baseation, mas não podemos usar esse objeto, porque aqui o JSONLIST é um objeto `list`, não um objeto` list` no Baseaction, por isso precisamos definir um objeto `list` nesta ação e implementar o método GET e, em seguida, configurar a raiz no arquivo struts.xml, mas isso é um pouco problemático. Aqui está um método mais simples. Se você não conseguir encontrar a raiz configurada quando o Struts2, você retirará os dados da parte superior da pilha de valor para converter JSON. Então, apenas jogamos a lista json que temos agora no topo da pilha de valor e, em seguida, escrevemos o resultado no arquivo de configuração. Portanto, o struts.xml é o seguinte:! [Struts.xml] (http://img.blog.csdn.net/20160526133359517)
3. Complete a página JSP front-end
A lógica no plano de fundo foi escrita e agora precisamos concluir a lógica de salto na recepção e a lógica após receber os dados JSON transmitidos do plano de fundo. A página sale.jsp é a seguinte:
<%@ página linguagem = "java" import = "java.util.*" PageEncoding = "utf-8"%> <! src = "$ {shop} /js/jQuery-1.11.1.js"> </script> <script type = "text/javascript" src = "$ {shop} /js/jscharts.js"> </script> <script type = "text/javscript"> (function (function) (funcionar (script> <script) ['#44A622', '#a7b629', '#cad857', '#e4db7b', '#ecde49', '#ecc049', '#ec9649', '#d97431',#d9531 ','#E4DB7s; $ .post ($ ("#venda"). val (), {número: $ ("#número"). alguns para exibir MyChart.SetSize (100*$ ("Número#"). Val (), 400); MyChart.SettitleFontSize (10); myChart.settitlecolor ('#607985'); myChart.setAxisValuesColor ('#607985'); myChart.setAxisNamex ('Nome do produto', false); MyChart.setAxisNamey ('Sales', True); MyChart.setGridOpacity (0,8); myChart.setaxispaddingleft (50); MyChart.setaxispaddingbottom (40); MyChart.Set3D (true); MyChart.Draw (); }, "json"); }); }); }); </script></head><body style="margin:10px;"> Please select the report type: <select id="sale"> <option value="sorder_querySale.action">Annual Sales Report</option> </select> Number of queries: <select id="number"> <option value="5">5</option> <option value="7">7</option> <option value="10">10</option> </select> type: <select id = "type"> <opção value = "bar"> tipo de coluna </pption> <opção value = "linha"> tipo de linha </pption> <opção value = "pie"> tipo em forma de torta </pption> </select> <stut Type = "Button" Id "" Value "=" query "> <ddd =" Gráfico ... </div> </body> </html> Existem principalmente várias caixas de seleção que podem ser exibidas de acordo com a seleção do usuário. Existem quatro parâmetros em $ .post ();. O primeiro é especificar a ação recebida. Eu o escrevi na tag de seleção e é obtido diretamente posicionando o elemento DOM. O segundo parâmetro é o parâmetro a ser transmitido. Aqui está o número a ser exibido. O terceiro parâmetro é a função a ser executada após o recebimento dos dados JSON em segundo plano. O quarto parâmetro é especificar o tipo de dados recebido. Aqui está o tipo JSON.
Vamos dar uma olhada nas funções executadas após o recebimento de dados em segundo plano. Este é principalmente o código JS que foi gerado automaticamente antes. Ele precisa gerar principalmente relatórios, mas uma pequena modificação foi feita, como o tipo de ícone foi alterado para o tipo selecionado pelo usuário e o número de itens exibidos também foi alterado. No entanto, essas são algumas pequenas mudanças e não há grande problema. Vamos dar uma olhada nos efeitos de exibição de diferentes tipos de ícones:
O efeito é muito bom; portanto, se você tem amigos que precisam fazer relatórios, é recomendável usar essa ferramenta JSChart, que é muito útil ~ Escrevi basicamente muito em todo o projeto ~ farei um resumo mais tarde e carregarei o código -fonte, e ele será quase acabado.
Endereço original: http://blog.csdn.net/eson_15/article/details/51506334
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.