هذا المشروع ينتهي أخيرًا ، لذلك لن أقوم بوظيفة التسجيل. قدمت مقالة أخرى حول وظيفة التسجيل التحقق من نموذج التسجيل بالتفصيل. يمكنك إضافة الوظيفة مباشرة إلى هذا المشروع وتعديل القفزات ذات الصلة ، لذلك لن أفعل ذلك بعد الآن. بالإضافة إلى ذلك ، في الوقت الحالي ، يحتوي هذا المشروع فقط على طبقة العمل وطبقة الخدمة. لم أستخرج طبقة داو بعد. بعد الانتهاء من هذا التقرير ، استخرجت طبقة DAO ثم تلخيص المشروع بأكمله. يمكنك تحميل التعليمات البرمجية المصدر. اهلا وسهلا بكم لتنزيله في ذلك الوقت ~
ينشئ هذا القسم بشكل أساسي الوظيفة الأخيرة: استخدم JSchart كأداة لعرض تقارير مبيعات المنتجات. JSchart هي أداة مفيدة للغاية لتقديم التقارير. السبب في سهلة الاستخدام هو أن أمثلةها الرسمية يتم بشكل جيد للغاية. يمكنك إنشاء التعليمات البرمجية المقابلة مباشرة بعد التشغيل في الواجهة الرسومية. نقوم بتعديله ، ثم نضعه في منطق مشروعنا.
1. مقدمة لأدوات JSchart
JSChart هي أداة ممتازة لصنع التقارير. الكود الذي تم إنشاؤه هو JS ، لذلك هو أداة جيدة لاستخدام صفحات JSP الأمامية. يمكنك إلقاء نظرة على موقع JSChart الرسمي ، والنقر فوق "تحرير عبر الإنترنت" بعد فتحه ، ثم حدد تقريرًا وانقر للدخول. يمكنك تحرير نوع المخطط وتنسيقه الذي نريده عبر الإنترنت ، على النحو التالي:! ! فيما يلي رمز JS الذي أنشأته (فقط اعتراض الجزء المفيد):
<div id = "chart_container"> تحميل مخطط ... </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*$ ("#number"). val () ، 400) ؛ mychart.setbarvalues (false) ؛ 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 ('اسم المنتج' ، خطأ) ؛ mychart.setaxisNamey ('Sales' ، true) ؛ mychart.setGridOpacity (0.8) ؛ mychart.setaxispaddingleft (50) ؛ mychart.setaxispadddingbottom (40) ؛ mychart.set3d (صواب) ؛ mychart.draw () ؛ </script> وبهذه الطريقة ، لدينا رمز JS لإنشاء الرسم البياني. دعنا نحلل العملية بأكملها: أولاً ، ترسل صفحة JSP في الواجهة الأمامية طلب AJAX ، ثم تجلب الخلفية البيانات المقابلة من قاعدة البيانات. نحتاج فقط إلى استرداد البيانات هنا التي تم بيعها والكمية المباعة المقابلة ، مما يعني أنه يتعين علينا أن نأخذه من جدول العنصر. بالإضافة إلى ذلك ، يتعين على الواجهة الأمامية اجتياز معلمة لإخبار الواجهة الخلفية التي يتم الحصول عليها. بعد جلب الخلفية ، يتم إرسال البيانات إلى المقدمة بتنسيق JSON ، ويقوم المقدمة بتشغيل رمز JS أعلاه (بالطبع ، هناك حاجة إلى التعديلات المقابلة) لعرض البيانات في شكل تقرير. حسنًا ، وفقًا لهذه العملية ، افعل الواجهة الخلفية أولاً.
2. أكمل منطق استعلام الخلفية
أولاً ، يتم الانتهاء من وظيفة الاستعلام في طبقة الخدمة. خلال هذا الاستعلام ، يتم الاستعلام عن عنصرين: المنتج وكمية مبيعات المنتج. ألق نظرة على الرمز:
. BaseserviceImpl <Sorder> تنفذ sorderservice {// حفظ رمز غير ذي صلة ... Override Public List <Object> QuerySale (int number) {// العنصرين الموجودين بدون تأثير هما String hql = "Select S.Name ، sum (S.Number) من مجموعة Sorder S Join S.Product بواسطة s.product.id" ؛ return getSession (). createquery (hql) // .setfirstresult (0) // .setMaxResults (number) // .list () ؛ }} ثم نكمدون جزء الإجراء:
@controller@scope ("prototype") تمتد الفئة العامة sorderaction إلى BaseAction <Sorder> {public string addsorder () {// حفظ رمز غير ذي صلة ... // ضع قائمة الاستعلام في الجزء العلوي من مكدس القيمة ، لماذا هذا؟ انظر التفسير أدناه ActionContext.getContext (). getValuestack (). push (jsonlist) ؛ إرجاع "jsonlist" ؛ }} يوجد كائن "قائمة" في BaseAction ، لكن لا يمكننا استخدام هذا الكائن ، لأن JsonList هنا هو كائن "قائمة" ، وليس كائن "قائمة" في BASEACTION ، لذلك نحن بحاجة إلى تحديد كائن "قائمة" في هذا الإجراء وتنفيذ طريقة الحصول على GET ، ثم تكوين الجذر في ملف STRUTS.XML ، ولكن هذا هو أمر يعادل بعض الشيء. هذه طريقة أبسط. إذا لم تتمكن من العثور على الجذر الذي تم تكوينه عند STRUTS2 ، فستقوم بإخراج البيانات من أعلى مكدس القيمة لتحويل JSON. لذلك نحن فقط نرمي jsonlist لدينا الآن إلى أعلى مكدس القيمة ، ثم اكتب النتيجة في ملف التكوين. لذا فإن struts.xml كما يلي:!
3. أكمل صفحة JSP الأمامية
تمت كتابة المنطق في الخلفية ، والآن نحتاج إلى إكمال منطق القفز في مكتب الاستقبال والمنطق بعد تلقي بيانات JSON التي تنتقل من الخلفية. صفحة sale.jsp كما يلي:
<٪@ page language = "java" import = "java.util.*" pageencoding = "utf-8" ٪> <! doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <head>@ include/public/head src = "$ {shop} /js/jquery-1.11.1.js"> </script> <script type = "text/javaScript" src = "$ {shop} /js/jscharts.js"> </script> <script type/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.clorize (colorarr.splice (0 ، data.length) ؛ MyChart.Settitle ("تقرير المبيعات") ؛ mychart.SettitleColor ('#607985') ؛ mychart.setaxisvaluesColor ('#607985') ؛ mychart.setaxisNamex ('اسم المنتج' ، خطأ) ؛ mychart.setaxisNamey ('Sales' ، true) ؛ mychart.setGridOpacity (0.8) ؛ mychart.setaxispaddingleft (50) ؛ mychart.setaxispadddingbottom (40) ؛ mychart.set3d (صواب) ؛ mychart.draw () ؛ } ، "json") ؛ }) ؛ }) ؛ }) ؛ </script> </head> <body style = "margin: 10px ؛"> يرجى تحديد نوع التقرير: <حدد ID = "SALE"> <Opture value = "sorder_querysale.action"> تقرير المبيعات السنوي </option> </select> عدد الاستعلامات: <تحديد ID = "number"> <spue value = "5" </select> type: <select id = "type"> <option value = "bar"> نوع العمود </option> <option value = "line"> نوع السطر </option> <ortive value = "pie" هناك بشكل أساسي العديد من مربعات التحديد التي يمكن عرضها وفقًا لاختيار المستخدم. هناك أربعة معلمات في $ .post () ؛. الأول هو تحديد الإجراء المستلم. لقد كتبته في علامة التحديد ويتم الحصول عليه مباشرة عن طريق وضع عنصر DOM. المعلمة الثانية هي المعلمة التي سيتم نقلها. هنا هو الرقم الذي سيتم عرضه. المعلمة الثالثة هي الوظيفة التي سيتم تنفيذها بعد تلقي بيانات JSON الخلفية. المعلمة الرابعة هي تحديد نوع البيانات المستلمة. هنا هو نوع JSON.
دعنا نلقي نظرة على الوظائف التي تم تنفيذها بعد تلقي بيانات الخلفية. هذا هو بشكل أساسي رمز JS الذي تم إنشاؤه تلقائيًا من قبل. يحتاج الأمر بشكل أساسي إلى إنشاء تقارير ، ولكن تم إجراء تعديل قليل ، مثل نوع الرمز تم تغييره إلى النوع الذي تم اختياره من قبل المستخدم ، وتم تغيير عدد التغييرات المعروضة أيضًا. ومع ذلك ، هذه بعض التغييرات الطفيفة ، وليس هناك مشكلة كبيرة. دعونا نلقي نظرة على تأثيرات عرض أنواع مختلفة من الرموز:
التأثير جيد جدًا ، لذلك إذا كان لديك أصدقاء يحتاجون إلى تقديم تقارير ، فمن المستحسن استخدام أداة JSChart هذه ، وهي مفيدة للغاية - لقد كتبت بشكل أساسي كثيرًا في المشروع بأكمله - سأقوم بإجراء ملخص لاحقًا وتحميل رمز المصدر ، وسوف ينتهي تقريبًا.
العنوان الأصلي: http://blog.csdn.net/eson_15/article/details/51506334
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.