Category: it

УЧЕБНО-МЕТОДИЧЕСКОЕ

Что же, в каком-то смысле в этом году я променял блог на иную форму самиздата. И прошло всё в этом отношении, на мой взгляд, эффективно.

Встречайте на сайте библиотеки РУТ (МИИТ):

1. СОСТАВЛЕНИЕ ОТЧЁТНОЙ ДОКУМЕНТАЦИИ ПО РЕШЁННЫМ
ЗАДАЧАМ АЛГОРИТМИЗАЦИИ И ПРОГРАММИРОВАНИЯ


2. ПОЛУЧЕНИЕ ПЕРВИЧНЫХ ПРОФЕССИОНАЛЬНЫХ
УМЕНИЙ И НАВЫКОВ НАУЧНО-ИССЛЕДОВАТЕЛЬСКОЙ ДЕЯТЕЛЬНОСТИ


3. ДИСПЕТЧЕРСКАЯ ЦЕНТРАЛИЗАЦИЯ МОСКОВСКОГО МЕТРОПОЛИТЕНА

4. ПРОЕКТИРОВАНИЕ ТИПОВОЙ ИНФОРМАЦИОННОЙ СИСТЕМЫ УПРАВЛЕНИЯ С ИСПОЛЬЗОВАНИЕМ ТЕХНОЛОГИИ WEB-ПРОГРАММИРОВАНИЯ НА БАЗЕ ФРЕЙМВОРКА VUE.JS

Годовой план изданий учебно-методической литературы выполнен на все 100%.

LABVIEW. ЗАГОТОВКА GUI И КОДА ВП -УМНЫЙ КАЛЬКУЛЯТОР-

В качестве первого приближения к созданию виртуального прибора (ВП) "Умный калькулятор" рассмотрим один из его возможных графических пользовательских интерфейсов (ГПИ / GUI). Для понимания принципов наращивания (масштабирования) структуры виртуального прибора "Умный калькулятор" достаточно рассмотреть всего три операции. Каждой операции ставится в соответствие логический контроллер – кнопка. Так на передней панели должны быть размещены три кнопки, которые назовём слева направо "Один", "Два" и "Три", соответственно. В таком случае подразумевается вывод на численный индикатор "Ответ" по нажатии "своей", заранее определённой кнопки, целочисленной константы: либо "1", либо "2", либо "3", соответственно.

Стоит отметить, что для большинства вариантов данной работы требуется использование операндов для выполнения над ними определённых операций. Под каждый операнд выделяется свой собственный численный контроллер. Заготовка интерфейса, представленная на следующем рисунке, содержит все вышеуказанные элементы, однако, в рассматриваемом примере "Операнд 1" и "Операнд 2" использованы не будут.

0001 (276x130, 7Kb)
Пример графического пользовательского интерфейса виртуального прибора "Умный калькулятор" с двумя входными операндами, тремя операциями и одним индикатором с численным результатом

При таком наборе интерфейсных элементов управления блок-диаграмма будет содержать в себе те же компоненты, что представлены на следующем рисунке. Помимо них к заготовке добавлена CASE-структура. Заметим, что для большей компактности размещения элементов на блок-диаграмме при использовании инструмента позиционирования / изменения размера / выбора ("Position / Size / Select") наименования этих элементов размещены слева от них.

0002 (548x306, 5Kb)
Заготовка блок-диаграммы для последующей настройки рассматриваемого примера

Итого в заготовке использованы элементы из следующих функциональных разделов:

- численные функции;
- логические функции;
- структуры.

Рассмотрение численных и логических функций уже затрагивалось в более ранних работах, связанных с "National Instruments LabView", а вот структуры ранее не использовались. Рассмотрим их расположение в перечне функций, доступных для размещения на блок-диаграмме (см. рисунок ниже).

0003 (160x406, 14Kb)
Маркировка раздела структур в перечне функций, размещаемых на блок-диаграмме

Вход в раздел структур сопровождается выводом на экран окна, содержащего все существующие в "National Instruments LabView" структуры (их не много), которые при чтении слева направо следующие (см. рисунок далее):

- структура последовательности ("Sequence Structure");
- CASE-структура ("Case Structure");
- структура цикла "For" ("For Loop");
- структура цикла "While" ("While Loop");
- узел-формула ("Formula Node");
- структура событий ("Event Structure");
- глобальная переменная ("Global Variable");
- локальная переменная ("Local Variable").

0004 (196x182, 7Kb)
Содержимое раздела структур блок-диаграммы с маркировкой CASE-структуры ("Case Structure")

CASE-структура может быть использована в логическом режиме (к знаку вопроса слева подключается связь логического типа), в таком случае её работа аналогична работе условного оператора. Также CASE-структура может быть использована в численном режиме (к знаку вопроса слева подключается связь целочисленного типа), и в таком случае структура работает как оператор переключения ("switch" на языке "Microsoft Visual C#").

LABVIEW. ИСПОЛЬЗОВАНИЕ БЛОКА ОБЪЕДИНЁННОЙ АРИФМЕТИКИ

Объединённая арифметика - функция, относящаяся одновременно к двум разделам: числовому и логическому. Функция объединяет в себе следующие операции: сложения, умножения, логического сложения ("ИЛИ"), логического умножения ("И"), исключающего "ИЛИ". На рисунке далее показано расположение объединённой арифметики в разделе численных функций, размещаемых на блок-диаграмме.

0001 (324x354, 13Kb)
Место расположения функции объединённой арифметики ("Compound Arithmetic") в разделе численных ("Numeric") функций, размещаемых на блок-диаграмме

При размещении объединённой арифметики на блок-диаграмме по умолчанию доступно только два входа, а также выбрана операция сложения. Для изменения количества входов необходимо выбрать среди инструментов элемент позиционирования / изменения размерности / выбора ("Position / Size / Select") и, ухватившись за нижнюю границу размещённой на блок-диаграмме функции, вытянуть её вниз на нужное количество входов. Для изменения выполняемой операции функцией объединённой арифметики необходимо вызвать контекстное меню этой функции нажатием на неё правой кнопкой мыши и далее в пункте изменения режима ("Change Mode") выбрать нужную операцию. В рамках решаемой задачи объединённая арифметика используется в режиме логического умножения ("AND"). Смена режима объединённой арифметики показана на следующем рисунке.

0002 (248x284, 5Kb)
Замена операции в рамках функции объединённой арифметики с численного сложения "+" ("Add") на логическое умножение "И" ("AND")

С целью сокращения количества применяемых логических элементов на блок-диаграмме можно воспользоваться одной из полезных настроек функции объединённой арифметики. В контекстном меню функции объединённой арифметики присутствует возможность инвертирования ("Invert") полученного результата. Так, например, в решаемой задаче может быть эффективно использована операция отрицания логического умножения ("И-НЕ"). Такая операция доступна посредством размещения на блок-диаграмме одного единственного, но особым образом настроенного блока функции объединённой арифметики. Настройка инверсии логического умножения представлена на следующем рисунке.

0003 (184x208, 3Kb)
Изменение режима применяемой операции логического умножения с прямой "И" на инверсную "И-НЕ" ("Invert AND")

По итогам изучения основ настройки функции объединённой арифметики, а также численных и логических элементов, входящих в состав пакета прикладных программ National Instruments LabView, можно переходить непосредственно к созданию заготовки для виртуального прибора "Умный калькулятор".

LABVIEW. СТАНДАРТНЫЕ МАТЕМАТИЧЕСКИЕ ФУНКЦИИ И КОНСТАНТЫ

Раздел числовых элементов содержит следующие графические функции, подразделы и константы, изображённые на рисунке, представленном ниже (чтение ведётся слева направо, сверху вниз):

- операция сложения ("Add");
- операция вычитания ("Subtract");
- операция умножения ("Multiply");
- операция деления ("Divide");
- операции целочисленного деления и получения остатка от деления ("Quotient & Remainder");
- подраздел конвертации ("Conversion");
- операция инкрементирования / добавления единицы ("Increment");
- операция декрементирования / вычитания единицы ("Decrement");
- операция суммирования элементов массива ("Add Array Elements");
- операция перемножения элементов массива ("Multiply Array Elements");
- элемент, объединяющий арифметические операции ("Compound Arithmetic");
- подраздел тригонометрии ("Trigonometric");
- операция взятия абсолютной величины / модуля ("Absolute Value");
- операция математического округления до ближайшего целого ("Round To Nearest");
- операция округления в меньшую сторону ("Round To -Infinity");
- операция округления в большую сторону ("Round To +Infinity");
- операция выдачи реализации псевдослучайной величины ("Random Number (0-1)");
- подраздел логарифмов ("Logarithmic");
- операция взятия квадратного корня ("Square Root");
- операция инверсии / взятия значения с обратным знаком ("Negate");
- операция масштабирования по степени двойки / умножение на "2" в степени "N" ("Scale By Power Of 2");
- операция сигнум (определения знака): пришло любое положительное – в ответе "1", пришло любое отрицательное – в ответе "-1", пришёл ноль – в ответе "0" ("Sign");
- операция обращения / деления единицы на заданное значение ("Reciprocal");
- подраздел операций над комплексными числами ("Complex");
- численная константа ("Numeric Constant");
- перечислимая константа ("Enum Constant");
- константа списка значений ("Ring Constant");
- узел математических выражений ("Expression Node");
- подраздел дополнительных констант ("Additional Numeric Constants").

0001 (244x237, 5Kb)
Раздел численных ("Numeric") функций на блок-диаграмме

Далее рассмотрен подраздел тригонометрических функций (см. рисунок, представленный ниже):

- синус ("Sine");
- косинус ("Cosine");
- тангенс ("Tangent");
- арксинус ("Inverse Sine");
- арккосинус ("Inverse Cosine");
- арктангенс ("Inverse Tangent");
- гиперболический синус ("Hyperbolic Sine");
- гиперболический косинус ("Hyperbolic Cosine");
- гиперболический тангенс ("Hyperbolic Tangent");
- гиперболический арксинус ("Inverse Hyperbolic Sine");
- гиперболический арккосинус ("Inverse Hyperbolic Cosine");
- гиперболический арктангенс ("Inverse Hyperbolic Tangent");
- косеканс ("Cosecant");
- секанс ("Secant");
- котангенс ("Cotangent");
- объединённый блок синуса и косинуса ("Sine & Cosine");
- арктангенс двух аргументов ("Inverse Tangent (2 Input)");
- функция отсчётов ("Sinc").

0002 (241x165, 4Kb)
Подраздел тригонометрических ("Trigonometric") функций раздела численных ("Numeric") функций на блок-диаграмме

Далее рассмотрен подраздел логарифмических функций (см. рисунок, представленный ниже):

- экспонента ("Exponential");
- степень десяти ("Power Of 10");
- степень двойки ("Power Of 2");
- возведение "X" в степень "Y" ("Power Of X");
- экспонента, проходящая через начало координат ("Exponential (Arg) – 1");
- натуральный логарифм ("Natural Logarithm");
- логарифм по основанию десяти ("Logarithm Base 10");
- логарифм по основанию двойки ("Logarithm Base 2");
- логарифм по основанию "X" ("Logarithm Base X");
- натуральный логарифм, проходящий через начало координат ("Natural Logarithm (Arg + 1)").

0003 (205x123, 2Kb)
Подраздел логарифмических ("Logarithmic") функций раздела численных ("Numeric") функций на блок-диаграмме

Далее рассмотрен подраздел дополнительных численных констант (см. рисунок, представленный ниже):

- цветовая константа ("Color Box Constant");
- символьная константа списка значений для интерфейсного элемента "список" ("Listbox Symbol Ring Constant");
- константа списка ошибок ("Error Ring Constant");
- Пифагорова константа ("Pi");
- Пифагорова константа, умноженная на два ("Pi Multiplied By 2");
- Пифагорова константа, делённая на два ("Pi Divided By 2");
- обращённая Пифагорова константа ("Reciprocal Of Pi");
- натуральный логарифм Пифагоровой константы ("Natural Logarithm Of Pi");
- минус бесконечность ("Negative Infinity");
- основание натурального логарифма ("Natural Logarithm Base");
- обращённое основание натурального логарифма ("Reciprocal Of e");
- логарифм экспоненты по основанию десяти ("Base 10 Logarithm Of e");
- натуральный логарифм десяти ("Natural Logarithm Of 10");
- натуральный логарифм двойки ("Natural Logarithm Of 2");
- плюс бесконечность ("Positive Infinity");
- постоянная Планка ("Planck Constant (J/Hz)");
- элементарный заряд ("Elementary Charge (C)");
- скорость света в вакууме ("Speed Of Light In Vacuum (m/sec)");
- гравитационная постоянная ("Gravitational Constant (N m2/kg2)");
- постоянная Авогадро ("Avogadro Constant (1/mol)");
- Постоянная Ридберга ("Rydberg Constant (/m)");
- молярная газовая постоянная ("Molar Gas Constant (J / (mol K))").

0004 (300x254, 8Kb)
Подраздел дополнительных численных констант ("Additional Numeric Constants") раздела численных ("Numeric") функций на блок-диаграмме

LABVIEW. ПРИМЕР ВЫРАВНИВАНИЯ ШКАЛ ТЕРМОМЕТРОВ ПО УРОВНЮ

Для понимания содержания этой публикации очень важно ознакомиться с предыдущей частью раздела, посвящённого National Instruments LabView. Ищите по тегу "labview" в этом блоге, в частности, под публикацией.

Рассмотрим задачу градуировки виртуального термометра. Переместим значение входного, управляющего воздействия к нижнему уровню (к нижней границе). Хорошо видно, что на втором термометре при этом получено значение, равное "100". Достигнута в точности верхняя граница (верхний уровень). Это обстоятельство является, своего рода, везением и ничего менять здесь не требуется.


0001 (307x208, 10Kb)
Проверка нижнего уровня диапазона по активному параметру – прибор не зашкаливает. Это совпадение. Случайность, что не потребовалось вносить какие-либо изменения

Теперь рассмотрим поведение системы при достижении входным, управляющим сигналом верхней границы. Хорошо видно, что на втором (зелёном) термометре остался участок шкалы, который никогда не будет достигнут при заданном диапазоне входного сигнала. Так нам удалось обнаружить наличие избыточности. Избыточность необходимо устранить (не всегда, но в этом случае точно).

0002 (304x208, 10Kb)
Проверка верхнего уровня диапазона по активному параметру – прибор обладает избыточностью по шкале

Выполненная корректировка гарантирует отсутствие зашкаливания, а также предоставляет неизбыточность проводимых измерений.

0003 (307x211, 10Kb)
Настроено соответствие шкал. Иначе: выполнена градуировка виртуального прибора

Для особо пытливых инженерных умов в National Instruments LabView присутствует возможность настройки заполнителя шкалы ("Fill Options"). Потому, если настроить заполнение к максимуму ("Fill To Maximum"), показанное на рисунке ниже...

0004 (544x453, 21Kb)
Для настройки соответствия уровней заполнения при обратно пропорциональной зависимости в контекстном меню выбрана иная настройка заполняемости ("Fill Options")

... можно получить в каком-то смысле идентичные по заполнителю термометры, объединённые обратной пропорциональной зависимостью.

0005 (307x214, 10Kb)
Результат полноценной градуировки шкал элементов виртуального прибора

LABVIEW. ОЗНАКОМЛЕНИЕ С ПОЛЬЗОВАТЕЛЬСКИМ ИНТЕРФЕЙСОМ

Помнится, как-то давно я уже начинал ветку публикаций про пакет прикладных программ (или среду разработки виртуальных приборов - это как угодно) National Instruments LabView. Как начал, так и забросил. Но теперь, когда методических материалов с приличной структуризацией набралось уже немало, я решил их опубликовать с новым запалом, с новой энергетикой. К тому же, они уже прошли обкатку на студентах и мало-мальски, всё же, по итогам проделанной работы можно сделать вывод о том, что LabView они знают и понимают.

Возможно, кому-то из НЕ студенчества этот материал тоже пригодится. Выдавать его планирую максимально дозировано. Что это означает? - Это означает лишь то, что в отдельных публикациях здесь будет хранится материал, который в методических указаниях к отдельным работам хранится совместно и неразрывно. Зачем это нужно? - Ну, поймите меня правильно - блог должен жить. А живой блог - это не тот, в котором в один прекрасный день сразу появилась сотня записей, а тот, в котором записи появляются регулярно, день за днём и в разумном количестве. Соответственно, у меня есть некоторый материал, которого хватит на "-цать" дней, и в те печальные моменты, когда публиковать по существу развития метрополитена и мегаполиса мне станет, вдруг, нечего, я всё равно смогу что-то публиковать. Звучит странно, но остаётся фактом.

У меня в наличии есть ссылки на National Instruments LabView 6.1, а также на National Instruments LabView 2016. Обе "ломанные", то есть с "таблетками", то есть "с лекарствами от жадности", обе проверенные, обкатанные, без вирусов. Обе хранятся на аккаунтах "Яндекс.Диск" и "Google Drive", однако в открытый доступ я их сбрасывать не стану, чтобы не нарваться на возможные проблемы удаления этих файлов по жалобам недобросовестных пользователей и хейтеров. Если вам нужны эти ссылки - пишите заявки в комментариях. Рассмотрю кандидатуры, предметно пообщаемся.

Итак, поехали рассматривать материал последовательно, начиная с малого. За опорную версию при рассмотрении беру 6.1. По представленным в разделе материалам у студентов получается работать и в более современных версиях среды, так что в качестве базы это абсолютно нормальное явление. Ну тут, и в ходе повествования, я могу себе позволять некоторые вольности, сленг, философствование и прочее, чего не могу позволить при рассмотрении методик в публикуемых университетом Учебно-методических указаниях.

После запуска исполняемого файла пакета прикладных программ National Instruments LabView 6.1 открывается (если настройками не предусмотрено иного) диалоговое окно, в котором можно:

- приступить к созданию нового виртуального прибора;
- продолжить разработку ранее созданного виртуального прибора;
- приступить к изучению материалов и примеров, позволяющих быстро начать работу с пакетом прикладных программ National Instruments LabView 6.1.

0001 (597x307, 27Kb)
Начальное диалоговое окно National Instruments LabView 6.1

Для начала работ по созданию нового виртуального прибора необходимо нажать на кнопку "New VI". Сокращение "VI" в данном случае является обозначением самого виртуального прибора ("Virtual Instrument" в англоязычной литературе, "Виртуальный Прибор" – в русскоязычной литературе). Выбор данного режима автоматически генерирует две рабочих области, каждая из которых имеет собственное устойчивое наименование. Как правило, сверху расположена передняя панель ("Front Panel") – графический пользовательский интерфейс виртуального прибора, под ней – блок-диаграмма кода ("Block Diagram"). Область передней панели нового виртуального прибора показана на рисунке.

0002 (700x388, 47Kb)
Область передней панели нового виртуального прибора National Instruments LabView 6.1

Для перехода от передней панели к блок-диаграмме опытные пользователи применяют сочетание клавиш "Ctrl" + "E", менее опытные – используют переход через меню "Window > Show Diagram", как это показано на рисунке.

0003 (700x410, 80Kb)
Переход к блок-диаграмме через пункт меню

На рисунке показана область блок-диаграммы нового виртуального прибора.

0004 (700x388, 67Kb)
Область блок-диаграммы нового виртуального прибора National Instruments LabView 6.1

К ВОПРОСУ ПРО ВОЗРАСТ (ACCESS SQL)

Поскольку в последнее время участилась отчётность, связанная с указанием возраста преподавателей (я правда не понимаю, почему инстанции Университета направляют на кафедры запросы о возрастах, в то время как существует централизованная база данных РУТ, откуда я и сам утаскиваю дни рождения сотрудников в свою локальную базу), то поднимаю данную тематику. Бессмысленная и беспощадная бумажная работа.

В общем, вынудили меня (косвенно) привести в порядок запрос на подсчёт разницы дат. Оно от лукавого, то есть от лени: надоедает каждый раз проверять так оно или не так в базе запросами посчитано? Помнил, ведь, что не так, потому как поленился сделать в своё время всё как следует.

И я публикую этот запрос здесь исключительно для того, чтобы не потерять, а не дабы похвастаться каким-то инновационным решением, которое таковым, кстати, и не является вовсе. Это типовая инженерная задача базового курса программирования, правда при использовании языка структурированных запросов она решается не столь же просто и очевидно из-за громоздкости применяемых в ней конструкций. Всё же, SQL заставляет под другим углом думать по сравнению-то с тем же C#.

Исходно у меня был такой нехитрый запрос из серии "начхать на +/- год":

SELECT [ФИО], DATEDIFF("yyyy",Преподаватели.Год_рождения,DATE())-1 AS Возраст_в_годах
FROM Преподаватели;

Сейчас контроль стал более строгим, потому "начхать" уже становится себе дороже. Дополнил логикой, что если день рождения преподавателя к настоящему моменту ещё не случился, то вычитать из полученной разницы по годам один дополнительный год (декрементирование результата), а если день рождения случился, то просто брать разницу рассматриваемых годов.

Логика не хитрая, но время на отладку у меня отняла. В самом "Access" со скобками стабильно путался и без помощи "Notepad++" не обошлось. И тут же прошу прощения за отсутствие в запросах конечного форматирования согласно правилам вежливости программиста. В рамках HTML это проблематично и тоже отнимает время. Хочется потратить его на что-то более полезное, чем вежливость.

SELECT [ФИО],
IIF( Month(Преподаватели.Год_рождения) > Month(Date()),
DATEDIFF("yyyy",Преподаватели.Год_рождения, Date())-1,
IIF ( Month(Преподаватели.Год_рождения) = Month(Date()) AND Day(Преподаватели.Год_рождения) > Day(Date()),
DATEDIFF("yyyy",Преподаватели.Год_рождения, Date())-1,
DATEDIFF("yyyy",Преподаватели.Год_рождения, Date())
)
) AS Возраст_в_годах
FROM Преподаватели;

ДЕЛАЕМ ПРОГРАММИРОВАНИЕ СО VUE.JS УДОБНЕЕ И ПРИЯТНЕЕ

Именно в этот самый момент, пока мы ещё не очень далеко продвинулись (а сам я продвинулся за время, пока не было публикаций про "Vue.js", достаточно далеко), хочется прервать прямое повествование про сам фреймворк, а порекомендовать вам очень полезное для разработчиков программное обеспечение, против которого я, кстати, очень долго сопротивлялся, но теперь понимаю, что сопротивлялся неоправданно.

Речь в публикации пойдёт о расширенном блокноте "Notepad++". Помнится, я в самом начале серии всех публикаций в направлении своей новой деятельности, связанной со "Vue.js", говорил, что у меня на компьютере предустановлен очень удобный и нашпигованный по последнему слову техники "Total Commander". Если не помните такого, то перечитайте - всё рядом (https://www.liveinternet.ru/users/flash_a/post434539131/).

Так вот расширенный "Total Commander" меня снова выручил, поскольку в него для редактирования текстовых файлов по клавише "F4" встроен не обычный блокнот ("Notepad.exe"), а блокнот второго поколения ("..\Soft\Notepad2\Notepad.exe"). Да, если открыть диалоговое окно конфигурации файлового менеджера, то там прописан следующий страшный путь: "%commander_path%\Soft\Notepad2\Notepad.exe" (Рисунок 1). Собственно, хорошо видно, что это плагин (специальная подключаемая подпрограмма, адаптированная под "Total Commander").

0001 (572x458, 45Kb)
Рисунок 1 - Подключённый "Notepad2" в "Total Commander TechAdmin"

Collapse )

АВТОМАТИЗИРУЕМ СОСТАВЛЕНИЕ СПИСКОВ С VUE.JS. ПРИМЕРЫ

Если что-то из нижеследующего вам, ну, совершенно не понятно откуда взялось, то стоит прочитать предыдущую публикацию по данной тематике здесь: https://www.liveinternet.ru/users/flash_a/post437914082/. Заодно скачать обучающие примеры оттуда же будет не лишним.

На следующем шаге изучения фреймворка "Vue.js" мы разберём составление списков, поскольку сами по себе списки предполагают использование циклических конструкций. И это ещё далеко не высший пилотаж, но уже что-то посложнее вывода простого сообщения с приветствием.

Помимо циклических конструкций здесь нам предстоит разобраться и с другими важными элементами программирования:

- массивами;
- записями;
- форматом текстовой базы данных "json";
- тегами, отвечающими за списочные структуры.

Начнём с самого простого и интуитивно понятного из этого перечня. Если вспомните тот же Microsoft Office Word, то списки в нём бывают как нумерованными, таки и маркированными.

Нумерованные списки используются там, где важно отразить приоритет упоминаемых элементов, их последовательность или количество; маркированные же списки - это все остальные наборы данных.

У наших элементов в примерах, конечно же будут порядковые номера, поскольку они являются элементами базы данных, которые должны отличаться друг от друга хоть чем-то уникальным, потому, пускай имеет место искусственный уникальный идентификатор. Впрочем, об этом позже. Не в данной публикации уж точно. Пока мы считаем, что совершенно незнакомы с какой-либо базой данных. Забыли. Никакой базы данных нет и в помине.

Для примера составим маркированный список. Сначала вручную, чтобы освежить в памяти HTML (или же продолжить его изучение). Зная, как прописываются списки вручную, позже в красках можно будет понять и всю прелесть использования возможностей фреймворка "Vue.js".

За основу всё равно берём составленную ранее страничку "index.html" (из предыдущей публикации). Да, она будет изменена до неузнаваемости, но не придётся повторно прописывать базовые конструкции, обуславливающие гипертекстовую разметку в текстовом файле. Вместе с тем у нас уже будет подключен модуль "Vue.js".

Итак, создадим сначала маркированный список, содержащий первое сообщение (message1). Заменим теги абзаца/параграфа (р) на теги маркированного списка (ul), а также заключим первое сообщение в теги элемента списка (li).

0001 (624x452, 14Kb)
Пример кода для составления списка, состоящего из одного элемента

Collapse )

ФРЕЙМВОРК VUE.JS. С ЧЕГО НАЧАТЬ. РАБОЧИЙ ПРИМЕР

Сразу ввожу одно очень важное определение, процитировав первую же ссылку в Яндексе: "Фреймворк - программная платформа, определяющая структуру программной системы; программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта."

По долгу службы я начал разбираться с JavaScript'ом и фреймворком "Vue.js". Таковой мне порекомендовали. Хочется сразу отметить, что самое толковое, что есть в отношении этого фреймворка - это основная документация, официальное руководство от производителя. У меня был (да и остаётся не заданным) ряд вопросов к авторам различных статей на «Хабре» (https://habr.com/) из серии "как?", "что?" "откуда?", "почему так?" Метался из стороны в сторону, от статьи к статье, и спустя время всё равно приходил на страницы основной документации и находил там правильные ответы на свои вопросы.

Да, признаюсь, первое прочтение не дало, ровным счётом, ничего, но как только появлялись конкретные задачи - находились и решения к ним.

Поэтому первое, что мне хочется выделить и сохранить здесь - это ссылку на официальное руководство "Vue.js".

https://ru.vuejs.org/v2/guide/

Без него просто никуда.

Таким образом, имеется вполне конкретная цель: разобраться с "Vue.js". А на вопрос "зачем?" отвечают поставленные мною самим и моими коллегами задачи:

- предоставить результат конвертации данных из локальной базы в серверную в удобной форме для анализа приёмочной комиссией;
- следовательно: разработать графический пользовательский интерфейс для демонстрации с использованием передовых Интернет-технологий;
- следовательно: выбрать перспективный фреймворк на замену "Flex";
- следовательно: изучить объектную модель выбранного перспективного фреймворка;
- следовательно: перейти от строк таблиц базы данных к экземплярам классов, хранимым в оперативной памяти;
- следовательно: подобрать нужные структуры (деревья / таблицы / поля) и настроить фильтры для приемлемой демонстрации сведений, необходимых для анализа приёмочной комиссией.

Такое, как видите, получается классическое решение задачи, позиционируемой на этапе анализа предметной области согласно спиральной модели жизненного цикла любого программного обеспечения.

Специфика разработчика: я являюсь специалистом, которого в вузе пять лет учили создавать только толстые клиентские приложения. Очень лениво мне сейчас в красках рассказывать, что такое толстый клиент, но раз это обучающая статья, то это необходимо сделать. Буду краток. Толстый клиент - это программное обеспечение, размещаемое на рабочем компьютере конечного пользователя, которое решает не только задачи отображения информации в удобной форме, но и само проводит какие-то расчёты, причём не обязательно сопрягается с базой данных для хранения результатов и исходных данных. Входная и выходная информация толстых клиентов может храниться всего навсего в текстовых файлах и этого достаточно. Тот проект, над которым я работал во время написания кандидатской диссертации, тоже являлся толстым клиентским приложением. И это такой качественный, надёжный и самодостаточный толстый клиент.

Когда же я устроился на работу ведущим программистом, совмещая эту деятельность с преподавательской, вот тут-то понеслось всё самое интересное. Мир оказался куда многограннее. Современность требовала создания тонких клиентов (программного обеспечения для отображения информации, отправки запросов и приёма результатов запросов), а также мудрых серверных приложений. Шаг сродни принятию научным сообществом, что Земля не плоская, а круглая (до перехода к эллиптической форме предстоял ещё один шаг). Все сразу захотели, чтобы я чётко разделял задачи клиента, задачи сервера и задачи, связанные напрямую с базой данных (многоуровневые, вложенные SQL-запросы).

Всё, что долгое время для меня было единым целым, неделимым, распалось на фрагменты мозаики. Потребовалось более тщательное планирование и увязка фрагментов между собой. Это особая вещь, которая заставляет совершенно под другим углом смотреть на программирование. Вот и перешли от круга к эллипсу.

Но попал я тогда в своего рода райские условия, где имелась настроенная уже инфраструктура, существовала целая куча программных продуктов, которые исправно работали, и в них нужно было лишь разобраться. На готовых примерах разбираться - идеально.

С новой же задачей ситуация иная: инфраструктура та же самая, знакомая, но вот примеров, работающих должным образом, оказалось в сети как-то очень мало.

Да, энтузиасты решили какие-то свои, частные задачи, но они являются, преимущественно, задачами построения типовых сайтов, а не задачами организации специфической информационно-управляющей системы. Поэтому копался я, копался, а всё равно вернулся к официальному руководству, к разделу с примерами:

https://ru.vuejs.org/v2/examples/

И это, опять же, дало мне куда больший рывок, чем все те статьи на "Хабре", которые были прочитаны. И если раньше я считал "Хабр" за классную IT-площадку, то теперь меня "Хабр", откровенно, бесит, потому что в моём нынешнем представлении действительности - это сборище хвастунов, которые не нацелены научить своих читателей. Они просто показывают там, какие они молодцы, что они что-то сделали, они разобрались. Вернее, не так. Все они, априори, считают, что все их читатели, без исключения, знакомы с азами передовой разработки веб-приложений на языке JavaScript.

То есть, давайте мельком взглянем, с чего же начинается большинство статей по веб-разработке на "Хабре"? Например, просто типовая статья без оглядки на конкретное приложение / примочку:

"Выполните следующие шаги, чтобы установить [примочку] и начать работу с ней.

• Создайте директорию для вашего проекта. С точки зрения сервера эта директория будет корневой.
• Откройте эту директорию через терминал.
• Теперь скачайте и установите [примочку]. Аргумент -g указывает npm на то, что пакет следует скачивать в основную папку для хранения пакетов, а не в текущую директорию.

• $ npm install -g grunt-cli"

npm install, npm install, npm install…

Весь "Хабр" пестрит этим. Но реально нет там такой статьи, где тебе расскажут специфику от нулевой отметки о том, что, да откуда берётся? То есть по каким-то другим, постановочным статьям на "Хабре" ещё можно понять, что под терминалом понимается, на самом деле, консоль, а под консолью, в свою очередь, понимается "Командная строка" операционной системы, которая вызывается либо через "Пуск > Все программы > Стандартные > Командная строка", либо просто нажимается "Пуск" и в строке поиска прописываются три заветные буквы "cmd", которые подтверждаются нажатием на клавишу "Enter".

Но даже если ты нашёл определение терминала и попытался ввести упомянутую конструкцию "npm install", то всё равно ничего не получится, потому что автор не потрудился сказать, что когда-то давно он установил на свой компьютер программное обеспечение "Node.js", который позволяет ему устанавливать все примочки для проектов без особого труда.

Да, я нашёл ответы на эти вопросы и скачал себе "Node.js". Да, у меня заработали команды "npm install". Но вы думаете это помогло мне постичь данный дзен? Естественно нет. Это была дорога, которая лишь вывела меня на свет, на вершину горы, но к обрыву. А дальше-то что? Идти некуда. И вернулся я к истокам.

Но если считаете, что понимаете авторов и всю нитку повествования с этими всякими "npm", то следует скачать первым делом "Node.js" (https://nodejs.org/en/), ибо без него машина не просто не тронется с места, она даже не заведётся.

Далее я бился над проблемой поиска IDE (среда разработки приложений). Без IDE как без рук. И я спорил, спорил, спорил с коллегами о том, что все эти фреймворки, которые они рекомендуют, конечно, дело хорошее, но вот с наличием среды разработки для их использования какая-то информационная пропасть. Но то было мышление программиста, работавшего долгое время с толстыми клиентскими приложениями... А в споре, как известно, рождается истина. И мне дали понять, что я бьюсь головой об стену в поисках IDE одним простым вопросом:

- А зачем тебе IDE?
- Как же? А кто всё это безобразие компилировать будет? – Возразил я.
- Это же JavaScript, он, по сути, компилируется браузером. Можно писать код хоть в блокноте.

Один простой вопрос - одно простое решение. Можно писать в блокноте... Да и нужно, собственно, писать в блокноте, чтобы изучать и чувствовать всю специфику языка и технологии.

И, конечно, как только я сел и тупо скопировал простейший пример "Vue.js" в блокнот, то он у меня, не поверите, заработал.

Не сразу, естественно, ибо есть специфика на сайте - там всё поделено на рубрики:

- результат (Result);
- гипертекстовая разметка (HTML);
- скрипт, программный сценарий (Script);
- настройка стилевого оформления (CSS).

Если понимаешь, как взаимно увязать фрагменты этой мозаики - всё будет работать.

Collapse )