README

Laravel SPF

将 SPF.js 集成到 Laravel 中

适用于 Laravel 5.x

Laravel SPF 包允许将 SPF.js 带到您的 Laravel 应用程序中。以下是从 SPF.js 官方文档中的描述

结构化页面片段 - 简称 SPF - 是一个轻量级的 JavaScript 框架，用于从 YouTube 进行快速导航和页面更新。

使用渐进增强和 HTML5，SPF 与您的网站集成，通过只更新在导航过程中更改的页面部分而不是整个页面，以实现更快的、更流畅的用户体验。SPF 提供了一种发送文档片段的响应格式，一个强大的脚本和样式管理系统，内存缓存，即时处理等。

演示

演示源代码

安装

使用 composer 安装

composer require kamrava/laravel-spfjs

打开您的 config/app.php 并将以下内容添加到 providers 数组中

Kamrava\Spf\SectionViewServiceProvider::class

在相同的 config/app.php 中，将以下内容添加到 aliases 数组中

'SectionView' => Kamrava\Spf\SectionViewFacade::class

运行以下命令以发布包资源文件

php artisan vendor:publish --tag=public --force

就是这样！开始构建一些酷炫且快速的 Laravel 应用程序吧！

开始使用

Blade 文件结构

如您所知，每个 HTML 页面由以下部分组成

head 用于元标签以及样式和标题等

body 用于页面主体

script 用于 JavaScript 文件

您可能使用了一些类似的结构

resources/view/admin/users-list.blade.php

文件的内容可能如下所示

@extends('layouts.master')
@section('title') Users List @stop
@section('head')
<link href="/css/style1.css" rel="stylesheet" />
<link href="/css/style2.css" rel="stylesheet" />
@stop
@section('content')
<table>
  ...
  @foreach($users as $user)
    <tr>
      <td>{{ $user->id }}</td>
      <td>{{ $user->name }}</td>
      ...
    </tr>
  @endforeach
</table>
@stop
@section('scripts')
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
@stop

对吗？好，为了在您的 Laravel 应用程序中使用 SPF.js，您需要将它们拆分为单独的文件，并将它们放入 sections 目录中，如下所示

resources/view/admin/users-list/sections/_title.blade.php
resources/view/admin/users-list/sections/_head.blade.php
resources/view/admin/users-list/sections/_body.blade.php
resources/view/admin/users-list/sections/_foot.blade.php

然后将每个部分内容放入相关的 blade 文件中。例如，head.blade.php 的内容必须是

<link href="/css/style1.css" rel="stylesheet" />
<link href="/css/style2.css" rel="stylesheet" />

其他部分以此类推。

现在，我们必须将它们合并成两个单独的文件！一个用于 SPF 未能启用的原因，另一个用于 SPF 已启用的原因

首先是 index.blade.php，它位于：（当 SPF.js 未启用时）

resources/view/admin/users-list/index.blade.php

内容如下

@extends('layouts.master')
@section('title')
  @include('admin.users-list.sections._title')
@endsection
@section('head')
  @include('admin.users-list.sections._head')
@endsection
@section('content')
  @include('admin.users-list.sections._body')
@endsection
@section('scripts')
  @include('admin.users-list.sections._foot')
@endsection

以及 spf_json.blade.php，它位于：（当 SPF.js 已启用时）

resources/view/admin/users-list/spf_json.blade.php

内容如下

{
  "title": "{!! $section->title !!}",
  "head": "{!! $section->head !!}",
  "body": {
    "main-content": "{!! $section->body !!}"
    },
  "foot": "{!! $section->foot !!}"
}

上面的代码中的 main-content 表示我们在 body 标签中有一个 id 为 main-content 的 div

太好了，让我们看看我们的主页面，它可能位于这里

resources/view/layouts/master.blade.php

内容如下

<html>
<head>
   @include('layouts.head')
   @yield('head')
</head>
<body>
   @include('layouts.header')
   	<div id="main-content">
   	   @yield('content')
 	</div>
   @include('layouts.scripts')
   @yield('scripts')
</body>
</html>

发送请求

SPF 不会自动更改您的网站导航，而是使用渐进增强来启用某些链接的动态导航。只需将 spf-link 类添加到标签中即可激活 SPF。

<!-- Link enabled: a SPF request will be sent -->
<a class="spf-link" href="/Admin/UsersList">Show Users List</a>

返回响应

在动态导航中，只发送片段，使用 JSON 作为传输。当 SPF 向服务器发送请求时，它会在 URL 中附加一个可配置的标识符，以便您的服务器可以正确处理请求。（默认情况下，这将是一 ?spf=navigate）

AdminController.php

use SectionView;

class AdminController extends Controller
{
    public function showUsersList(Request $request)
    {
      $users = User::all();
      if($request->input('spf') == 'navigate') {
        return SectionView::from('admin.users-list')->with(['users' => $users])->render();
      }
      return view('admin.users-list.index', compact('users'));
    }
}

最后，不要忘记在您的母页面的脚本部分加载资产文件！

<script type="text/javascript" src="{{ asset('vendor/laravel-spf/js/laravel-spf.js') }}"></script>

嘣！完成了！

浏览器支持

要使用动态导航，SPF 需要HTML5历史API。这被所有当前浏览器广泛支持，包括 Chrome 5+、Firefox 4+ 和 IE 10+。

致谢

维护者

[Hamed Kamrava](https://github.com/kamrava
...

许可证

MIT 许可证（MIT）。请参阅许可证文件以获取更多信息。

kamrava / laravel-spfjs

维护者

详细信息

README

Laravel SPF

安装

开始使用

浏览器支持

致谢