Learn - Phlo

Learn

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

1设置在本教程中，您将构建 Phlo Poll：一个小型投票应用程序，询问“哪个技术栈获胜？”。您从一个空文件夹开始，最终得到一个样式化的、多语言的、实时的投票应用。每一章都增加一层：一个 route，一个 view，CSS，数据，投票，async 更新，翻译和实时结果。在第一章中，您将安装 Phlo，编写您的第一个 route，并在浏览器中查看它。 2ViewsViews live directly in your .phlo files and transpile to PHP methods that return HTML. In this chapter you replace the hello route with the first real poll page: a question and a row of answer buttons. You learn the view block, the dot shorthand, variables, and the one rule that bites everyone once: a blank line closes the view. 3CSSPhlo has its own compact CSS syntax: no semicolons, no braces required for single rules, and $variables that transpile to CSS custom properties. In this chapter you give the poll a dark card layout and a small theme, in a dedicated style file. 4数据投票需要存储。Phlo 的 ORM 将表定义为类，对于一个教程应用，JSON 文件驱动程序是完美的：没有数据库服务器，没有凭据，每个表一个 JSON 文件。在本章中，您将定义模型，用选项填充它，并渲染真实记录。 5投票没有投票的投票是一个列表。在本章中，每个选项都变成一个表单，一个 POST route 接收投票，计数增加，重定向重新渲染页面。纯 HTTP，尚未使用 JavaScript：这个版本在任何浏览器中都能工作，所有功能都关闭。 6Async现在让投票变得即时。Phlo 的前端运行时拦截标记为 async 的表单和链接，在后台发送它们，并将服务器的 DOM 命令应用到页面上。无需重新加载，无需客户端状态，无需 API 层：同一路由同时响应两个世界。 7翻译Phlo 将翻译视为渲染问题：您在源语言中编写视图文本，进行标记，lang 资源在请求时提供正确的语言，并在后台翻译缺失的条目。在本章中，投票在 /nl 前缀下学习荷兰语。 8RealtimeOne gap remains: when someone else votes, your tab does not move. In this final chapter the server pushes results to every open browser through the Phlo Daemon, and then you ship the whole thing. The realtime part is optional: it requires one small Node service that lives outside the framework, and the poll is complete without it. The shipping part is not optional.

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