Este proyecto finalmente está llegando a su fin, por lo que no haré la función de registro. Otro artículo sobre la función de registro ha introducido la verificación del formulario de registro en detalle. Puede agregar directamente la función a este proyecto y modificar los saltos relevantes, para que ya no lo haré. Además, en la actualidad, este proyecto solo tiene la capa de acción y la capa de servicio. Todavía no he extraído la capa DAO. Después de completar este informe, extraí la capa DAO y luego resumí todo el proyecto. Puede cargar el código fuente. Eres bienvenido a descargarlo en ese momento ~
Esta sección crea principalmente la última función: use JSChart como una herramienta para mostrar informes de ventas de productos. JSCHART es una herramienta muy útil para hacer informes. La razón por la que es fácil de usar es porque sus ejemplos oficiales están muy bien hechos. Puede generar directamente el código correspondiente después de operar en la interfaz gráfica. Lo modificamos y luego lo ponemos en la lógica de nuestro propio proyecto.
1. Introducción a las herramientas de JSChart
JSCHART es una excelente herramienta de creación de informes. El código generado es JS, por lo que es una buena herramienta para usar páginas JSP front-end. Puede echar un vistazo al sitio web oficial de JSChart, hacer clic en Editar en línea después de abrirlo y luego seleccionar un informe y hacer clic para ingresar. Puede editar el tipo de gráfico y el formato que queremos en línea, como sigue:! [JSCHART] (http://img.blog.csdn.net/20160526130623846) Baje hacia abajo y puede configurar el tipo que queremos: Todo, puede hacer clic en el botón que genera el código JS anterior y luego copiar el código correspondiente a nuestro JSP. Aquí está el código JS que generé (solo intercepta la parte útil):
<div id = "chart_container"> Carga de la tabla ... </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 (falso); mychart.setbarspacingratio (45); myChart.setBaropacity (1); myChart.SetBarBorderWidth (1); MyChart.Settitle ('Informe de ventas de centros comerciales'); mychart.settitlefontSize (10); mychart.settitlecolor ('#607985'); myChart.SetAxisValuesColor ('#607985'); myChart.SetAxIsNamex ('Nombre del producto', falso); myChart.SetAxIsNamey ('Ventas', True); myChart.setGridopacity (0.8); myChart.SetAxispAddingleft (50); myChart.SetAxispAddingbottom (40); mychart.set3d (verdadero); myChart.Draw (); </script> De esta manera, tenemos el código JS para generar el gráfico. Analicemos todo el proceso: primero, la página JSP frontal envía una solicitud AJAX, y luego el back-end obtiene los datos correspondientes de la base de datos. Solo necesitamos recuperar los datos aquí qué productos se han vendido y la cantidad vendida correspondiente, lo que significa que tenemos que tomar de la tabla de pedidos de la línea. Además, el front-end tiene que pasar un parámetro para decirle al back-end cuántos datos de datos obtener. Después de obtener el fondo, los datos se envían al primer plano en formato JSON, y el primer plano ejecuta el código JS anterior (por supuesto, se requieren modificaciones correspondientes) para mostrar los datos en forma de un informe. Ok, según este proceso, primero haga el backend.
2. Completa la lógica de la consulta de fondo
Primero, la función de consulta se completa en la capa de servicio. Durante esta consulta, se consultan dos artículos: el producto y la cantidad de ventas del producto. Echa un vistazo al código:
// Interfaz de SorderService Interface Public Interface SorderService extiende BaseService <Sorder> {// Guardar código irrelevante ... // Consulta El volumen de ventas de productos de Hot Products List Public List <ject> Querysale (int Number);} // SorderserviceImpl Implementation Class @Service ("SorderService") @supressWarnings ("no cambia"). BaseServiceImpl <Sorder> implementa Sorderservice {// Guardar código irrelevante ... @Override Public List <ject> QuerySale (int number) {// Los dos elementos encontrados sin afecto son cadena hql = "select s.name, suma (s.number) de Sorder S se unen S.Product Group por s.product.id"; return getSession (). CreateQuery (HQL) // .SetFirStresult (0) // .SetMaxResults (número) // .list (); }} Luego completamos la parte de acción:
@Controlador@scope ("prototipo") La clase pública SorderAction extiende Baseaction <Sorder> {public String addSorder () {// Guardar código irrelevante ... // Devuelve productos populares y sus ventas public String QerySale () {List <S Object> JSONList = SOORDERSERVICE.querySale (Model.getNumber ()); // Ponga la lista consultada en la parte superior de la pila de valor, ¿por qué hacer esto? Vea la explicación a continuación ActionContext.getContext (). GetValueStack (). Push (JSONList); regresar "jsonlist"; }} Hay un objeto `List` en Baseaction, pero no podemos usar este objeto, porque aquí JSONList es un objeto` List`, no un objeto 'List' en Baseaction, por lo que debemos definir un objeto `List 'en esta acción e implementar el método GET, y luego configurar Root en el archivo Struts.xml, pero esto es un poco problemático. Aquí hay un método más simple. Si no puede encontrar la raíz configurada cuando Struts2, eliminará los datos desde la parte superior de la pila de valor para convertir JSON. Así que simplemente lanzamos la JSONList que tenemos ahora a la parte superior de la pila de valor, y luego escribimos el resultado en el archivo de configuración. Entonces el struts.xml es el siguiente:
3. Complete la página JSP front-end
Se ha escrito la lógica en el fondo, y ahora necesitamos completar la lógica de salto en la recepción y la lógica después de recibir los datos JSON transmitidos desde el fondo. La página Sale.jsp es la siguiente:
<%@ page lenguaje = "java" import = "java.util.*" pageEncoding = "utf-8"%> <! DocType html público "-// w3c // dtd html 4.01 transitional // en"> <html> <fead> <%@ include file = "/public src = "$ {shop} /js/jquery-1.11.1.js"> </script> <script type = "text/javascript" src = "$ {shop} /js/jscharts.js"> </script> <script type = "text/javaScript"> $ (function () {"#subsit"). click (function (function () {) ['#44A622', '#A7B629', '#CAD857', '#E4DB7B', '#ECDE49', '#ECC049', '#EC9649', '#D97431', '#D95531', '#E4DB7B']; $ .post ($ ("#Sale"). Val (), {número: $ ("#número"). Val ()}, function (data) {var myChart = new jschart ('chart_container', $ ("#type"). val (), '' '); mychart.setDataArray (data); mychart.colorize (ColorR.slice (0, data); Unos pocos para mostrar mychart.setsize (100*$ ("#número"). mychart.settitlefontSize (10); mychart.settitlecolor ('#607985'); myChart.SetAxisValuesColor ('#607985'); myChart.SetAxIsNamex ('Nombre del producto', falso); myChart.SetAxIsNamey ('Ventas', True); myChart.setGridopacity (0.8); myChart.SetAxispAddingleft (50); myChart.SetAxispAddingbottom (40); mychart.set3d (verdadero); myChart.Draw (); }, "json"); }); }); }); </script> </head> <body style = "margin: 10px;"> Seleccione el tipo de informe: <select id = "sale"> <opción value = "Sorder_querysale.action"> Informe anual de ventas </opción> </select> Número de consultas: <select id = "Número"> <opción Value = "5"> 5 <//Valor de opción = "7"> 7 </opción> opción Valor 10 10 "10" 10 "10" </select> type: <select id = "type"> <option value = "bar"> type de columna </opción> <opción value = "línea"> type de línea </opción> <opción value = "pastel"> Tipo en forma de pastel </opción> </select> <input type = "botón" id = "Subt" value = "Query"> <div ID = "Chart_container"> cargando CHART ... </DivId <diving </diving " Hay principalmente varios cuadros de selección que se pueden mostrar de acuerdo con la selección del usuario. Hay cuatro parámetros en $ .post ();. El primero es especificar la acción recibida. Lo escribí en la etiqueta de selección y se obtiene directamente colocando el elemento DOM. El segundo parámetro es el parámetro que se transmitirá. Aquí está el número que se exhibirá. El tercer parámetro es la función que se ejecutará después de recibir los datos JSON de fondo. El cuarto parámetro es especificar el tipo de datos recibidos. Aquí está el tipo JSON.
Echemos un vistazo a las funciones ejecutadas después de recibir datos de fondo. Este es principalmente el código JS que se generó automáticamente antes. Principalmente necesita generar informes, pero se ha realizado un poco de modificación, como el tipo de icono se ha cambiado al tipo seleccionado por el usuario, y el número de cambios mostrados también se ha cambiado. Sin embargo, estos son algunos cambios menores, y no hay un gran problema. Echemos un vistazo a los efectos de visualización de diferentes tipos de iconos:
El efecto es bastante bueno, por lo que si tiene amigos que necesita hacer informes, se recomienda usar esta herramienta JSCHART, que es muy útil ~ Básicamente, he escrito tanto en todo el proyecto ~ Haré un resumen más adelante y cargaré el código fuente, y casi terminará.
Dirección original: http://blog.csdn.net/eson_15/article/details/51506334
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.