كيفية تحديث الرسم البياني Sparkline كل 3 ثوانٍ في Spring MVC (تحديث في الوقت الفعلي)

نشرت: 2013-06-17

Sparkline.js دروس الرسم البياني باستخدام Spring MVC 4.2.2 - نصائح Crunchify

jQuery Sparkline: هذا المكون الإضافي jQuery يجعل من السهل إنشاء عدد من أنواع مختلفة من خطوط المؤشرات مباشرة في المتصفح ، باستخدام سطر من اثنين من HTML و Javascript عبر الإنترنت.

لا يحتوي المكون الإضافي على أي تبعيات بخلاف jQuery ويعمل مع جميع المتصفحات الحديثة

الآن دعنا نستخدم هذه المكتبة في هندسة Spring MVC لتطبيق الويب في الوقت الحقيقي . إليك تدفق سريع لما سنفعله هنا:

  • في Spring MVC ، تحصل وحدة التحكم الخاصة بي على البيانات كل 3 ثوانٍ وترسلها إلى ملف .jsp (عرض).
  • اعرض ملف (.jsp) ، واحصل على بيانات JSONArray كل 3 ثوانٍ عبر مكالمة AJAX
  • يرسل استدعاء AJAX البيانات إلى دالة consumeJSONData (jsonArray)
  • تستهلك JSONData تقوم بتحديث Sparkline كل 3 ثوانٍ

لنبدأ الترميز:

الخطوة 1

Pre-Requisite: https://crunchify.com/hello-world-example-spring-mvc-3-2-1/ (انشر هذا المشروع بنجاح على Tomcat)

أنت بحاجة أدناه إلى json.jar Maven إضافية. افتح ملف pom.xml وأضف التبعية أدناه.

pom.xml
1
2
3
4
5
< dependency >
< groupId > org . json < / groupId >
< artifactId > json < / artifactId >
< version > 20150729 < / version >
< / dependency >

الخطوة 2

قم بإنشاء ملف CrunchifySpringSparklineConsumeJSONArray .java ضمن حزمة com.crunchify.controller .

CrunchifySpringSparklineConsumeJSONArray.java
Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
package com . crunchify . controller ;
 
import java . util . Random ;
 
import org . json . JSONArray ;
import org . json . JSONException ;
import org . json . JSONObject ;
import org . springframework . stereotype . Controller ;
import org . springframework . web . bind . annotation . RequestMapping ;
import org . springframework . web . bind . annotation . RequestMethod ;
import org . springframework . web . bind . annotation . ResponseBody ;
import org . springframework . web . servlet . ModelAndView ;
 
/**
* @author Crunchify.com
*
*/
 
@Controller
public class CrunchifySpringSparklineConsumeJSONArray {
 
     @RequestMapping ( "/sparkline" )
     public ModelAndView crunchifySparklineTest ( ) {
         return new ModelAndView ( "sparkline" , "message" , "Sparkline.js Example which accepts JSONArray value every 3 seconds & updates graphs.." ) ;
     }
 
     @RequestMapping ( value = "/sparklinetest" , method = RequestMethod . GET )
     public @ResponseBody
     String constructJSONArray ( ) throws JSONException {
 
         JSONObject one = new JSONObject ( ) ;
         JSONObject two = new JSONObject ( ) ;
         JSONObject three = new JSONObject ( ) ;
 
         JSONArray result = new JSONArray ( ) ;
         Random r = new Random ( ) ;
         int [ ] r1 = { r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) } ;
         int [ ] r2 = { r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) } ;
         int [ ] r3 = { r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) } ;
 
         one . put ( "one" , r1 ) ;
         two . put ( "two" , r2 ) ;
         three . put ( "three" , r3 ) ;
 
         result . put ( one ) ;
         result . put ( two ) ;
         result . put ( three ) ;
 
         JSONObject jsonObj = new JSONObject ( ) ;
         jsonObj . put ( "sparkData" , result ) ;
         System . out . println ( "Sendig this data to view (sparkline.jsp): " + jsonObj . toString ( ) ) ;
 
         return jsonObj . toString ( ) ;
     }
}

الخطوه 3

ملف Creare sparkline.jsp ضمن مجلد /WebContent/WEB-INF/jsp folder.

sparkline.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
< html >
< head >
< TITLE > Crunchify - Sparkline . js Example which accepts JSONArray
     value every 3 seconds < / TITLE >
 
<style type ="text/css">
body {
     background-image :
         url ( 'https://cdn.crunchify.com/wp-content/uploads/2013/03/Crunchify.bg_.300.png' ) ;
}
</style>
<script type = "text/javascript"
     src = "http://code.jquery.com/jquery-1.10.1.min.js" > </script>
<script
     src = "https://cdn.crunchify.com/wp-content/uploads/code/jquery.sparkline.js" > </script>
 
<script type = "text/javascript" >
     function crunchifySparkline ( ) {
         $ . ajax ( {
             url : 'sparklinetest.html' ,
             dataType : "json" ,
             cache : false ,
             contentType : 'application/json; charset=utf-8' ,
             type : 'GET' ,
             success : function ( result ) {
                 var one = result . sparkData ;
                 //alert(one);
                 consumeJSONData ( one ) ;
             }
         } ) ;
     }
 
     function consumeJSONData ( sparkData ) {
         console . log ( sparkData ) ;
         for ( var i = 0 ; i < sparkData . length ; i ++ ) {
             var obj = sparkData [ i ] ;
             var crunchifyName ;
             var crunchifyValue ;
             for ( var key in obj ) {
                 crunchifyName = key ;
                 crunchifyValue = obj [ key ] . toString ( ) ;
                 crunchifyValue = crunchifyValue . substr ( 1 ) ;
                 crunchifyValue = crunchifyValue . substring ( 0 ,
                         crunchifyValue . length - 1 ) ;
                 var n = crunchifyValue . split ( "," ) ;
                 console . log ( n ) ;
                 $ ( "#" + crunchifyName ) . sparkline ( n , {
                     type : 'line' ,
                     width : '80' ,
                     fillColor : '#eeeeee'
                 } ) ;
             }
         }
     }
</script>
 
<script type = "text/javascript" >
     var intervalId = 0 ;
     intervalId = setInterval ( crunchifySparkline , 3000 ) ;
</script>
< / head >
 
< body >
     < div align = "center" >
         < br > < br > $ { message } < br > < br >
         < div id = "result" > < / div >
 
         < br >
         < br > Sparkline One : &nbsp; &nbsp; &nbsp; &nbsp; < span id = "one" > . < / span >
         < br >
         < br > Sparkline Two : &nbsp; &nbsp; &nbsp; &nbsp; < span id = "two" > . < / span >
         < br >
         < br > Sparkline Three : &nbsp; &nbsp; &nbsp; &nbsp; < span id = "three" > . < / span >
         < br >
         < br > < br > < br >
 
         < div
             style = "font-family: verdana; line-height: 25px; padding: 5px 10px; border-radius: 10px; border: 3px solid #EE872A; width: 50%; font-size: 12px;" >
 
             Sparkline . js Example which accepts JSONArray value every 3 seconds by
             < a href = 'https://crunchify.com' > Crunchify < / a > . Click < a
                 href = 'https://crunchify.com/category/java-tutorials/' > here < / a >
             for all Java , Spring MVC , Web Development examples . < br >
         < / div >
     < / div >
< / body >
< / html >

يجب أن يقرأ آخر:

  • مثال بسيط لتعداد Java
  • مثال Java MailAPI - إرسال بريد إلكتروني عبر GMail SMTP
  • ما هو خيط الشيطان في جافا؟ مثال مرفق

الخطوة 4

تحقق من هيكل الدليل هذا.

الرسم البياني المتلألئ باستخدام Spring MVC - التحديث كل 3 ثوانٍ

الخطوة 5

أعد نشر مشروع CrunchifySpringMVCTutorial في Apache Tomcat Server مرة أخرى.

  • انتقل إلى علامة تبويب Server في الكسوف
  • انقر فوق Clean...
  • انقر فوق Publish
  • انقر فوق Restart

الخطوة 6

افتح مستعرض الويب وقم بزيارة عنوان URL هذا للاطلاع على النتيجة: http: // localhost: 8080 / CrunchifySpringMVCTutorial / sparkline.html

كيفية التحقق من النتيجة والتحقق من التدفق الكامل؟

الخطوة 1

احترس من نتيجتك .. يجب أن تكون هي نفسها التي تراها في أعلى هذه الصفحة.

الخطوة 2

تحقق من إخراج وحدة التحكم Eclipse. سترى سجل وحدة التحكم بالبيانات كل 3 ثوان. وهذا يعني أن وحدة التحكم Spring MVC ترسل البيانات إلى صفحة JSP كل 3 ثوانٍ.

تقوم وحدة التحكم Spring MVC بدفع البيانات إلى صفحة JSP كل 3 ثوانٍ

الخطوه 3

تحقق من وحدة تحكم المتصفح لرؤية البيانات الحية.

  1. انقر بزر الماوس الأيمن على الصفحة لتحديد Inspect Element
  2. حدد علامة تبويب console

بيانات Spring MVC الحية تأتي إلى متصفح Chrome - نصائح Crunchify