Содержание
jQuery Sparkline: этот плагин jQuery позволяет легко генерировать несколько различных типов спарклайнов непосредственно в браузере, используя онлайн линию из двух HTML и Javascript .
Плагин не имеет никаких зависимостей кроме jQuery и работает со всеми современными браузерами
Теперь давайте использовать эту библиотеку в архитектуре Spring MVC для вашего веб-приложения реального времени . Вот быстрый поток того, что мы будем делать здесь:
- В Spring MVC мой контроллер получает данные каждые 3 секунды и отправляет их в файл .jsp (просмотр).
- Просмотр (.jsp) файла, получение данных JSONArray каждые 3 секунды с помощью вызова AJAX
- Вызов AJAX отправляет данные для использования в функциюJSONData (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
|
< зависимость >
< groupId > org . JSON идентификатор_группы>
< artifactId > json < / artifactId >
< версия > 20150729 < / версия >
< / зависимость >
|
Шаг 2
Создать файл CrunchifySpringSparklineConsumeJSONArray .java под com.crunchify.controller пакет.
CrunchifySpringSparklineConsumeJSONArray.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
|
пакет ком . crunchify. контроллер ;
Импортировать Java. Util. Случайный ;
Импортировать орг. JSON . JSONArray ;
Импортировать орг. JSON . JSONException ;
Импортировать орг. JSON . JSONObject ;
Импортировать орг. пружинная рама . стереотип . Контроллер ;
Импортировать орг. пружинная рама . веб . привязывать. аннотация . RequestMapping ;
Импортировать орг. пружинная рама . веб . привязывать. аннотация . RequestMethod ;
Импортировать орг. пружинная рама . веб . привязывать. аннотация . ResponseBody ;
Импортировать орг. пружинная рама . веб . сервлет. ModelAndView ;
/ **
* @author Crunchify.com
*
* /
@Controller
общественности учебный класс CrunchifySpringSparklineConsumeJSONArray {
@RequestMapping ( / sparkline )
общественности ModelAndView crunchifySparklineTest ( ) {
вернуть новый ModelAndView ( спарклайн , сообщение , Пример Sparkline.js, который принимает значение JSONArray каждые 3 секунды и обновляет графики .. ) ;
}
@RequestMapping ( значение знак равно / sparklinetest , метод знак равно RequestMethod . ПОЛУЧИТЬ )
общественности @ResponseBody
строка constructJSONArray ( ) бросает JSONException {
JSONObject one знак равно новый JSONObject ( ) ;
JSONObject two знак равно новый JSONObject ( ) ;
JSONObject three знак равно новый JSONObject ( ) ;
Результат JSONArray знак равно новый JSONArray ( ) ;
случайный р знак равно новый Случайный ( ) ;
int [ ] r1 знак равно { т. nextInt ( 100 ) , т. nextInt ( 100 ) , т. nextInt ( 100 ) , т. nextInt ( 100 ) , т. nextInt ( 100 ) , т. nextInt ( 100 ) , т. nextInt ( 100 ) , т. nextInt ( 100 ) } ;
int [ ] r2 знак равно { т. nextInt ( 100 ) , т. nextInt ( 100 ) , т. nextInt ( 100 ) , т. nextInt ( 100 ) , т. nextInt ( 100 ) , т. nextInt ( 100 ) , т. nextInt ( 100 ) , т. nextInt ( 100 ) } ;
int [ ] r3 знак равно { т. nextInt ( 100 ) , т. nextInt ( 100 ) , т. nextInt ( 100 ) , т. nextInt ( 100 ) , т. nextInt ( 100 ) , т. nextInt ( 100 ) , т. nextInt ( 100 ) , т. nextInt ( 100 ) } ;
один. положить ( «один» , r1 ) ;
два. положить ( «два» , г2 ) ;
три. положить ( «три» , r3 ) ;
результат. положить ( один ) ;
результат. положить ( два ) ;
результат. положить ( три ) ;
JSONObject jsonObj знак равно новый JSONObject ( ) ;
jsonObj . положить ( sparkData , результат ) ;
Система. вне. println ( Отправить эти данные для просмотра (sparkline.jsp): + jsonObj . toString ( ) ) ;
вернуть jsonObj . toString ( ) ;
}
}
|
Шаг 3
Создать файл sparkline.jsp в папке /WebContent/WEB-INF/jsp папка.
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 >
< голова >
< TITLE > Crunchify — Спарклайн . Пример JS который принимает JSONArray
значение каждый 3 секунд < / TITLE >
тело {
фоновое изображение :
url ( 'https://cdn.crunchify.com/wp-content/uploads/2013/03/Crunchify.bg_.300.png' ) ;
}
src = http://code.jquery.com/jquery-1.10.1.min.js >
<сценарий
src = https://cdn.crunchify.com/wp-content/uploads/code/jquery.sparkline.js >
функция crunchifySparkline ( ) {
$ . Аякс ( {
URL : 'sparklinetest.html' ,
тип данных : JSON ,
кэш : ложь ,
Тип содержимого : «приложения / JSON; charset = utf-8 ' ,
тип : «ПОЛУЧИТЬ» ,
успех : функция ( результат ) {
вар один знак равно результат. sparkData ;
// оповещения (один);
Потребить JSONData ( один ) ;
}
} ) ;
}
функция Потребить JSONData ( sparkData ) {
консоль. log ( sparkData ) ;
за ( вар я знак равно 0 ; я < sparkData . длина ; я ++ ) {
вар OBJ знак равно sparkData [ i ] ;
вар crunchifyName ;
вар crunchifyValue ;
за ( вар ключ в объект ) {
crunchifyName знак равно ключ ;
crunchifyValue знак равно объект [ ключ ] . toString ( ) ;
crunchifyValue знак равно crunchifyValue . субстрат ( 1 ) ;
crunchifyValue знак равно crunchifyValue . подстрока ( 0 ,
crunchifyValue . длина — 1 ) ;
вар N знак равно crunchifyValue . сплит ( , ) ;
консоль. log ( n ) ;
$ ( # + crunchifyName ) . спарклайн ( n , {
тип : «линия» ,
ширина : '80' ,
Цвет заливки : '#eeeeee'
} ) ;
}
}
}
вар intervalId знак равно 0 ;
intervalId знак равно setInterval ( crunchifySparkline , 3000 ) ;
< / head >
< тело >
< div align = center >
<Бр> <Бр> $ { message } <Бр> <Бр>
< div id = result > < / div >
<Бр>
<Бр> Спарклайн Один : & NBSP; & NBSP; & NBSP; & NBSP; < span id = one > . < / span >
<Бр>
<Бр> Sparkline Two : & NBSP; & NBSP; & NBSP; & NBSP; < span id = two > . < / span >
<Бр>
<Бр> Спарклайн Три : & NBSP; & NBSP; & NBSP; & NBSP; < span id = three > . < / span >
<Бр>
<Бр> <Бр> <Бр>
< div
style = font-family: verdana; line-height: 25px; отступ: 5px 10px; border-radius: 10px; border: 3px solid # EE872A; ширина: 50%; размер шрифта: 12px; >
Спарклайн . Пример js, который принимает значение JSONArray каждые 3 секунд по
< а href = 'https://crunchify.com' > Crunchify < / a > . Нажмите < а
href = 'https://crunchify.com/category/java-tutorials/' > здесь < / a >
за вся Java , Spring MVC , Примеры веб- разработки . <Бр>
< / div >
< / div >
< / body >
< / html >
|
Другой должен прочитать:
- Простой пример Java Enum
- Пример Java MailAPI — отправка электронной почты через SMTP GMail
- Что такое Daemon Thread в Java? Пример прилагается
Шаг 4
Оформить заказ на эту структуру каталогов.
Шаг 5
Повторно развернуть CrunchifySpringMVCTutorial проект в сервер Apache Tomcat снова.
- Идти к
ServerВкладка в Затмении - Нажмите на
Clean... - Нажмите на
Publish - Нажмите на
Restart
Шаг 6
Откройте веб-браузер и перейдите по этому URL, чтобы увидеть результат: http: // localhost: 8080 / CrunchifySpringMVCTutorial / sparkline.html
Как проверить результат и проверить полный поток?
Шаг 1
Следите за своим результатом. Он должен быть таким же, как вы видите в верхней части этой страницы .
Шаг 2
Проверьте выход консоли Eclipse . Вы будете видеть консольный журнал с данными каждые 3 секунды. Это означает, что контроллер Spring MVC отправляет данные на страницу JSP каждые 3 секунды.
Шаг 3
Проверьте консоль браузера, чтобы увидеть живые данные.
- Щелкните правой кнопкой мыши на странице, чтобы выбрать
Inspect Element - Выбрать
consoleтабуляция
0.00 (0%) 0 votes
