2。专用API组

Question

我一直在四处寻找，但没有任何召集。

在laravel中实施Vue MPA架构的最佳方法和实践。

搜索了很多。但没有什么能给你一个清晰的想法。你的回答很有帮助，请简单说明。

回答这一点也很有帮助：

使用laravel作为数据API是一个好主意，并保留Vue 与laravel分开？
实施SPA和MPA混合的最佳方法。

Answer 1

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

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

基本上，laravel将呈现Vue应用程序，并且每个请求都会通过API。

易于设置
身份验证+用户验证更容易（您可以使用laravel会话管理器 - 不需要构建/使用令牌或其他任何内容。“无需担心您的应用程序状态”。）
轻松与Laravel“断开连接” - 如果您将来选择解耦SPA应用程序。

仅将laravel（或流明）用作API，并在另一台服务器上呈现SPA。

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

也很容易设置，但可能比选项＃1
您需要为用户验证/状态管理等创建一些内容。
如果您决定将来只使用“一个应用程序”，那么很容易放入laravel。
可以更容易维护/扩展（如果你有一个前端团队，他们不需要担心laravel - 同样对于你的“laravel团队”，他们“不需要担心”前端）< / LI>
Laravel + Vue =“一个应用程序”

您可以使用Laravel渲染页面中组件/元素的所有视图+ vuejs。
1. 易于设置。你有laravel + vuejs，他们已经准备好一起使用了。 https://laravel.com/docs/5.5/frontend#writing-vue-components
2. 解耦不太容易。在这种情况下，您需要为vue.js创建相同的视图。这可能需要时间。
3. 这是“传统的网络开发”（在我看来）。如果我今天必须启动这样的项目，我不会在Vue.js中创建所有页面+ Laravel中的所有页面（Controller +新路线）来渲染此视图。如果你这样做（再次 - 我的意见），这只是额外的工作。如果你担心SEO，有“后备”/额外选项。

Answer 2

您还没有发现任何明确的内容，因为除了＆＃39;您的理解和项目需求之后，还有什么可以谈论的事情＆＃39; 。如果你发现自己非常不确定，可以随意潜入对你有意义的事情，然后在获得更多经验时重新调整结构。

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

使用laravel作为数据API是否是一个好主意，并将Vue与Laravel分开？

据此，我假设您的意思是SPA？老实说，如果你的申请很少，那我觉得这很好。

如果是SPA，则较大的应用程序往往难以维护。

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

如果你最终使用Laravel作为API端点，那么使用它的精简版Lumen，因为它没有Blade和其他一些东西。 Lumen被剥离版本作为API端点。

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

根据我尝试构建4个以上项目作为混合项目的经验，这里是我发现的最佳结构：

我的示例将是关于保存帖子＆＃39;

的应用

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

这会让您在维护代码和在代码中保持DRY（不要重复自己）概念时遇到很多麻烦。

创建目录App\Repositories\

创建一个新课程PostsRepository。这个将是与数据库通信并包含大部分逻辑的那个。

创建一个新课程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');

});

在进行phpunit测试时，为->name()提供API路由会有所帮助。

3。 Blade视图

这些都应该简单明了。

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端点。

Vue.js：在laravel中实现MPA（多页面应用程序）的最佳方式

2 个答案:

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

仅将laravel（或流明）用作API，并在另一台服务器上呈现SPA。

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

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

2。专用API组

3。 Blade视图

4。 Vue结构。