第六天 - 用 Yancy 制作一个列表

在这些近代,世界上有数十亿人,圣诞老人需要一个现代化的系统来跟踪他的淘气又好看的名单。幸运的圣诞老人,现代 Perl 有一个现代的 web 框架,Mojolicious

第1步:构建列表

首先,我们需要一个数据库模式。圣诞老人只需要知道某人是否顽皮或好,所以我们的架构非常简单。我们将通过使用 Mojo::SQLite 连接到 SQLite 数据库并使用 Mojo::SQLite 迁移从我们脚本的DATA部分加载我们的数据库模式来启动我们的 Mojolicious::Lite 应用程序:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
use v5.28;
use Mojolicious::Lite;
use Mojo::SQLite;

# Connect to the SQLite database and load our schema from the
# '@@ migrations' section, below
my $db = Mojo::SQLite->new( 'sqlite:thelist.db' );
$db->auto_migrate(1)->migrations->from_data();

# Start the app. Must be the last code of the script.
app->start;

__DATA__
@@ migrations
-- 1 up
CREATE TABLE the_list (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name VARCHAR NOT NULL,
address VARCHAR NOT NULL,
is_nice BOOLEAN DEFAULT FALSE,
is_delivered BOOLEAN DEFAULT FALSE
);

创建我们的架构后,我们可以添加 Yancy。 Yancy是一个简单的 CMS,用于编辑内容和简化数据驱动的网站开发。我们将告诉 Yancy 阅读我们的数据库架构以进行自我配置,但我们也会给它一些提示,以便更轻松地编辑内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Configure Yancy
plugin Yancy => {
backend => { sqlite => $db },
# Read the schema configuration from the database
read_schema => 1,
collections => {
the_list => {
# Show these columns in the Yancy editor
'x-list-columns' => [qw( name address is_nice is_delivered )],
properties => {
# `id` is auto-increment, so hide it when creating rows
id => { readOnly => 1 },
},
},
},
};

如果我们运行我们的应用程序(perl myapp.pl daemon)并转到 http://127.0.0.1:3000/yancy,我们可以编辑列表数据。

img

现在,圣诞老人的数据输入精灵开始为宇宙中的所有人输入数据!

img

第2步:查看列表

通过我们的数据输入Neptunians努力工作,我们可以构建一种查看列表的方法。有了四个臂,它们可以以两倍的速度输入数据!

img

Yancy带有控制器,只需配置路径并创建要渲染的模板,即可轻松列出我们的数据。首先我们配置路由以使用 Yancy::Controller::Yancy list 方法:

1
2
3
4
5
6
7
8
9
10
# Display the naughty rows of the list
get '/', {
controller => 'yancy',
action => 'list',
template => 'the_list',
collection => 'the_list',
filter => {
is_nice => 0,
},
}, 'the_list.list';

现在我们构建我们的模板。 Yancy 带有一个 Bootstrap 4,我们可以使用它来制作漂亮的名称和地址列表。

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
@@ layouts/default.html.ep
<head>
<script src="/yancy/jquery.js"></script>
<link rel="stylesheet" href="/yancy/bootstrap.css">
</head>
<body>
<main class="container">
%= content
</main>
</body>

@@ the_list.html.ep
% layout 'default';
<h1>Naughty List</h1>
<ul class="list-group">
% for my $item ( @$items ) {
<li class="list-group-item d-flex justify-content-between">
<div>
%= $item->{name}
<br/>
%= $item->{address}
</div>
% end
</li>
% }
</ul>

第3步:完成交付

圣诞老人是一个忙碌的机器人,所有的军械都很贵。一旦他完成交付,他需要将其标记为完成,以便他可以继续前往所有其他值得的人。

img

停止手动检查人员确实减慢了谋杀和混乱。

Yancy可以轻松更新数据,这次使用 Yancy::Controller::Yancy中的“set”操作

1
2
3
4
5
6
7
8
# Set the delivered state of a list row
post '/deliver/:id', {
controller => 'yancy',
action => 'set',
collection => 'the_list',
properties => [qw( is_delivered )],
forward_to => 'the_list.list',
}, 'the_list.deliver';

配置路由后,我们需要向模板添加表单。我们将使用 Mojolicious 的 form_for 助手。表单将为每一行显示“是/否”切换按钮。 Yancy 默认是安全的,因此我们需要确保我们的表单包含 CSRF 令牌(使用 csrf_field 助手程序)以防止跨站点请求。

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
@@ the_list.html.ep
% layout 'default';
<h1>Naughty List</h1>
<ul class="list-group">
% for my $item ( @$items ) {
<li class="list-group-item d-flex justify-content-between">
<div>
%= $item->{name}
<br/>
%= $item->{address}
</div>
%= form_for 'the_list.deliver', $item, begin
Delivered:
%= csrf_field
% my $delivered = $item->{is_delivered};
<div class="btn-group btn-group-toggle">
<label class="btn btn-xs <%= $delivered ? 'btn-success active' : 'btn-outline-success' %>">
<input type="radio" name="is_delivered" value="true" <%== $delivered ? 'checked' : '' %>> Yes
</label>
<label class="btn btn-xs <%= $delivered ? 'btn-outline-danger' : 'btn-danger active' %>">
<input type="radio" name="is_delivered" value="false" <%== $delivered ? '' : 'checked' %>> No
</label>
</div>
% end
</li>
% }
</ul>

我们将在最后添加一些 jQuery(使用 javascript 助手),以便在更改值时自动提交表单。

1
2
3
4
5
6
%= javascript begin
// Automatically submit the form when an input changes
$( 'form input' ).change( function ( e ) {
$(this).parents("form").submit();
} );
% end

现在我们的 webapp 看起来像这样:

img

我们可以查看整个列表,并检查我们已经交付的人员!在这里查看整个应用程序

img

另一个成功的圣诞节,由 Mojolicious 提供动力!