Блог

    Caché (Кашэ́) — промышленная высокопроизводительная, объектная система управления базами данных, интегрированная с технологией разработки веб-приложений. Единая архитектура данных Caché позволяет разработчикам использовать одновременно объектный, реляционный (SQL) и прямой (NoSQL) доступ к одним и тем же данным, хранение которых обеспечивается ориентированным на транзакции многомерным ядром СУБД.

    http://www.intersystems.ru/cache/

Последние записи


Теги

Информация

$(REST - CSP - (-HyperEvents) + EasyUI + File Upload). Часть 1

добавлено: 08 июл 15
понравилось:0
просмотров: 1070
комментов: 0

теги:

Автор: servit

В данном цикле статей будут рассмотрены следующие вопросы:

  • создание веб-приложения на основе rest-страниц;
  • обзор некоторых инструментов для трассировки (отладки) http-запросов;
  • отказ от гиперсобытий в пользу.. гиперсобытий;
  • интеграция с jQuery File Upload;
  • конвертация json из формата {id:1,parentId:1} в формат {id:1,children[{}] для визуализации дерева;
  • интеграция с jQuery EasyUI (на примере datagrid и tree);
  • другие.
Введение

Как известно, СУБД Caché предоставляет сразу несколько технологий для создания веб-приложений (не только серверной, но и клиентской части):

С версии 2014.1 появилась поддержка концепции REST. Именно её мы и будем рассматривать в качестве основы для построения нашего rest-приложения.
Что же это нам даст по сравнению с прочими способами?

1) лаконичный и более безопасный адрес: имя страницы CSP или класса CLS не будет светиться в адресной строке.

То есть, вместо

hттp://server[:port]/xxx/yyy.(csp/cls/zen)

будет

hттp://server[:port]/xxx/

2) удобство разработки, разделение клиентской части от серверной, распределение логики на множество классов, благодаря новому элементу Map в карте путей;
3) полный контроль над форматом запросов и ответов: заголовки, тело, формат сообщений, "чистота" генерируемого html, обработка ошибок и т.д.;
4) как следствие - минимизация трафика, повышение быстродействия и масштабируемости;
5) низкий порог входа для веб-разработчика, незнакомого с Cache, поскольку в основе используется хорошо знакомый ему стек технологий (html/css/javascript) и фреймворков, в совокупности с продвинутыми инструментами по их написанию и отладке.

Давайте создадим нашу первую rest-страничку, но сначала подготовим всё необходимое:
Примечание:
Все примеры рассчитаны на версию Caché 2015.2 и выше.
1) в Портале создайте новое веб-приложение с именем /rest и укажите наш класс диспетчеризации:

Картинка с другого сайта.

2) скачайте последние версии

Примечание:
Всё нужное для примеров уже есть в файле проекта в конце статьи (в самой последней части).
3) установите скачанные файлы в каталог для статики для нашего веб-приложения /rest, а ещё лучше в каталог broker, чтобы сразу все веб-приложения их могли использовать;
Примечание:
Чтобы в Портале поменять каталог, временно очистьте поле для класса диспетчеризации.
4) подправьте очепятки в ресурсном файле easyui-lang-ru.js

Итак, создайте следующий класс:
Class my.rest Extends %CSP.REST
{

XData UrlMap [ XMLNamespace "http://www.intersystems.com/urlmap" ]
{
<
Routes>
</
Routes>
}

}
Примечание:
Чтобы работал подсказчик кода, обязательно указывайте XMLNamespace для блоков XData.
"Но ведь это пока нисколько не веб-приложение" скажете вы и будете почти правы.
Добавим немного магиикода:
Class my.rest Extends %CSP.REST
{

Parameter CHARSET = "UTF-8";

XData UrlMap [ XMLNamespace "http://www.intersystems.com/urlmap" ]
{
<
Routes>
  <
Route Url="/" Method="GET" Call="MainPage"/>
</
Routes>
}

ClassMethod MainPage() As %Status
{
  
%response.ContentType="text/html"

  
&html<
  
<!DOCTYPE html>
  <
html>
    <
head>
      <
meta charset="#(..#CHARSET)#">
      <
meta http-equiv="X-UA-Compatible" content="IE=edge"/>
      <
meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1, user-scalable=no"/>
      <
style type="text/css">
      
*{
        
font-size:8pt;
        
font-family:'MS Sans Serif','Arial',sans-serif,arial;
        
/*padding:0;
        margin:0;*/
      
}
      
</style>
  <
title>Главная страница</title>
    </
head>
    <
body>
      <
button onclick="alert('Привет');">Нажми меня</button>
    </
body>
  </
html>
>
  
q $$$OK
}
}
Теперь по адресу

hттp://localhost:57772/rest/

открывается наша первая rest-страничка.
Поскольку это уже немного приложение, то нам понадобятся сессии, поэтому добавим в класс
Parameter UseSession As Integer = 1;
В противном случае каждый запрос будет выполняться в новой сессии.
Также переопределим параметр CONTENTTYPE, поскольку чаще мы будем работать с форматом JSON, чем c HTML или JS/XML/TEXT/..
Parameter CONTENTTYPE = {..#CONTENTTYPEJSON};
В противном случае нужно будет часто указывать
  %response.ContentType=..#CONTENTTYPEJSON
Ок. Немного усложним нашу страничку загрузкой статики:
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1, user-scalable=no"/>
  <!--
 Вот это мы добавили -->
  <
link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
  <
link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
  <
script type="text/javascript" src="easyui/jquery.min.js"></script>
  <
script type="text/javascript" src="easyui/jquery.json.min.js"></script>
  <
script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  <
script type="text/javascript" src="easyui/locale/easyui-lang-#(%session.Language)#.js"></script>

  <
script type="text/javascript" src="easyui/js/vendor/jquery.ui.widget.js"></script>
  <
script type="text/javascript" src="easyui/js/jquery.iframe-transport.js"></script>
  <
script type="text/javascript" src="easyui/js/jquery.fileupload.js"></script>
  <!--
 конец добавления -->
  <
style type="text/css">
Скомпилируем класс, обновим страничку и увидим, что наша статика не загрузилась (выдаётся код ошибки 404, то есть "Not Found"/"Не найдено")
Предваряя вопрос "А я никакой ошибки и кода 404 не вижу", перейдём к трассировке http.

Трассировка HTTP

Рассмотрим следующие три способа:

1) утилита cURL (документация на русском)

Полный список параметров можно увидеть, запустив

curl -h

Возможные примеры запуска

a) curl -v -X GET hттp://localhost:57772/rest

Здесь мы вызываем нашу страничку с методом GET и показом доп. информации в виде заголовков запроса и ответа
Примечание:
Всё, что в начале предваряется знаком ">" - это заголовок запроса, знаком "<" - заголовок ответа.
b) curl -v -X OPTIONS hттp://localhost:57772/rest/

Здесь мы смотрим доступные методы вызова для указанного пути. В данном случае это будут GET и OPTIONS.

c) curl -v -X POST -H "Content-Type:application/json; charset=UTF-8" --data-binary @test.txt hттp://localhost:57772/rest/blablabla

Здесь мы отправляем содержимое файла test.txt методом POST с передачей нужного заголовка на указанный адрес.
Примечание:
Больше примеров запуска можно найти в классе REST.DocServer в области SAMPLES.
2) Трассировка HTTP в CSP-Шлюзе

Здесь всё просто:

a) заходим на страницу управления CSP-Шлюзом: hттp://localhost:57772/csp/bin/Systems/Module.cxw;
b) затем в меню "Просмотр HTTP-трассировки";

Картинка с другого сайта.

c) включаем трассировку и начинаем выполнять наши запросы.
Вверху отображается заголовок и тело запроса, внизу - ответа. Для перехода между ними (особенно когда они большие) можно воспользоваться соответствующими ссылками.

Картинка с другого сайта.

3) встроенные в браузер средства разработчика. Я покажу на примере IE11.

a) включаем средства разработчика (F12);
b) переходим в раздел "Сеть";
с) включаем сбор статистики;
d) выполняем наши запросы (обновляем страницу, вызываем гиперсобытия, обычные ajax-запросы и т.д.);
e) останавливаем сбор статистики;
f) смотрим результаты: двойным кликом по запросу переходим в ПОДРОБНОСТИ, где доступны заголовки и тексты запросов/ответов, куки и др.

Картинка с другого сайта.

В следующей части мы, наконец, разберёмся со статикой и не только ..

Комментарии




Необходимо войти на сайт, чтобы оставлять комментарии