- Introducción
- Crear y renderizar vistas
- Pasar datos a las vistas
- Compositores de vistas
- Optimización de vistas
#Introducción
Por supuesto, no es práctico devolver cadenas completas de documentos HTML directamente desde sus rutas y controladores. Afortunadamente, las vistas proporcionan una forma conveniente de colocar todo nuestro HTML en archivos separados.
Las vistas separan la lógica de su controlador / aplicación de la lógica de presentación y se almacenan en el directorio resources/views. Al usar Laravel, las plantillas de vistas generalmente se escriben usando el lenguaje de plantillas Blade. Una vista simple podría verse así:
<!-- Vista almacenada en resources/views/greeting.blade.php -->
<html>
<body>
<h1>Hello, {{ $name }}</h1>
</body>
</html>
Dado que esta vista se almacena en resources/views/greeting.blade.php, podemos devolverla usando el helper global view así:
Route::get('/', function () {
return view('greeting', ['name' => 'James']);
});
¿Busca más información sobre cómo escribir plantillas Blade? Consulte la documentación completa de Blade para comenzar.
#Escribir vistas en React / Vue
En lugar de escribir sus plantillas frontend en PHP mediante Blade, muchos desarrolladores han comenzado a preferir escribir sus plantillas usando React o Vue. Laravel facilita esto gracias a Inertia, una biblioteca que hace muy sencillo conectar su frontend en React / Vue con su backend Laravel sin las complejidades típicas de construir una SPA.
Nuestros starter kits Breeze y Jetstream le ofrecen un excelente punto de partida para su próxima aplicación Laravel potenciada por Inertia. Además, el Laravel Bootcamp proporciona una demostración completa de cómo construir una aplicación Laravel con Inertia, incluyendo ejemplos en Vue y React.
#Crear y renderizar vistas
Puede crear una vista colocando un archivo con la extensión .blade.php en el directorio resources/views de su aplicación o usando el comando Artisan make:view:
php artisan make:view greeting
La extensión .blade.php indica al framework que el archivo contiene una plantilla Blade. Las plantillas Blade contienen HTML así como directivas Blade que le permiten imprimir valores fácilmente, crear sentencias "if", iterar sobre datos y más.
Una vez que haya creado una vista, puede devolverla desde una de las rutas o controladores de su aplicación usando el helper global view:
Route::get('/', function () {
return view('greeting', ['name' => 'James']);
});
Las vistas también pueden devolverse usando el facade View:
use Illuminate\Support\Facades\View;
return View::make('greeting', ['name' => 'James']);
Como puede ver, el primer argumento pasado al helper view corresponde al nombre del archivo de vista en el directorio resources/views. El segundo argumento es un array de datos que deben estar disponibles para la vista. En este caso, estamos pasando la variable name, que se muestra en la vista usando la sintaxis Blade.
#Directorios anidados de vistas
Las vistas también pueden estar anidadas dentro de subdirectorios del directorio resources/views. Se puede usar la notación con "puntos" para referenciar vistas anidadas. Por ejemplo, si su vista está almacenada en resources/views/admin/profile.blade.php, puede devolverla desde una de las rutas o controladores de su aplicación así:
return view('admin.profile', $data);
Los nombres de los directorios de vistas no deben contener el carácter ..
#Crear la primera vista disponible
Usando el método first del facade View, puede crear la primera vista que exista en un array dado de vistas. Esto puede ser útil si su aplicación o paquete permite que las vistas sean personalizadas o sobrescritas:
use Illuminate\Support\Facades\View;
return View::first(['custom.admin', 'admin'], $data);
#Determinar si una vista existe
Si necesita determinar si una vista existe, puede usar el facade View. El método exists devolverá true si la vista existe:
use Illuminate\Support\Facades\View;
if (View::exists('admin.profile')) {
// ...
}
#Pasar datos a las vistas
Como vio en los ejemplos anteriores, puede pasar un array de datos a las vistas para hacer esos datos disponibles en la vista:
return view('greetings', ['name' => 'Victoria']);
Al pasar información de esta manera, los datos deben ser un array con pares clave / valor. Después de proporcionar datos a una vista, puede acceder a cada valor dentro de su vista usando las claves de los datos, como <?php echo $name; ?>.
Como alternativa a pasar un array completo de datos al helper view, puede usar el método with para agregar piezas individuales de datos a la vista. El método with devuelve una instancia del objeto vista para que pueda continuar encadenando métodos antes de devolver la vista:
return view('greeting')
->with('name', 'Victoria')
->with('occupation', 'Astronaut');
#Compartir datos con todas las vistas
Ocasionalmente, puede necesitar compartir datos con todas las vistas que se renderizan en su aplicación. Puede hacerlo usando el método share del facade View. Normalmente, debe colocar las llamadas al método share dentro del método boot de un proveedor de servicios. Puede agregarlas en la clase App\Providers\AppServiceProvider o generar un proveedor de servicios separado para alojarlas:
<?php
namespace App\Providers;
use Illuminate\Support\Facades\View;
class AppServiceProvider extends ServiceProvider
{
/**
* Registrar cualquier servicio de la aplicación.
*/
public function register(): void
{
// ...
}
/**
* Inicializar cualquier servicio de la aplicación.
*/
public function boot(): void
{
View::share('key', 'value');
}
}
#Compositores de vistas
Los compositores de vistas son callbacks o métodos de clase que se llaman cuando una vista se renderiza. Si tiene datos que desea vincular a una vista cada vez que se renderiza, un compositor de vistas puede ayudarle a organizar esa lógica en un solo lugar. Los compositores de vistas pueden ser especialmente útiles si la misma vista es devuelta por múltiples rutas o controladores dentro de su aplicación y siempre necesita un dato en particular.
Normalmente, los compositores de vistas se registran dentro de uno de los proveedores de servicios de su aplicación. En este ejemplo, asumiremos que hemos creado un nuevo App\Providers\ViewServiceProvider para alojar esta lógica.
Usaremos el método composer del facade View para registrar el compositor de vistas. Laravel no incluye un directorio predeterminado para compositores de vistas basados en clases, por lo que puede organizarlos como desee. Por ejemplo, podría crear un directorio app/View/Composers para alojar todos los compositores de vistas de su aplicación:
<?php
namespace App\Providers;
use App\View\Composers\ProfileComposer;
use Illuminate\Support\Facades;
use Illuminate\Support\ServiceProvider;
use Illuminate\View\View;
class ViewServiceProvider extends ServiceProvider
{
/**
* Registrar cualquier servicio de la aplicación.
*/
public function register(): void
{
// ...
}
/**
* Inicializar cualquier servicio de la aplicación.
*/
public function boot(): void
{
// Usando compositores basados en clases...
Facades\View::composer('profile', ProfileComposer::class);
// Usando compositores basados en closures...
Facades\View::composer('welcome', function (View $view) {
// ...
});
Facades\View::composer('dashboard', function (View $view) {
// ...
});
}
}
Recuerde, si crea un nuevo proveedor de servicios para contener sus registros de compositores de vistas, deberá agregar el proveedor de servicios al array providers en el archivo de configuración config/app.php.
Ahora que hemos registrado el compositor, el método compose de la clase App\View\Composers\ProfileComposer se ejecutará cada vez que se renderice la vista profile. Veamos un ejemplo de la clase del compositor:
<?php
namespace App\View\Composers;
use App\Repositories\UserRepository;
use Illuminate\View\View;
class ProfileComposer
{
/**
* Crear un nuevo compositor de perfil.
*/
public function __construct(
protected UserRepository $users,
) {}
/**
* Vincular datos a la vista.
*/
public function compose(View $view): void
{
$view->with('count', $this->users->count());
}
}
Como puede ver, todos los compositores de vistas se resuelven a través del contenedor de servicios, por lo que puede indicar cualquier dependencia que necesite en el constructor del compositor.
#Adjuntar un compositor a múltiples vistas
Puede adjuntar un compositor de vistas a múltiples vistas a la vez pasando un array de vistas como primer argumento al método composer:
use App\Views\Composers\MultiComposer;
use Illuminate\Support\Facades\View;
View::composer(
['profile', 'dashboard'],
MultiComposer::class
);
El método composer también acepta el carácter * como comodín, permitiéndole adjuntar un compositor a todas las vistas:
use Illuminate\Support\Facades;
use Illuminate\View\View;
Facades\View::composer('*', function (View $view) {
// ...
});
#Creadores de vistas
Los "creadores" de vistas son muy similares a los compositores de vistas; sin embargo, se ejecutan inmediatamente después de que la vista es instanciada en lugar de esperar hasta que la vista está a punto de renderizarse. Para registrar un creador de vistas, use el método creator:
use App\View\Creators\ProfileCreator;
use Illuminate\Support\Facades\View;
View::creator('profile', ProfileCreator::class);
#Optimización de vistas
Por defecto, las vistas de plantillas Blade se compilan bajo demanda. Cuando se ejecuta una solicitud que renderiza una vista, Laravel determinará si existe una versión compilada de la vista. Si el archivo existe, Laravel determinará si la vista sin compilar ha sido modificada más recientemente que la vista compilada. Si la vista compilada no existe o la vista sin compilar ha sido modificada, Laravel recompilará la vista.
Compilar vistas durante la solicitud puede tener un pequeño impacto negativo en el rendimiento, por lo que Laravel proporciona el comando Artisan view:cache para precompilar todas las vistas utilizadas por su aplicación. Para un mejor rendimiento, puede ejecutar este comando como parte de su proceso de despliegue:
php artisan view:cache
Puede usar el comando view:clear para limpiar la caché de vistas:
php artisan view:clear