I am working on a Laravel app that has used Blade files for a while. We are switching part of the app to use Vue now. One of the endpoints we had used pagination with a page parameter at the end of it.
For example: /store/api/users?page=1 and each page would show 20 users -- sort of like a lazyLoad.
Does this make sense to keep it like this for Vue? With Vue, shouldn't the endpoint just get me ALL the users and then I can do what I want with that data?
No, you should not query all the data and return to vuejs. If your data is huge then you will be in big trouble with slower performance. So, it's always a good idea to use Larave's paginations even while you are responding json instead of view.
For example when you were using blade, you were doing something like:
$users = User::where('column', $value)->paginate();
return view('user.index', compact('user'));
Right? Now you are using Vuejs and still have you covered with it's nice length aware paginator instance. So, now you can do something like:
$users = User::where('column', $value)->paginate();
return $users;
This Will return all paginations meta data like, total page, current page etc.
So that, you can manipulate those data perfectly in vuejs.
Related
I am new to VueJS.
Let's assume that I plan to create an extensive application. And for example I have 3 separate pages: mypage.com/account, mypage.com/players, mypage.com/orders. Each page has its own controller and in it I return a file with a view (account.blade.php etc.) and pass parameters in variables. Then in each of them I would like to use Vue. And here I have a few questions:
1) Do I need to create separate app.js files for each page with a Vue instance in the / resources / js / folder? Something like:
app-account.js
const app-account = new Vue({
el: '#app-account ',
});
app-players.js
const app-players= new Vue({
el: '#app-players',
});
etc.?
If not - how to do it? Declare all components in one app.js file? And is this correct? Because then when you enter mypage.com/account in the app.js file in / public / js / all other Vue components are stored. So the actual component is displayed on the page and all components are downloaded on the page.
2) Why does every component have to be the default?
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
3) How to use Laravel + Vue correctly when you do not want the site to be SPA?
4) Is it correct that all data is transmitted along with the view? Is it better to create controllers only for displaying the view and download data via Vue from api?
5) What about the features from the Blade template system?
I could display a link to the route in them via {{route ('name')}}. The only way to achieve this in Vue is to pass a parameter to the component? Is this the correct way?
<example-component routeToXXX="{{route ('name')}}" />
Welcome to Vue world.
Since Laravel/PHP at navigation between pages leads browser to rerender DOM, its your choice if you separate app files or just write inline js wrapped with <script> (if you do that ensure vuejs is loaded before your script/defered). In case you want to keep Laravel your core, you may also consider diving into livewire, alternatively you have to explore what the world is trying like: VUE2 component register in Laravel
It's a Javacsript syntax, basically SFC (Single File Components) are supposed to export JS data/object/functions which can be used or loaded, Vue has a clear documentation, try it. Learning Vue, makes you learn JS (suggestion: consider learning the basics, start by understanding difference between sync, async, loops, data types, functions, function functions).
There's no concrete way that you have to follow in order to achieve what you need or accomplish certain task. In any case if your needs are met by your solution at your stage of career, that might be the correct way. Just keep trying and outcome your abilities by time (reviewing other's code/libraries helps).
This is matter of choice, SSR (ServerSideRendering) is commonly used in cases you do not want to expose the logic in the frontend or have security concerns. There are also scenarios where you perform API calls to enhance overall performance like pagination or filters. However your data publicity/privacy always depends on how you authenticate users, each API call must ask for a valid access token that will ensure the backend, that credentials are met to reach the data. With experience in frontend you'll be convinced which are the best practices.
Laravel has a blade helper to ignore templating engine (#verbatim,#endverbatim and others). Passing data to your Vue part if its inline script you may open php tags like within your #verbatim section. In other cases if you already know what you are about to pass your JS, you can define a global variable somewhere in between your blade view like <script> var globalVar = { url1: "<?= route('name'); ?>", url2: "<?= route('name2'); ?>" } </script> or you can echo out encoded json so it renders the JS variable like var globalVar = <?= json_encode($yourVariable); ?>;
Finally PHP and JS are both two different worlds, aiming towards a similar syntax. It's a big decision to consider loose coupling API and View logic, but it might pay well in long term.
I am new to Laravel coming from CakePHP where the form and save method for a form is one and the same function name. I saw in many Laravel tutorials that the from method (that displays the form) is different than the method to save form (that actually saves data). Why using 2 different method names?
For example what's wrong with:
pub function xyz(Request $request)
{
if($results->isMethod('post')){
... then save and return redirect
}
... the code for showing the form in case there is no POST.
then having 2 routes one for GET and one for POST on the same url?
It is because people like to filter out things at route level not in controller, Also it helps developer to apply middleware grouping for each route separately. so that they can apply roles and permission etc. easily at route level.
It will looks horrible if mix all things in controller.
Think about middleware and groups in your code.
It is because you don't wanna mix a lot of logic in the same method . The case you have simple is the simple scenario . But there will be case where you wanna pass initial data in the create form . You have to write logic for that also in the same method and while you store the data you need to do the validation and calculate other business logic . If you combine all those things in one method it will mix all the things in one method and code difficult to read
I have a Model called : Federation.
In my View, I load a Select Combo via AJAX from a API Call.
I share the same controller for the API and for the view dispatcher --> FederationController, I don't have a separed architecture between Front end and Back end ( like Full Angular or Full VueJS architecture), it's mixed.
So, basically, my Controller says:
if (Request::ajax()){ // This is an API call from JS
return json;
else
return view;
And it works well ( I may have a problem when I will include an Android app...)
Thing is in some case, I don't want the full json model, but just the info tu fill the Select input, in general, I do
federations->lists('name','id'), or with pluck, as lists has been deprecated.
Thing is I don't really know how to organize it, because my API is based on returning Full Models, this is OK, but this kind of transformation is quite frequent.
So, I should create a kind of transformToSelect($model) Method or use great lib like Fractal to transform it, but I don't really know how to invoke without losing my endpoint.
In my routes.php, I have a group of routes like:
Route::group(['prefix' => 'api/v1'], function () {
Route::get("federations", 'FederationController#index');
// All my APIs
});
And I'm glad with it, because it sticks with REST.
I could get a solution having my route like:
Route::get("federations", 'FederationController#getForCombo');
But soon, I will have a mess, so, I wish there were a simple an elegant solution to my problem...
Any idea how to solve it?
I am struggling to understand something that I am sure one of you will be able to easily explain. I am somewhat new to MVC so please bear with me.
I have created a controller that handles all of the work involved with connecting to the Twitter API and processing the returned JSON into HTML.
Route::get('/about', 'TwitterController#getTweets');
I then use:
return View::make('templates.about', array('twitter_html' => $twitter_html ))
Within my controller to pass the generated HTML to my view and everything works well.
My issue is that I have multiple pages that I use to display a different Twitter user's tweets on each page. What I would like to do is pass my controller an array of values (twitter handles) which it would then use in the API call. What I do not want to have to do is have a different Controller for each user group. If I set $twitter_user_ids within my Controller I can use that array to pull the tweets, but I want to set the array and pass it into the Controller somehow. I would think there would be something like
Route::get('/about', 'TwitterController#getTweets('twitter_id')');
But that last doesn't work.
I believe that my issue is related to variable scope somehow, but I could be way off.
Am I going down the wrong track here? How do I pass my Controllers different sets of data to produce different results?
EDIT - More Info
Markus suggested using Route Parameters, but I'm not sure that will work with what I am going for. Here is my specific use case.
I have an about page that will pull my tweets from Twitters API and display them on the page.
I also have a "Tweets" page that will pull the most recent tweets from several developers accounts and display them.
In both cases I have $twitter_user_ids = array() with different values in the array.
The controller that I have built takes that array of usernames and accesses the API and generates HTML which is passed to my view.
Because I am working with an array (the second of which is a large array), I don't think that Route Parameters will work.
Thanks again for the help. I couldn't do it without you all!
First of all, here's a quick tip:
Instead of
return View::make('templates.about', array('twitter_html' => $twitter_html ))
...use
return View::make('templates.about', compact('twitter_html'))
This creates the $twitter_html automatically for you. Check it out in the PHP Manual.
Now to your problem:
You did the route part wrong. Try:
Route::get('/about/{twitter_id}', 'TwitterController#getTweets');
This passes the twitter_id param to your getTweets function.
Check out the Laravel Docs: http://laravel.com/docs/routing#route-parameters
Is it possible to fill Backbone model with data from laravel cache, and how can I do it ?
Even if i don't know laravel i think this is quite possible. You only need to "render" or "print out" your laravel cache into a JavaScript code block. Please also see Passing PHP variable into JavaScript to see how you can pass values from php to JavaScript.
A good solution would be, if you can render out your laravel cache to json form and then pass this to the "model.set()" method of your Backbone model.