Dieses Projekt endet endlich, sodass ich die Registrierungsfunktion nicht ausführen werde. Ein weiterer Artikel über die Registrierungsfunktion wurde im Detail die Anmeldeformularüberprüfung eingeführt. Sie können die Funktion diesem Projekt direkt hinzufügen und die relevanten Sprünge ändern, damit ich sie nicht mehr tun werde. Darüber hinaus verfügt dieses Projekt derzeit nur über die Aktionsschicht und die Serviceschicht. Ich habe die DAO -Schicht noch nicht extrahiert. Nach Abschluss dieses Berichts habe ich die DAO -Schicht extrahiert und dann das gesamte Projekt zusammengefasst. Sie können den Quellcode hochladen. Sie können es zu diesem Zeitpunkt gerne herunterladen ~
In diesem Abschnitt wird hauptsächlich die letzte Funktion erstellt: Verwenden Sie JSchart als Tool, um Produktverkaufsberichte anzuzeigen. JSchart ist ein sehr nützliches Instrument für Berichte. Der Grund, warum es einfach zu bedienen ist, ist, dass seine offiziellen Beispiele sehr gut gemacht sind. Sie können nach dem Betrieb in der grafischen Schnittstelle den entsprechenden Code direkt generieren. Wir ändern es und setzen es dann in die Logik unseres eigenen Projekts.
1. Einführung in JSchart -Tools
JSCHART ist ein hervorragendes Instrument für die Berichterstattung. Der generierte Code ist JS, daher ist er ein gutes Werkzeug für die Verwendung von Front-End-JSP-Seiten. Sie können einen Blick auf die offizielle Website von JSchart werfen, nach dem Öffnen auf Online -Bearbeiten klicken und dann einen Bericht auswählen und klicken, um einzugeben. You can edit the chart type and format we want online, as follows:  Turn down and you can set the type we want:  After Alle können auf die Schaltfläche klicken, die den obigen JS -Code generiert, und dann den entsprechenden Code in unseren JSP kopieren. Hier ist der JS -Code, den ich generiert habe (fangen Sie einfach den nützlichen Teil ab):
<div id = "chart_container"> ladendiagramm ... </div> <script type = "text/javaScript"> var myChart = new jSchart ('chart_container', bar '', ''); mychart.setDatArray (['#44a622', '#a7b629', '#cad857', '#e4db7b', '#ecde49', '#EC9649', '#D97431', '#d95531']); myChart.colorize (Colorarr.Slice (0, Data.Length)); mychart.setSize (100*$ ("#number"). val (), 400); myChart.setBarvalues (falsch); myChart.setBarspacingRatio (45); mychart.setBaropacity (1); myChart.setbarBorderwidth (1); mychart.settitle ('Mall Sales Report'); mychart.settitleFontsize (10); mychart.settitlecolor ('#607985'); mychart.setaxisValuesColor ('#607985'); myChart.setaxisNamex ('Produktname', false); myChart.setaxisNamey ("Verkauf", wahr); myChart.setGridopacity (0,8); mychart.setaxispaddingLeft (50); mychart.setaxispaddingbottom (40); mychart.set3d (true); mychart.draw (); </script> Auf diese Weise haben wir den JS -Code, um das Diagramm zu generieren. Lassen Sie uns den gesamten Prozess analysieren: Zuerst sendet die Front-End-JSP-Seite eine AJAX-Anforderung und dann ruft die Back-End die entsprechenden Daten aus der Datenbank ab. Wir müssen nur die Daten hier abrufen, welche Produkte verkauft wurden und die entsprechende verkaufte Menge, was bedeutet, dass wir aus der Werbebuchungstabelle abnehmen müssen. Darüber hinaus muss das Front-End einen Parameter übergeben, um das Back-End zu ermitteln, wie viele Datenstücke zu erhalten sind. Nachdem der Hintergrund abgerufen wurde, werden die Daten im JSON -Format in den Vordergrund gesendet, und der Vordergrund wird den obigen JS -Code ausgeführt (natürlich sind entsprechende Änderungen erforderlich), um die Daten in Form eines Berichts anzuzeigen. OK, machen Sie nach diesem Prozess zuerst das Backend.
2. Vervollständigen Sie die Logik der Hintergrundabfrage
Zunächst ist die Abfragefunktion in der Serviceschicht ausgeführt. Während dieser Abfrage werden zwei Elemente abgefragt: das Produkt und die Verkaufsmenge des Produkts. Schauen Sie sich den Code an:
// SORDERService Interface Public Interface SORDERService erweitert BaseSeService <Sorder> {// irrelevanten Code speichern ... // Abfragen Sie das Verkaufsvolumen der Hot Products Public List <FOLGEL> querysale (int number);} // SORDERSIVICIMPLIMPLE -KLASSE @Service ("Sorderservice) @uppresctwarnings (" everceckeded "). BaseServiceImpl <Sorder> implementiert SORDERService {// irrelevanten Code speichern ... @Override publiclist <Object> querysale (int nummer) {// Die beiden ohne Affekt gefundenen Elemente sind String -HQL = "SELECT S.NAME, SUM (S.Number) von SORDER S -Join S.Product Group by S.Product.id.id"; return getSession (). createEquery (HQL) // .setfirstresult (0) // .setMaxResults (Nummer) // .List (); }} Dann vervollständigen wir den Aktionsteil:
@Controller@scope ("prototyp") öffentliche Klasse Sorderaction erweitert Baseaction <Sorder> {public String addSorder () {// Irrelevantes Code speichern ... // Populäre Produkte und deren Vertrieb public String querysale () {list <Ontoces> jsonlist = Soorderservice.querysale (model.getnumber ()); // Steck die abgefragte Liste ganz oben im Wert -Stapel. Warum tun das? Siehe die Erläuterung unten ActionContext.getContext (). GetValUestack (). Push (jsonList); zurück "jsonList"; }} Es gibt ein "List" -Objekt in der Basisreaktion, aber wir können dieses Objekt nicht verwenden, da JsonList hier ein "List" -Objekt ist, kein "List" -Objekt in der Basreaktion. Daher müssen wir ein "List" -Objekt in dieser Aktion definieren und die GET -Methode implementieren und dann in der Stribs.xml -Datei konfigurieren, aber dies ist ein bisschen mutig. Hier ist eine einfachere Methode. Wenn Sie das konfigurierte Root bei STRUTS2 nicht finden können, nehmen Sie die Daten von der Spitze des Wertstapels zum Konvertieren von JSON heraus. Wir werfen also einfach die JSONLIST, die wir jetzt an die Spitze des Wertstapels haben, und schreiben dann das Ergebnis in der Konfigurationsdatei. Also ist die Struts.xml wie folgt :! [Struts.xml] (http://img.blog.csdn.net/20160526133359517)
3. Vervollständigen Sie die Front-End-JSP-Seite
Die Logik im Hintergrund wurde geschrieben, und jetzt müssen wir die Sprunglogik in der Rezeption und die Logik abschließen, nachdem wir die vom Hintergrund übertragenen JSON -Daten erhalten haben. Die Seite "Sale.jsp" lautet wie folgt:
<%@ page Language = "java" import = "java.util. src = "$ {shop} /js/jquery-1.11.1.js"> </script> <script type = "text/javaScript" src = "$ {cop} /js/jscharts.js"> </script> <script type = "text/javascript"> $ () {) {$ ("######("###("###("##("##("##("###("##("##("##("###(#####). ['#44a622', '#a7b629', '#CAD857', '#e4db7b', '#ecde49', '#ecc049', '#ec9649', '#d97431', '#d95531',#e4db7b ']; $ .post ($ ("#sale"). val (), {number: $ ("#number"). val ()}, function (data) {var myChart = new JSchart ('chart_container', $ ("#type"). val (), ''); myChart.setDatArray (data); myChart.colorize (Colorarr.Slice (0, Daten); mychart.settitle ('Mall Sales Report'); mychart.settitlecolor ('#607985'); mychart.setaxisValuesColor ('#607985'); myChart.setaxisNamex ('Produktname', false); myChart.setaxisNamey ("Verkauf", wahr); 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"> <option value = "bar"> Spaltentyp </option> <Option Value = "Zeile"> Zeilentyp </option> <Option Value = "PIE"> PIE-förmiger Typ </option> </select> <Eingabe type = "button" id "id" id "proby =" query "> </divy =" chart_/htht_/htht_/htht_contaNer "> lastung"> lastung "> chorgtht =" karten "> </htht_/kontainer"> lastung "> divery> </htht_/ht/htht_contaNer"> chagel- Es gibt hauptsächlich mehrere Auswahlboxen, die gemäß der Benutzerauswahl angezeigt werden können. Es gibt vier Parameter in $ .post ();. Der erste ist, die empfangene Aktion anzugeben. Ich habe es in das Auswahl -Tag geschrieben und es wird direkt durch Positionieren des DOM -Elements erhalten. Der zweite Parameter ist der zu übertragende Parameter. Hier ist die Nummer, die angezeigt wird. Der dritte Parameter ist die Funktion, die nach Empfangen der Hintergrund -JSON -Daten ausgeführt wird. Der vierte Parameter besteht darin, den empfangenen Datentyp anzugeben. Hier ist der JSON -Typ.
Schauen wir uns die Funktionen an, die nach Erhalt von Hintergrunddaten ausgeführt wurden. Dies ist hauptsächlich der JS -Code, der zuvor automatisch generiert wurde. Es muss hauptsächlich Berichte generieren, aber es wurde eine kleine Änderung vorgenommen, z. B. der Typ des Symbols wurde in den vom Benutzer ausgewählten Typ geändert, und die Anzahl der angezeigten Änderungen wurde ebenfalls geändert. Dies sind jedoch einige geringfügige Veränderungen, und es gibt kein großes Problem. Schauen wir uns die Display -Effekte verschiedener Arten von Symbolen an:
Der Effekt ist ziemlich gut. Wenn Sie Freunde haben, die Berichte erstellen müssen, wird empfohlen, dieses JSchart -Tool zu verwenden, was sehr nützlich ist. Ich habe im Grunde so viel im gesamten Projekt geschrieben.
Originaladresse: http://blog.csdn.net/eson_15/article/details/51506334
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.