EN | NL | 中文
开始

Learn

构建 Phlo Poll：一个真正的实时应用程序，分为八个步骤。每个步骤都以某种运行的东西结束。除了需要一个带有 Docker 的终端外，不需要任何先前知识。

1设置在本教程中，您将构建 Phlo Poll：一个小型投票应用程序，询问“哪个技术栈获胜？”。您从一个空文件夹开始，最终得到一个样式化的、多语言的、实时的投票应用。每一章都增加一层：一个 route，一个 view，CSS，数据，投票，async 更新，翻译和实时结果。在第一章中，您将安装 Phlo，编写您的第一个 route，并在浏览器中查看它。 2Views视图直接位于您的 .phlo 文件中，并编译为返回 HTML 的 PHP 方法。在本章中，您将用第一个真实的投票页面替换 hello route：一个问题和一排答案按钮。您将学习 view block、点简写、变量，以及一个每个人都会遇到的规则：空行结束视图。 3CSSPhlo 有自己紧凑的 CSS 语法：不需要分号，对于单个规则不需要大括号，并且 $variables 编译为 CSS 自定义属性。在本章中，您将为投票提供一个深色卡片布局和一个小主题，在一个专用的样式文件中。 4数据投票需要存储。Phlo 的 ORM 将表定义为类，对于一个教程应用，JSON 文件驱动程序是完美的：没有数据库服务器，没有凭据，每个表一个 JSON 文件。在本章中，您将定义模型，用选项填充它，并渲染真实记录。 5投票没有投票的投票是一个列表。在本章中，每个选项都变成一个表单，一个 POST route 接收投票，计数增加，重定向重新渲染页面。纯 HTTP，尚未使用 JavaScript：这个版本在任何浏览器中都能工作，所有功能都关闭。 6Async现在让投票变得即时。Phlo 的前端运行时拦截标记为 async 的表单和链接，在后台发送它们，并将服务器的 DOM 命令应用到页面上。无需重新加载，无需客户端状态，无需 API 层：同一路由同时响应两个世界。 7翻译Phlo 将翻译视为渲染问题：您在源语言中编写视图文本，进行标记，lang 资源在请求时提供正确的语言，并在后台翻译缺失的条目。在本章中，投票在 /nl 前缀下学习荷兰语。 8实时还有一个空白：当其他人投票时，你的标签不会移动。在最后一章中，服务器通过 phloWS 将结果推送到每个打开的浏览器，然后你将整个内容发布出去。实时部分是可选的：它需要单独的 phlo-websocket Node 服务，没有它投票也可以完成。发布部分则是必不可少的。

我们使用必要的cookie来使该网站正常工作。在您的许可下，我们还使用分析工具来改善网站。