Vue.js :用laravel实现MPA(多页面应用程序)的最佳方法

Question

我四处看了很长一段时间，但什么都没有召开。

将是在laravel.中实现Vue MPA体系结构的最佳方法和实践

找了不少。但是没有任何东西能给你一个清晰的想法。你的回答会很有帮助的，请简短一点。

回答这一点也是有帮助的：

• 仅仅使用laravel作为数据API，并将Vue与laravel分开，这是一个好主意吗？
• 实现SPA和MPA混合的最佳方法。

Answer 1

我已经使用过的一些选项：

使用Laravel呈现“主视图”+连接vue.js应用程序。

基本上，laravel将呈现Vue应用程序，每个请求都经过一个API。

1. 易于安装
2. 身份验证+用户验证更容易(您可以为此使用laravel会话管理器-不需要构建/使用令牌或其他任何东西。“无需担心您的应用程序状态”)。
3. 很容易“断开”从Laravel -如果你选择在未来的SPA应用程序解耦。

只使用laravel (或腔)作为API，并在另一台服务器上呈现SPA。

这可能需要更多的时间，因为您需要设置额外的服务器，准备跨源，等等。

1. 也很容易安装，但是比选项1花费更多的时间。
2. 您需要创建一些用于用户验证/状态管理的东西，等等。
3. 如果你决定在未来只使用“一个应用程序”，那么很容易将其放入laravel。
4. 可以更容易地维护/规模(如果你有一支前场球队，他们不需要担心拉拉队-对于你的“拉拉队”来说也是一样，他们“不需要担心”前面的球队)

Laravel + Vue =“一个应用程序”

您可以使用Laravel为页面中的组件/元素呈现所有视图+ vuejs。

1. 很容易安装。你有拉拉+ vuejs，它们已经准备好一起使用了。https://laravel.com/docs/5.5/frontend#writing-vue-components
2. 不容易脱钩。在这种情况下，您需要为vue.js创建相同的视图。这需要时间。
3. 这是“传统的网络开发”(在我看来)。如果我今天必须开始这样的项目，我就不会在Vue.js + Laravel (控制器+新路径)中创建所有页面来呈现这个视图。如果你这样做(再次-我的意见)，这只是额外的工作。如果你担心搜索引擎优化，有“后备”的/extra选项。

--

所有选项都是可测试+可伸缩的。

这也取决于你是如何启动的(我是否应该担心我将来会如何解耦这个应用呢？)Laravel + Vue将是永久的？)，您的团队将如何工作(前端团队真的需要设置laravel，还是他们只需要担心前端代码？)，等等。

不确定我是否回答了你的问题，如果没有，请留下评论。

Answer 2

您还没有发现任何明确的信息，因为除了“您的理解和项目需要的感觉如何”之外，没有什么可谈论的。如果你发现自己很不确定，可以自由地去做任何对你有意义的事情，然后当你获得更多的经验时重新调整结构。

此外，阅读有关系统架构的书籍，这将有很大帮助。

如果只使用Laravel作为数据API，并将Vue与laravel分开，这是个好主意吗？

这么说，我猜你是说SPA？老实说，如果你的应用程序是小的，那么我认为这是好的。

如果是SPA，更大的应用程序往往很难维护。

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

如果您最终使用Laravel作为API端点，那么就使用它的简化版本内腔，因为它没有刀片和其他东西。流明被剥离版本作为API端点。

实现SPA和MPA混合的最佳方法。

根据我尝试将4+项目构建为混合结构的经验，下面是我发现的最优结构：

我的例子将是关于一个应用程序，保存‘帖子’。

1.使用存储库设计模式。

这一次将为您在维护代码方面节省很多麻烦，并在代码中维护一个枯燥(不要重复)的概念。

• 创建一个目录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\ controller \Api目录，并将控制器放置在其中。

重叠式

现在我们有了不同的控制器来返回适合于startpoint (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');

});

当您进行phpunit测试时，给API路由一个->name()会有所帮助。

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组件都将使用我们在路由文件中指定的API端点。