Ce projet touche enfin à une fin, donc je ne ferai pas la fonction d'enregistrement. Un autre article sur la fonction d'enregistrement a introduit la vérification du formulaire d'enregistrement en détail. Vous pouvez ajouter directement la fonction à ce projet et modifier les sauts pertinents, donc je ne le ferai plus. De plus, à l'heure actuelle, ce projet n'a que la couche d'action et la couche de service. Je n'ai pas encore extrait la couche Dao. Après avoir terminé ce rapport, j'ai extrait la couche DAO, puis j'ai résumé l'intégralité du projet. Vous pouvez télécharger le code source. Vous êtes invités à le télécharger à ce moment-là ~
Cette section crée principalement la dernière fonction: utilisez JSChart comme un outil pour afficher les rapports de vente de produits. JSChart est un outil très utile pour faire des rapports. La raison pour laquelle il est facile à utiliser est que ses exemples officiels sont très bien faits. Vous pouvez générer directement du code correspondant après avoir fonctionné dans l'interface graphique. Nous le modifions, puis le mettons dans la logique de notre propre projet.
1. Introduction aux outils JSChart
JSChart est un excellent outil de réalisation. Le code généré est JS, c'est donc un bon outil pour utiliser des pages JSP frontales. Vous pouvez jeter un œil au site officiel de JSChart, cliquer sur EDIDE en ligne après l'ouvrir, puis sélectionner un rapport et cliquer pour entrer. Vous pouvez modifier le type de graphique et le format que nous voulons en ligne, comme suit :! [jschart] (http://img.blog.csdn.net/20160526130623846) Revisez et vous pouvez définir le type que nous voulons :! Après tout, vous pouvez cliquer sur le bouton qui génère le code JS ci-dessus, puis copier le code correspondant à notre JSP. Voici le code JS que j'ai généré (il suffit d'intercepter la pièce utile):
<div id = "Chart_Container"> Charging Chart ... </ 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 * $ ("# numéro"). Val (), 400); myChart.setBarValues (false); myChart.setBarspacingRatio (45); myChart.setBaropacity (1); MyChart.SetBarborderWidth (1); MyChart.SetTitle («Rapport de vente du centre commercial»); MyChart.SetTitleFontize (10); MyChart.SetTitleColor ('# 607985'); MyChart.SetaxisValuesColor ('# 607985'); myChart.SetaxisNamex («Nom du produit», false); myChart.SetaxisNamey («ventes», true); MyChart.setGridOpacity (0,8); MyChart.Setaxispaddingleft (50); MyChart.SetaxispaddingBottom (40); myChart.set3d (true); mychart.draw (); </cript> De cette façon, nous avons le code JS pour générer le graphique. Analysons l'ensemble du processus: d'abord, la page JSP frontale envoie une demande AJAX, puis le back-end récupère les données correspondantes de la base de données. Nous n'avons qu'à récupérer les données ici quels produits ont été vendus et la quantité vendue correspondante, ce qui signifie que nous devons retirer du tableau des articles de ligne. De plus, le frontal doit passer un paramètre pour indiquer à l'arrière le nombre de données à obtenir. Une fois l'arrière-plan récupéré, les données sont envoyées au format JSON au premier plan, et le premier plan exécute le code JS ci-dessus (bien sûr, des modifications correspondantes sont nécessaires) pour afficher les données sous la forme d'un rapport. OK, selon ce processus, faites d'abord le backend.
2. Complétez la logique de la requête de fond
Tout d'abord, la fonction de requête est terminée dans la couche de service. Au cours de cette requête, deux articles sont interrogés: le produit et la quantité de vente du produit. Jetez un œil au code:
// Interface Sorderservice Interface publique Sorderservice étend BaseService <Sorder> {// Enregistrer le code non pertinent ... // interroger le volume des ventes de produits Hot Public List <Object> QuerySale (numéro d'intre BaseServiceImpl <Sorder> implémente Sorderservice {// Enregistrer le code non pertinent ... @Override public list <object> QuerrySale (int numéro) {// Les deux éléments trouvés sans affect sont String hql = "Select S.Name, sum (s.number) de Sorder S JOIN S.Product Group par S.Product.id"; return getSession (). CreateQuery (hql) // .setFirStResult (0) // .SetMaxResults (numéro) // .List (); }} Ensuite, nous terminons la partie d'action:
@ Controller @ Scope ("Prototype") public class Sorderaction étend BaseAction <Sorder> {public String AddSorder () {// Enregistrer le code non pertinent ... // Renvoie des produits populaires et leurs ventes publiquent Public String QuerrySale () {list <object> jsonList = SOORDERSERVICE.QUERYSALE (Model.getNumber ()); // Mettez la liste interrogée en haut de la pile de valeur, pourquoi? Voir l'explication ci-dessous ActionContext.getContext (). GetValueStack (). Push (JSONList); retourner "JSONList"; }} Il y a un objet «liste» dans BaseAction, mais nous ne pouvons pas utiliser cet objet, car ici JSONList est un objet `Liste», pas un objet `Liste» dans BaseAction, nous devons donc définir un objet `Liste 'dans cette action et implémenter la méthode GET, puis configurer Root dans le fichier Struts.xml, mais cela est un peu troublé. Voici une méthode plus simple. Si vous ne trouvez pas la racine configurée lorsque Struts2, vous supprimerez les données en haut de la pile de valeur pour convertir JSON. Nous jetons donc simplement la JSONList que nous avons maintenant en haut de la pile de valeur, puis écrivons le résultat dans le fichier de configuration. Ainsi, la strut.xml est la suivante :! [strut.xml] (http://img.blog.csdn.net/2016052613359517)
3. Complétez la page JSP frontale
La logique en arrière-plan a été écrite, et maintenant nous devons terminer la logique de saut dans la réception et la logique après avoir reçu les données JSON transmises à partir de l'arrière-plan. La page Sale.jsp est la suivante:
<% @ Page Language = "Java" Import = "Java.util. *" Pageencoding = "UTF-8"%> <! DocType Html public "- // w3c // dtd html 4.01 transitional // en"> <html> <adread> <% @ incluse File = "/ public / head.jspf"%> <Script = "Text / Javas" src = "$ {shop} /js/jquery-1.11.1.js"> </ script> <script type = "text / javascrip ['# 44A622', '# A7B629', '# cad857', '# e4db7b', '# ecde49', '# ecc049', '# ec9649', '# d97431', '# d95531' ',' # e4db7b ']; $ .post ($ ("# vente"). Val (), {numéro: $ ("# numéro"). Val ()}, fonction (data) {var myChart = new JSCHART ('chart_licainer', $ ("# type"). Val (), ''); myChart.SetDataArray (data); MyChart.Colorize (ColorArr.Slice (0, Data.Length)); MyChart.setTitle («Rapport de vente du centre commercial»); MyChart.SetTitleColor ('# 607985'); MyChart.SetaxisValuesColor ('# 607985'); myChart.SetaxisNamex («Nom du produit», false); myChart.SetaxisNamey («ventes», true); MyChart.setGridOpacity (0,8); MyChart.Setaxispaddingleft (50); MyChart.SetaxispaddingBottom (40); myChart.set3d (true); MyChart.Draw (); }, "JSON"); }); }); }); </cript> </ head> <body style = "margin: 10px;"> Veuillez sélectionner le type de rapport: <select id = "Sale"> <option value = "Sorder_QuerySale.action"> Rapport de vente annuel </ Option> </ select> Nombre de requêtes: <lelect id = "nombre"> <option Value = "5"> 5 </ Option> <option Value = "7"> 7 </ / option> <option = "10" </ select> Type: <SELECT ID = "Type"> <Option Value = "Bar"> Type de colonne </ Option> <Option Value = "Line"> Type de ligne </ Option> <Option Value = "PIE"> PIE-SPADED TYPE </ OPTION> </ SELECT> <Entrée Type = "Button" Id = "Soumide" Value = "Query"> <div id = "Chart_Continer"> LOAGEMENT " Graphique ... </div> </ body> </html> Il existe principalement plusieurs cases de sélection qui peuvent être affichées en fonction de la sélection de l'utilisateur. Il y a quatre paramètres dans $ .post ();. Le premier consiste à spécifier l'action reçue. Je l'ai écrit dans la balise de sélection et il est obtenu directement en positionnant l'élément DOM. Le deuxième paramètre est le paramètre à transmettre. Voici le numéro à afficher. Le troisième paramètre est la fonction à exécuter après avoir reçu les données JSON d'arrière-plan. Le quatrième paramètre consiste à spécifier le type de données reçu. Voici le type JSON.
Jetons un coup d'œil aux fonctions exécutées après avoir reçu des données d'arrière-plan. Il s'agit principalement du code JS qui a été généré automatiquement auparavant. Il a principalement besoin de générer des rapports, mais un peu de modification a été apporté, comme le type d'icône, a été modifié par le type sélectionné par l'utilisateur, et le nombre de modifications affichées a également été modifiée. Cependant, ce sont quelques changements mineurs et il n'y a pas de gros problème. Jetons un coup d'œil aux effets d'affichage de différents types d'icônes:
L'effet est assez bon, donc si vous avez des amis qui ont besoin de faire des rapports, il est recommandé d'utiliser cet outil JSChart, qui est très utile ~ J'ai beaucoup écrit dans l'ensemble du projet ~ Je ferai un résumé plus tard et téléchargerai le code source, et ce sera presque terminé.
Adresse originale: http://blog.csdn.net/eson_15/article/details/51506334
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.