Symfony UX Turbo 教程

Symfony UX Turbo 教程

ux-turboHotwire Turbo integration for Symfony项目地址:https://gitcode.com/gh_mirrors/ux/ux-turbo

1、项目介绍

Symfony UX Turbo 是一个 Symfony 框架的扩展包，它集成了 Hotwire Turbo 库，使得在 Symfony 应用中实现单页应用（SPA）的用户体验变得简单。Symfony UX Turbo 是 Symfony UX 倡议的一部分，旨在提供现代的、高性能的前端体验。

2、项目快速启动

安装

首先，确保你已经安装了 Symfony 项目。然后，使用 Composer 安装 Symfony UX Turbo：

composer require symfony/ux-turbo

配置

在你的 Symfony 项目中，更新 assets/controllers.json 文件，添加 Turbo 控制器：

{
    "controllers": {
        "@symfony/ux-turbo": {
            "turbo-stream": {
                "enabled": true,
                "webpackMode": "eager"
            }
        }
    },
    "entry": {
        "controllers": "assets/controllers.js"
    }
}

使用

在你的 JavaScript 文件中引入 Turbo：

import { Turbo } from '@symfony/ux-turbo';

document.addEventListener('turbo:load', () => {
    console.log('Turbo is loaded!');
});

3、应用案例和最佳实践

实时聊天应用

Symfony UX Turbo 可以用于构建实时聊天应用。以下是一个简单的示例：

1. 创建聊天控制器：

// src/Controller/ChatController.php
namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class ChatController extends AbstractController
{
    /**
     * @Route("/chat", name="chat")
     */
    public function index(): Response
    {
        return $this->render('chat/index.html.twig');
    }
}

2. 创建聊天视图：

{# templates/chat/index.html.twig #}
<div id="chat">
    <h1>Chat Room</h1>
    <div id="messages"></div>
    <form id="message-form">
        <input type="text" id="message-input" placeholder="Type your message here...">
        <button type="submit">Send</button>
    </form>
</div>

3. 处理表单提交：

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('message-form');
    form.addEventListener('submit', (event) => {
        event.preventDefault();
        const input = document.getElementById('message-input');
        const message = input.value;
        input.value = '';

        fetch('/chat/send', {
            method: 'POST',
            body: JSON.stringify({ message })
        }).then(() => {
            const messages = document.getElementById('messages');
            const newMessage = document.createElement('div');
            newMessage.textContent = message;
            messages.appendChild(newMessage);
        });
    });
});

4、典型生态项目

Symfony Mercure

Symfony Mercure 是一个实时消息传递系统，与 Symfony UX Turbo 结合使用，可以实现实时更新用户界面。Mercure 允许你广播 DOM 变化给所有当前连接的用户，非常适合实时聊天、通知等应用场景。

API Platform

API Platform 是一个强大的 API 框架，与 Symfony UX Turbo 结合使用，可以构建现代的、响应式的 Web 应用。API Platform 提供了丰富的功能，如自动生成 API 文档、数据验证和序列化等。

通过这些生态项目的结合，你可以构建出功能强大、用户体验优秀的 Web 应用。

ux-turboHotwire Turbo integration for Symfony项目地址:https://gitcode.com/gh_mirrors/ux/ux-turbo