You did not find anything clear, because in reality there is nothing to talk about, other than "What do you like about your understanding and the needs of the project ." If you find yourself very insecure, feel free to dive into what makes sense to you, and then adjust the structure again when you gain more experience.
Also, read books on systems architecture, they will help a lot.
Is it possible to use only laravel as a data API, and keep Vue separate from Laravel?
So, I assume you mean SPA? Honestly, if your application is small, then I see that everything is in order.
Large applications are generally difficult to maintain if they are SPA.
Read: https://medium.com/@NeotericEU/single-page-application-vs-multiple-page-application-2591588efe58
If you end up using Laravel as the API endpoint, then use the stripped-down version, Lumen , because it comes without a blade and a few other things. Lumen is versionless to act as an API endpoint.
The best approach to implementing hybrids SPA and MPA.
From my experience, trying to build 4+ projects as hybrids, this is what I found the most optimal structure:
My example will be about an application that saves Messages.
1. Use the repository design template.
This will save you from a headache while saving your code and keeping the concept of DRY (Do not Repeat Yourself) in your code.
- Create directory
App\Repositories\
Create a new PostsRepository class. This will be the one that communicates with the database and contains most of the logic.
- Create the
App\Services\ directory
Create a new PostsService class. This constructor will have a PostsRepository in its constructor.
The class of service will be a single processing that accepts user input, regardless of the web controller or API controller.
<?php namespace App\Service; use App\Repositories\PostsRepository; class PostsService; { protected $repository; public function __construct(PostsRepository $repository) { $this->repository = $repository; } }
- Make a separation between Web controllers and APIs.
For web controllers, you create a controller as usual:
php artisan make:controller PostsController
For API controllers, you create a controller inside the Api folder.
php artisan make:controller Api\PostsController
The last command will create the directory App \ Http \ Controllers \ Api and add a controller to it.
summarizing
Now we have different controllers for returning the results corresponding to the starting point (web / api).
We have services that both (web / api) controllers send their data for verification (and have an action taken by the repository).
Examples:
<?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() { 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; } public function index() { $posts = $this->service->all(); return $posts; } 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',
In our PostsRepository, we actually call methods that store data. For instance. Post::insert($request); .
2. Allocation of the API group
Route::prefix('api/v1')->middleware('auth')->group(function() { Route::post('posts/store', 'Api\ PostsController@store ')->name('api.posts.store'); });
Providing API routes ->name() helps when running phpunit tests.
3. Types of clicks
Those that should be easily removed.
views/posts/index.blade.php :
@extends('layouts.app', ['title' => trans('words.posts')]) @section('content') <div class="columns"> <div class="column is-6"> <new-post-button></new-post-button> <div class="column is-6"> <posts-index-page></posts-index-page> </div> </div> @endsection
4. Vue structure.
https://github.com/pablohpsilva/vuejs-component-style-guide
So, those Vue components can live in resources/assets/js/components/posts/ , where inside /posts/ I would have folders called IndexPage , CreateModal , EditModal with each folder having its .vue and README.md .
I would use <posts-index-page> in index.blade.php and, if I want, in <post-create-modal> and <edit-post-modal> .
All vue components will use the API endpoint specified in our routes file.