web-dev-qa-db-ja.com

Vue.js：laravel=でMPA（Multi page app）を実装する最良の方法

私はかなり長い間見回っていましたが、何も招集されませんでした。

実装するための最良のアプローチと実践は何ですかVue MPA laravelのアーキテクチャ

かなり検索しました。しかし、あなたに明確なアイデアを与えるものは何もありません。あなたの答えは大いに役立ちます。簡潔にしてください。

ポイントに答えることも役立ちます：

  • laravel=をデータAPIとして使用し、Vueとは別にlaravel？
  • SPAとMPAのハイブリッドを実装するための最良のアプローチ。
javascriptlaraveldesign-patternsvue.jsmultipage
16
Gammer

すでに使用したいくつかのオプション：

Laravelを使用して、「メインビュー」をレンダリングし、vue.jsアプリケーションを接続します。

基本的にlaravelはVueアプリケーションをレンダリングし、すべてのリクエストはAPIを通過します。

  1. セットアップが簡単
  2. 認証+ユーザー検証は簡単です（そのためにlaravelセッションマネージャーを使用できます-トークンなどを作成/使用する必要はありません。「アプリケーションの状態を心配する必要はありません」）。
  3. Laravelから簡単に「切断」する-将来SPAアプリケーションを分離することを選択した場合。

laravel（またはLumen）をAPIとしてのみ使用し、別のサーバーでSPAをレンダリングします。

追加のサーバーをセットアップしたり、クロスオリジンを準備したりする必要があるため、これには時間がかかります。

  1. セットアップも簡単ですが、オプション＃1よりも時間がかかる場合があります
  2. ユーザー検証/状態管理などのために何かを作成する必要があります。
  3. 将来「たった1つのアプリ」を使用することに決めた場合、laravelに配置するのは簡単です。
  4. メンテナンス/スケーリングが簡単になる可能性があります（フロントエンドチームがいる場合、laravelを心配する必要はありません-あなたの "laravelチーム"と同じで、彼らは "心配する必要はありません"フロントエンド）

Laravel + Vue = "1つのアプリケーション"

Laravelを使用して、ページ内のコンポーネント/要素のすべてのビュー+ vuejsをレンダリングできます。

  1. セットアップが簡単。 laravel + vuejsがあり、既に一緒に使用する準備ができています。 https://laravel.com/docs/5.5/frontend#writing-vue-components
  2. 切り離すのはそれほど簡単ではありません。この場合、vue.jsに対して同じビューを作成する必要があります。これには時間がかかる場合があります。
  3. これが「私の従来のWeb開発」です。今日このようなプロジェクトを開始しなければならない場合、Vue.jsですべてのページを作成し、Laravel（コントローラー+新しいルート）でこのビューをレンダリングすることはできません。あなたがこれを行う場合（再び-私の意見）、それはちょうど余分な仕事です。 SEOが心配な場合は、「フォールバック」/追加オプションがあります。

-

すべてのオプションはテスト可能+スケーラブルです。

また、開始方法にも依存します（今後アプリをどのように分離するか心配する必要がありますか？Laravel + Vueは）、チームの仕組み（フロントエンドチームは本当にlaravelをセットアップする必要がありますか、それとも心配するだけですフロントエンドコード？）など.

質問に答えたかどうかわからない場合は、コメントを残してください。

20
Eduardo Stuart

「あなたの理解とプロジェクトのニーズに合ったもの」以外について話すことは本当に何もないので、あなたは明確な何かを見つけていません。自分自身veryがわからない場合は、自分にとって意味のあることを何でもしてください。さらに経験を積んだら、構造を再調整してください。

また、システムアーキテクチャに関する本を読んでください。それらは大いに役立ちます。

laravel=をデータAPIとして使用し、Vue Laravelとは別にしますか？

これにより、私はあなたがSPAを意味すると仮定していますか？正直なところ、アプリケーションが小さい場合は、これで問題ないと思います。

大規模なアプリケーションは、SPAである場合、保守が困難になる傾向があります。

読む： https://medium.com/@NeotericEU/single-page-application-vs-multiple-page-application-2591588efe58

APIエンドポイントとしてLaravel=を使用することになった場合、Bladeなどの付属品がないため、削除済みバージョンの Lumen を使用します。LumenはAPIエンドポイントとして機能するようにバージョンを削除しました。

SPAとMPAのハイブリッドを実装するための最良のアプローチ。

ハイブリッドとして4+プロジェクトを構築しようとした私の経験から、最適な構造を見つけました。

私の例は、「投稿」を保存するアプリについてです。

1.リポジトリ設計パターンを使用します。

これにより、コードを維持する際の頭痛の種が大幅に減り、コードでDRY（Do n't Repeat Yourself））コンセプトが維持されます。

  • ディレクトリを作成しますApp\Repositories\

新しいクラスPostsRepositoryを作成します。これはデータベースと通信するもので、ほとんどのロジックが含まれます。

  • ディレクトリApp\Services\を作成します

新しいクラスPostsServiceを作成します。これには、コンストラクターにPostsRepositoryが含まれます。

サービスクラスは、WebコントローラーからでもAPIコントローラーからでもユーザーの入力を処理するものになります。

<?php

namespace App\Service;

use App\Repositories\PostsRepository;

class PostsService;
{
    protected $repository;

    public function __construct(PostsRepository $repository)
    {
        $this->repository = $repository;
    }
}
  • WebコントローラーとAPIコントローラーを分離します。

Webコントローラーの場合、通常のようにコントローラーを作成します。

php artisan make:controller PostsController

APIコントローラーの場合、コントローラーをApiフォルダー内に作成します。

php artisan make:controller Api\PostsController

最後のコマンドは、ディレクトリApp\Http\Controllers\Apiを作成し、その中にコントローラーを配置します。

リキャッピング

これで、スタートポイント（web/api）に適した結果を返すさまざまなコントローラーができました。

両方の（web/api）コントローラーが検証対象のデータを送信する（およびリポジトリーがアクションを実行する）サービスがあります。

例：

<?php

namespace App\Http\Controllers;

use App\Service\PostsService;

class PostsController extends Controller
{
  protected $service;

  public function __construct(PostsService $service)
  {
      $this->service = $service;
  }

  public function index()
  {
     /**
     * Instead of returning a Blade view and
     * sending the data to it like:
     *
     *          $posts = $this->service->all();
     *          return views('posts.index', compact('posts'));
     *
     * We go ahead and just return the boilerplate of 
     * our posts page (Blade).
     */
     return view('posts.index');
  }
}

...

<?php

namespace App\Http\Controllers\Api;

use App\Service\PostsService;

class PostsController extends Controller
{
  protected $service;

  public function __construct(PostsService $service)
  {
      $this->service = $service;
  }

  /**
  * Returns all posts.
  *
  * A vue component calls this action via a route.
  */
  public function index()
  {
     $posts = $this->service->all();

     return $posts;
  }

  /**
  * Notice we don't have a store() in our
  * Web controller.
  */
  public function store()
  {
     return $this->service->store();
  }
}

...

<?php

namespace App\Services;

use App\Repositories\PostsRepository;

class PostsService extends Controller
{
  protected $repository;

  public function __construct(PostsRepository $repository)
  {
      $this->repository = $repository;
  }

  public function all()
  {
     $posts = $this->repository->all();

     return $posts;
  }

  public function store()
  {
     $request = request()->except('_token');

     $this->validation($request)->validate();

     return $this->repository->store($request);
  }

  public function validation(array $data)
  {
      return Validator::make($data, [
          'content' => 'required|string|max:255',
          //
      ]);
  }
}

PostsRepositoryでは、実際にデータを保存するメソッドを呼び出します。例えば。 Post::insert($request);。

2. APIグループを専用にする

Route::prefix('api/v1')->middleware('auth')->group(function() {

    Route::post('posts/store', 'Api\PostsController@store')->name('api.posts.store');

});

APIルーティングを->name()にすると、phpunitテストを作成するときに役立ちます。

3.ブレードビュー

それらは単純に単純化する必要があります。

views/posts/index.blade.php：

@extends('layouts.app', ['title' => trans('words.posts')])

@section('content')
  <!-- Your usual grid columns and stuff -->
  <div class="columns">
     <div class="column is-6">
         <!-- This comp. can have a modal included. -->
         <new-post-button></new-post-button>
     <div class="column is-6">
          <posts-index-page></posts-index-page>
     </div>
  </div>
@endsection

4. Vue構造。

https://github.com/pablohpsilva/vuejs-component-style-guide

したがって、これらのVueコンポーネントはresources/assets/js/components/posts/に存在する可能性があり、/posts/の中に、IndexPage、CreateModal、EditModalなどのタイトルのフォルダーがあり、各フォルダーには.vueおよびREADME.mdがあります。

<posts-index-page>でindex.blade.phpを使用し、必要なときに<post-create-modal>と<edit-post-modal>をドロップします。

すべてのvueコンポーネントは、Routesファイルで指定したAPIエンドポイントを使用します。

9
Shafiq al-Shaar