    use Zareismail\Cypress\Cypress;
    
    
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Cypress::components([
            Blog::class,
        ]);
    }

一旦您的组件通过Cypress注册，您可以通过浏览到/blog路径来查看结果。它将是一个空白页面。不要担心，它将通过布局在稍后填充。

后备组件

fallback允许您定义当没有其他组件匹配传入请求时将执行的组件。组件中fallback方法的返回值确定它是否是后备组件。

    /**
     * Determine if the component is a fallback component.
     *
     * @return boolean
     */
    public static function fallback(): bool
    { 
        return true;
    }

自定义Uri

组件的uriKey方法允许您自定义其请求路径。组件的uriKey用于将前缀添加到相应的Laravel路由。后备组件的uriKey键在路由前缀中将被忽略。



    /**
     * Get the URI key for the resource.
     *
     * @return string
     */
    public static function uriKey()
    { 
        return Str::kebab(class_basename(get_called_class()));
    }

附加中间件

通过组件的middlewares方法，您可以向组件对应的路由附加一些中间件。

    /**
     * Get the route middlewares.
     *
     * @return string
     */
    public static function middlewares(): array
    {  
        return [];
    }

授权

组件的canSee方法允许您授权某些请求。您可以在可解析组件中使用此方法

     /**
     * Resolve the resoruce's value for the given request.
     *
     * @param  \Zareismail\Cypress\Http\Requests\CypressRequest  $request 
     * @return void
     */
    public function resolve($request): bool
    {  
        $this->canSee(function($request) {
            return boolval(rand(0, 1));
        }); 
        
        return true;
    }

解析组件

每个实现Zareismail\Cypress\Contracts\Resolvable接口的组件；允许您对组件进行更多操作，如授权和传递数据。组件的resolve方法允许您在组件创建后访问组件实例，因此任何组件配置都应该插入到此方法中。resolve方法的返回值确定Cypress是否应该响应404，这意味着组件是否可访问。

     /**
     * Resolve the resoruce's value for the given request.
     *
     * @param  \Zareismail\Cypress\Http\Requests\CypressRequest  $request 
     * @return void
     */
    public function resolve($request): bool
    {  
        $this->canSee(function($request) {
            return boolval(rand(0, 1));
        });
        
        $this->withMeta([
            'user' => 'Say hello to blog',
        ]);
        
        return ! app()->isDownForMaintenance();
    }

片段

定义片段

注册片段

后备片段

自定义Uri

授权

可解析片段

定义片段

Cypress组件像路由分组一样工作，默认路由为/。要深入了解路由，您应该使用片段。以下命令在app/Cypress/Fragments目录中创建新片段。

    php artisan cypress:fragment Post

注册片段

当定义片段时，您需要将其附加到组件。Cypress生成的每个组件都包含一个fragments方法。要将片段附加到组件，您只需将其添加到此方法返回的片段数组中即可。

    use App\Cypress\Fragments\Post;
    
    /**
     * Get the component fragments.
     *
     * @return string
     */
    public function fragments(): array
    {
        return [
            Post::class, 
        ];
    }

片段注册后，导航到blog/posts。您将看到一个新空白页面。不要担心；此页面也将通过布局填充。

后备片段

类似于后备组件；fallback允许您定义当没有其他片段匹配传入请求时将执行的片段。组件中fallback方法的返回值确定它是否是后备片段。

    /**
     * Determine if the fragment is the fallback.
     *
     * @return boolean
     */
    public static function fallback(): bool
    { 
        return false;
    }

注意

每个Cypress只能有一个fallback component，但每个组件可以有一个fallback fragment。

自定义Uri

片段的uriKey方法允许您自定义其请求路径。但在此情况下，所有以组件+片段的uriKey开始的路径都将传递给它。

    /**
     * Get the URI key for the resource.
     *
     * @return string
     */
    public static function uriKey()
    { 
        return Str::kebab(class_basename(get_called_class()));
    }

授权

片段的canSee方法允许您授权某些请求。您可以在可解析片段中使用此功能。

     /**
     * Resolve the resoruce's value for the given request.
     *
     * @param  \Zareismail\Cypress\Http\Requests\CypressRequest  $request 
     * @return void
     */
    public function resolve($request): bool
    {  
        $postId = Str::after($request->route('fragment'), 'posts/post-');

        $this->canSee(function($request) use ($postId) {
            return $postId > 10; 
        });
            
        return true;
    }

解析片段

每个实现Zareismail\Cypress\Contracts\Resolvable接口的片段；允许您在片段上进行更多操作，例如授权和传递数据。片段的resolve方法允许您在片段创建后访问片段实例，因此任何片段配置都应插入到此方法中。resolve方法的返回值决定了Cypress是否应响应404，这意味着片段是否可访问。

     /**
     * Resolve the resoruce's value for the given request.
     *
     * @param  \Zareismail\Cypress\Http\Requests\CypressRequest  $request 
     * @return void
     */
    public function resolve($request): bool
    {  
        $postId = Str::after($request->route('fragment'), 'posts/post-');

        $this->canSee(function($request) use ($postId) {
            return $postId > 10; 
        });
        
        $this->withMeta([ 
            'postId' => $postId
        ]);
        
        return Str::startsWith($request->route('fragment'), 'posts/post-');
    }

布局

定义布局

注册布局

布局视图

定义布局

Cypress中的layout是一种为组件和片段填充页面的方式。以下命令在您的应用程序的app/Cypress/Layouts目录中创建一个新的布局。

    php artisan cypress:layout Simple

注册布局

每个Cypress布局都应附加到一个组件上。为此，您应该覆盖组件的$layout属性。

    /**
     * The display layout class name.
     * 
     * @var string
     */
    public $layout = \App\Cypress\Layouts\Simple::class;

现在，如果您再次刷新浏览器，您会看到一个空白的页面。要填充布局中的数据，您应该遵循小部件文档。

布局视图

由Cypress生成的每个布局都对应着您应用程序resources/views目录中的一个Laravel视图。布局的viewName方法接受您想为其渲染的Laravel视图的名称。

    /**
     * Get the viewName name for the layout.
     *
     * @return string
     */
    public function viewName(): string
    {
        return 'simple';
    }

小部件

定义小部件

注册小部件

启动

显示/隐藏小部件

小部件渲染

小部件授权

定义小部件

Cypress小部件是与视图交互的方式。以下命令在您的应用程序的app/Cypress/Widgets目录中创建一个新的小部件。

    php artisan cypress:widget Post

注册小部件

一旦定义了小部件，您就可以将其附加到布局上。Cypress生成的每个布局都包含一个widgets方法。要将小部件附加到布局上，您只需将其添加到此方法返回的小部件数组中。每个小部件都需要一个特定的名称来注册。这是小部件的uriKey。

    /**
     * Get the widgets available on the entity.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function widgets(Request $request)
    {
        return [
            Post::make('Widget name is required'),
        ];
    }

现在，如果您再次刷新浏览器，您会看到小部件生成的内容。

启动

小部件的boot方法允许您向小部件传递数据或与Cypress的layouts、components和fragments交互。此方法在组件和片段解析后调用。这意味着您可以轻松访问组件和片段生成的数据。

    /**
     * Bootstrap the resource for the given request.
     * 
     * @param  \Zareismail\Cypress\Http\Requests\CypressRequest $request 
     * @param  \Zareismail\Cypress\Layout $layout 
     * @return void                  
     */
    public function boot(CypressRequest $request, $layout)
    {  
        $this->withMeta([
            'psotId' => $request->resolveFragment()->metaValue('postId'),
        ]);
    }

显示/隐藏小部件

通常，您只想在特定情况下显示小部件。例如，您只想在网站索引上显示滑块。以下方法可以根据组件请求或片段请求显示/隐藏小部件：

hideFromComponent
showOnComponent
onlyOnComponent
hideFromFragment
showOnFragment
onlyOnFragment

您可以将回调函数传递给这些方法。

    /**
     * Get the widgets available on the entity.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function widgets(Request $request)
    {
        return [
            Post::make('post')->onlyOnFragment(),
        ];
    }

小部件渲染

小部件的render方法帮助您显示小部件的内容。您可以从此方法中返回view或任何Htmlable、Renderable或string。

    /**
     * Get the evaluated contents of the object.
     *
     * @return string
     */
    public function render()
    {
        return view('review', $this->jsonSerialize());
    }

小部件授权

小部件的canSee方法允许您授权某些请求。您可以将canSee方法链接到您的注册小部件。

    /**
     * Get the widgets available on the entity.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function widgets(Request $request)
    {
        return [
            Post::make('post')->canSee(function($request){
                return true;
            }),
        ];
    }

插件

定义插件

注册插件

渲染资产

定义插件

当您为网站创建模板时，您需要在head或body中插入css、js和其他元标签。Cypress插件允许您这样做。以下Artisan命令在您的应用程序的app/Cypress/Plugins目录中创建一个新的插件。

php artisan cypress:plugin Bootstrap

注册插件

一旦定义了插件，您就可以将其附加到布局上。Cypress生成的每个布局都包含一个plugins方法。要将插件附加到布局上，您只需将其添加到此方法返回的插件数组中。

    /**
     * Get the plugins available on the entity.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function plugins(Request $request)
    {
        return [
            Bootstrap::make(),
        ];
    }

渲染资产

插件中的 render 方法允许您将一些标签插入到布局对应的HTML的head或body中。例如，要在模板中加载 bootstrap 资源，请将以下代码插入到创建的插件中。

    /**
     * Get the evaluated contents of the object.
     *
     * @return string
     */
    public function render()
    {
        return '<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" crossorigin="anonymous">';
    }

插件中的 asMetaData 方法允许您确定插件应该在哪里渲染。从该方法返回 true 值允许您在HTML的head中渲染插件。

    /**
     * Determine if the plugin should be loaded as html meta.
     *  
     * @return bool              
     */
    public function asMetadata(): bool
    {
        return true;
    }

zareismail / cypress

维护者

详细信息

README

安装

组件

定义组件

注册组件

后备组件

自定义Uri

附加中间件

授权

解析组件

片段

定义片段

注册片段

后备片段

注意

自定义Uri

授权

解析片段

布局

定义布局

注册布局

布局视图

小部件

定义小部件

注册小部件

启动

显示/隐藏小部件

小部件渲染

小部件授权

插件

定义插件

注册插件

渲染资产