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

Question

我一直在四处寻找,但没有得到任何召集.

在laravel中实现Vue MPA架构的最佳方法和实践是什么.

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

回答这一点也很有帮助:

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

Answer 1

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

使用Laravel渲染"主视图"+ connect vue.js应用程序.

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

1. 易于设置
2. 身份验证+用户验证更容易(您可以使用laravel会话管理器 - 不需要构建/使用令牌或其他任何东西."无需担心您的应用程序状态".)
3. 轻松与Laravel"断开" - 如果您将来选择解耦SPA应用程序.

仅将laravel(或流明)用作API,并在另一台服务器上呈现SPA.

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

1. 也很容易设置,但可能比选项#1花费更多的时间
2. 您需要为用户验证/状态管理等创建一些内容.
3. 如果您决定在将来使用"仅一个应用程序",则很容易放入laravel.
4. 可以更容易维护/扩展(如果你有一个前端团队,他们不需要担心laravel - 同样对于你的"laravel团队",他们"不需要担心"前端)

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,有"后备"/额外选项.

-

所有选项都是可测试的+可扩展的.

这也取决于你如何开始(我应该担心将来如何解开应用程序？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端点,那么使用它的精简版Lumen,因为它没有Blade和其他一些东西.Lumen被剥离版本作为API端点.

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

根据我尝试将4个以上项目构建为混合项目的经验,以下是我发现的最佳结构:

我的例子是关于保存"帖子"的应用程序.

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

这个可以让您在维护代码和维护代码中的DRY(不要重复自己)概念时遇到很多麻烦.

• 创建一个目录 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');

});

->name()在进行phpunit测试时,为API路由提供帮助.

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