Генерация HTML меню на perl

@mark74 · Регистрация: 13.06.2019

Студворк — интернет-сервис помощи студентам

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

Вот Mojolicious::Lite подходящий инструмент для прототипов. И входит в стандартный набор модулей perl. Так что можно прямо здесь по результатам обсуждения нарисовать пример реализации.

@ft4l · 03.09.2019, 13:17

Когда вижу Mojolicious , представляю себе не Lite

как http://koorchik.blogspot.com/2... -lite.html
github.com/koorchik/FastNotes-Proto
Шаблоны, MVC, использование шаблонов в шаблонах.

Не по теме:

Не понял только почему rel_dir не сработало, поменял там где

Perl
1
dsn      => 'dbi:SQLite:dbname=' . $self->home->rel_dir('storage') . '/fastnotes.db',

в остальном ещё рабртает :)

Сообщение от mark74

как может быть реализовано html-меню

Что то кроме данных для меню уже имеется, меню должно меняться клиентом/сервером взависимости от запроса ?

Не по теме:

Просто интересуюсь. Насчёт готового решения вряд ли смогу помочь :)

@mark74 · 04.09.2019, 07:26 **[ТС]**

разница между Mojolicious и Mojolicious::Lite
1. в структуре

В Mojolicious::Lite в одном файле находится всё.
Даже другие статические файлы можно интегрировать в файл программы.

2. в глобальных функциях Mojolicious::Lite, которые соответствуют методам Mojolicious

Например, app, get, helper. Предполагается, если не ошибаюсь, что в полном фреймворке эти методы могут быть переопределены.

Так что, это нормальный инструмент моделирования. Реально, всё очень просто. Мы пишем в основном то, что касается предмета нашего интереса, а веб сервер получаем автоматически. Просто запускаем нашу программу с параметром daemon и она начинает слушать порт на локальном IP.

Вот примерчик:

Кликните здесь для просмотра всего текста

Perl
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
use Mojolicious::Lite;
my $mlist = {
    index => "Главная страница",
    chart => "График успеваемости",
};
app->helper(mlist => sub {$mlist});
#get '/' => sub {shift->render} => 'index';
get '/' => 'index';
get '/chart';
app->start;
 
 
__DATA__
 
@@ index.html.ep
 
<!DOCTYPE html>
<html>
<head>
<title><%= $c->app->moniker %></title>
<meta charset="utf-8" />
%= stylesheet 'style.css'
</head>
<body class="colored">
%= include 'menu'
<h1><%= current_route %></h1>
</body>
</html>
 
 
@@ chart.html.ep
 
<!DOCTYPE html>
<html>
<head>
<title><%= $c->app->moniker %></title>
<meta charset="utf-8" />
%= stylesheet 'style.css'
</head>
<body class="dimmed">
%= include 'menu'
<h1><%= current_route %></h1>
</body>
</html>
 
 
@@ menu.html.ep
<div class="menu">
% for my $k (keys %{mlist()}) {
    <div <%== 'class="active"' if $k eq current_route %>>
        <a href="<%= url_for($k)->to_abs %>"><%= mlist->{$k} %></a>
    </div>
% }
</div>
 
 
@@ style.css
body {color:#fff}
body.colored {background:#113}
body.dimmed {background:#222}
.menu a {
    color:inherit;
    text-decoration:none;
}
.menu {
    background:#24a;
    text-align:center;
}
.menu div {
    display:run-in;
    padding:1em .5em;
    margin:auto;
}
.active {background:#a24}

Тут структура данных неудачная. Порядок пунктов меню не определен, так как это не массив.

Второй возможный косяк, это %= include. Меню должно быть иерархическим. То есть как-то рекурсивно должно генерироваться.

Как там что хранится в БД или в JSON - не важно. Лучше со структурой данных определиться и сделать пример генерации по-нагляднее.

Логика, мне кажется, сводится к следующему:

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

@ft4l · 07.09.2019, 17:55

Одним файлом не не так разноцветно :)

./public/*

./public/style.css

CSS
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
body {color:#fff;background:#777}
body.colored {background:#113}
body.dimmed {background:#222}
.menu a {
    color:inherit;
    text-decoration:none;
}
.menu {
    background:#24a;
    text-align:center;
}
.menu div {
    display:run-in;
    padding:1em .5em;
    margin:auto;
}
.active {background:#a24}
 
#navL   { min-height:2em; margin:0; padding:0;}
#navL * {  margin:0; padding:0; list-style-type:none;}
#navL >li   { display:inline-block; float: left; top:0;}
#navL li >ul    { position:absolute; display:none;}
#navL li:hover >ul  { display:block;}
#navL a, #navL u    { display:block; border:solid 1pt #AAA;
    padding:3pt 1ex; margin:1pt;
    text-decoration:none; color:#EEE; border-radius: 3pt;
    min-width: 5em; max-width: 9em; text-align:center;
}
#navL a:hover, #navL u:hover    { color:#FFF;}
#navL ul ul {left:+100%;top:-0em; }
 
header, #navL a, #navL u    { background:url(data:image/gif;base64,R0lGODlhAQAgAMQGAAAAAAgICBAQEBgYGCAgICgoKDAwMDg4OEBAQEhISFBQUFhYWGBgYGhoaHBwcHh4eICAgIiIiJCQkJiYmKCgoKioqLCwsLi4uMDAwMjIyNDQ0NjY2ODg4Ojo6PDw8Pj4+CwAAAAAAQAgAAAFGaAhHgiSKMrCMI3jPBAUSdJEUZVlXRiWaSEAOw==) 0/contain repeat-x;
}

./public/js/script.js

JavaScript
1
2
3
/*
    code
*/

./*

./app.conf

Perl
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
# app.conf (it's just Perl returning a hash)
{
title => {
    ''=>'Сайт',
    'chart'=>'Успеваемость',
    'info'=>'Инфо',
},
acts => {
    'proj'=>'Проект',
    'server'=>'Сервер',
    'client'=>'client',
    'perl'=>'Perl',
    'misc'=>'Разное',
    'links'=>'Ссылки',
    'copy'=>'Права',
    'team'=>'Авторы',
},
 
menu => [
    [1, 'На главную',  '/', []],
    [5, 'Успеваемость', '/chart', []],
    [10, 'Документы',  '', [
        [0, 'style.css', '/style.css', []],
        [0, 'script.js', '/js/script.js', []],
        ]],
    [15, 'Информация',    '', [
        [0, 'Проект', '/info/proj', [
            [0, 'Сервер', '/info/server', []],
            [0, 'Клиент', '/info/client', []],
            [0, 'Perl модуль', '/info/perl', []],
            [0, 'Другое', '/info/misc', []],
            ]],
        [0, 'Сторонние модули', '/info/links', []],
        [0, 'Лицензия', '/info/copy', []],
        [0, 'Авторы', '/info/team', []],
        ]],
],
 
music_dir => app->home->child('music')
 
};

./app.pl

Perl
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
88
89
90
91
92
93
94
95
96
97
98
99
100
use Mojolicious::Lite;
my $config = plugin 'Config';
 
get '/' => sub {
    shift->render(
        template    => 'index'
    );
};
get '/chart' => sub {
    shift->render(
        template    => 'chart'
    );
};
get '/info/:id' => sub {
    my $c = shift;
    my $id =  $c->param('id');
    $c->render(
        template    => 'info',
        id  => $id,
        title => $config->{title}->{info}
            .'::'. $config->{acts}->{$id}
    );
};
 
app->start;
 
__DATA__
 
@@ menu.html.ep
%   my $label = begin
%   my ($label, $item) = @_;
        <li>
        %==     ($item->[2] ne '')? '<a href="'.$item->[2].'">'.$item->[1].'</a>': '<u>'.$item->[1].'</u>';
%       if  (defined $item->[3]->[0]){
        <ul>
%           for my $val ( @{$item->[3]} ) {
%=              $label->($label,  $val);
%           }   
        </ul>
%       }
        </li>
%   end
%#======================================================
    <ul id="navL">
% for my $val ( @{config->{menu}} ) {
%=      $label->($label,  $val);
% }
    </ul>
 
@@ layouts/default.html.ep
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title><%= $title %></title>
    %= stylesheet '/style.css'
    %= javascript '/js/script.js'
</head>
<body class="<%= $b_class//'' %>">
    <%== content %>
</body>
</html>
 
@@ info.html.ep
% layout 'default', b_class=>'other', title=>$title;
%= include 'menu'
        <h1><%= current_route %></h1>
<pre>
        current_route="<%= current_route %>"
        id="<%= $id %>"
        title="<%= $title %>"
</pre>
        <div>
            This page was generated from the template
            "@@ info.html.ep".
        </div>
 
@@ chart.html.ep
% layout 'default', b_class=>'colored', title=>config->{title}->{'chart'};
%= include 'menu'
        <h1><%= current_route %></h1>
<pre>
        current_route="<%= current_route %>"
<h2>app</h2>
<%= dumper app->%* %><hr/>
        <div>
            This page was generated from the template
            "templates/chart.html.ep".
        </div>
</pre>
 
@@ index.html.ep
% layout 'default', b_class=>'dimmed', title=>config->{title}->{''};
%= include 'menu'
        <h1><%= current_route %></h1>
        current_route="<%= current_route %>"
        <div>
            This page was generated from the template
            "templates/index.html.ep".
        </div>

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

Знаю только что такой css не будет работать в IE-6, насчёт остальных браузеров не знаю
и в CSS не очень разбараюсь, сделано методом "тыка"

Не слишком оптимизировал, просто набросок

Добавлено через 1 час 43 минуты
Изначально делал так

в той же папке

@@ menu.html.ep в ./app_1.pl

Perl
1
2
3
4
5
6
7
8
9
    <ul id="navL">
% my $tmp = 0;
% for ( config->{menu}->@* ) {
        %== ($_->[0] < $tmp)? '</li>'.('</ul></li>' x ($tmp - $_->[0])).$/: ($tmp)? (($_->[0] > $tmp)? '<ul>':'</li>'): '';
        %== '<li>'. (($_->[1] eq '')? '<u>'.$_->[2].'</u>': '<a href="'. $_->[1] .'">'. $_->[2] .'</a>');
%       $tmp = $_->[0];
% }
        %== (1 < $tmp)? '</li>'.('</ul></li>' x ($tmp - 1)): '</li>';
    </ul>

./app_1.conf

Perl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
menu => [
    [1, '/', 'Site'],
    [1, '/chart', 'Chart или не Chart или Chart Chart Chart'],
    [1, '', 'Документы'],
    [2, '/style.css', 'style.css'],
    [2, '/script.js', 'script.js'],
    [1, '', 'Обо всём'],
    [2, '/info:1', 'Project'],
    [3, '/info-a', 'Autors'],
    [4, '/info-a-1', 'Autor 1: first name second name third name'],
    [4, '/info-a-2', 'Autor 2'],
    [4, '/info-a-3', 'Autor 3'],
    [2, '/info_3', 'Licenze and etc'],
],
 
music_dir => app->home->child('music')
 
};

не так читабельно :) , но работало

@mark74 · 09.09.2019, 11:39 **[ТС]**

сама идея хранить данные меню в конфиге Mojo-приложения
это вариант!

кстати, в строке
config->{menu}->@*
что за синтаксис?
я бы записал так:
@{config->{menu}}

@ft4l · 09.09.2019, 13:52

Сообщение от mark74

я бы записал так

+1 Так будет даже лучше :) для переносимости
из perlref

Postfix Dereference Syntax

Beginning in v5.20.0, a postfix syntax for using references is available. It behaves as described in "Using References", but instead of a prefixed sigil, a postfixed sigil-and-star is used.

For example:

Perl
1
2
3
4
5
$r = @a;
@b = $r->@*; # equivalent to @$r or @{ $r }
 
$r = [ 1, [ 2, 3 ], 4 ];
$r->[1]->@*;  # equivalent to @{ $r->[1] }

In Perl 5.20 and 5.22, this syntax must be enabled with use feature 'postderef'. As of Perl 5.24, no feature declarations are required to make it available.

Postfix dereference should work in all circumstances where block (circumfix) dereference worked, and should be entirely equivalent. This syntax allows dereferencing to be written and read entirely left-to-right. The following equivalencies are defined:

Perl
1
2
3
4
5
6
$sref->$*;  # same as  ${ $sref }
$aref->@*;  # same as  @{ $aref }
$aref->$#*; # same as $#{ $aref }
$href->%*;  # same as  %{ $href }
$cref->&*;  # same as  &{ $cref }
$gref->**;  # same as  *{ $gref }

Note especially that $cref->&* is not equivalent to $cref->(), and can serve different purposes.

Glob elements can be extracted through the postfix dereferencing feature:

Perl
1
$gref->*{SCALAR}; # same as *{ $gref }{SCALAR}

Postfix array and scalar dereferencing can be used in interpolating strings (double quotes or the qq operator), but only if the postderef_qq feature is enabled.

@bidstrup · 10.09.2019, 12:14

Не по теме:

Postfix Dereference Syntax смотрится убого. На мой взгляд.
И без того перегруженная стрелка -> ( pointer dereference(1); вызов метода обекта(2) )
опять перегрузилась.

@bidstrup · 11.09.2019, 14:02

И, собственно, какой смысл по 500-му разу обсуждать Mojolicious,
когда на данный момент имеется совершенно необсуждённый Cro ?

Кликните здесь для просмотра всего текста

Cro is a set of libraries for building reactive distributed systems, lovingly crafted to take advantage of all Perl 6 has to offer. The high level APIs make the easy things easy, and the asynchronous pipeline concept at Cro's heart makes the hard things possible.

Perl
1
2
3
4
5
6
7
8
9
10
11
use Cro::HTTP::Router;
use Cro::HTTP::Server;
my $application = route {
    get -> 'greet', $name {
        content 'text/plain', "Hello, $name!";
    }
}
my Cro::Service $hello = Cro::HTTP::Server.new:
    :host<localhost>, :port<10000>, :$application;
$hello.start;
react whenever signal(SIGINT) { $hello.stop; exit; }

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@mark74 52 / 37 / 9 Регистрация: 13.06.2019 Сообщений: 209

	Генерация HTML меню на perl 03.09.2019, 05:07. Показов 3011. Ответов 7 Метки нет (Все метки) Давайте обсудим как может быть реализовано html-меню при динамической генерации страниц. Вот Mojolicious::Lite подходящий инструмент для прототипов. И входит в стандартный набор модулей perl. Так что можно прямо здесь по результатам обсуждения нарисовать пример реализации. 0

@mark74 52 / 37 / 9 Регистрация: 13.06.2019 Сообщений: 209
	09.09.2019, 11:39 [ТС]
	сама идея хранить данные меню в конфиге Mojo-приложения это вариант! кстати, в строке config->{menu}->@* что за синтаксис? я бы записал так: @{config->{menu}} 0

@bidstrup
	10.09.2019, 12:14
	Не по теме: Postfix Dereference Syntax смотрится убого. На мой взгляд. И без того перегруженная стрелка `->` ( pointer dereference(1); вызов метода обекта(2) ) опять перегрузилась. 0