Creating an api with Laravel

In this video you will learn how to create an API in your Laravel application. First we will add the default Laravel Authentication and then we will fill the users table using the Faker Package. After we have users in our database we can then create our API route inside of routes/api.php, which looks like this:

Route::get('users', 'ApiController@users');

This route will map to an API controller that looks like the following:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;

class ApiController extends Controller
{
    public function users(Request $request){

    	$offset = (isset($request->offset)) ? $request->offset : 0;
    	$num_results = (isset($request->num_results)) ? $request->num_results : 10;

    	$users = User::take($num_results)->skip($offset)->get();
    	return response()->json( $users );
    }
}

Now, whenever we hit our a API at URL.com/api/users we will get a JSON response with 10 users.

In this video we also showed you how to interact with that JSON data using Vue.js, we created a new file inside of resources/views called users.blade.php with the following contents: 

@extends('layouts.app')

@section('content')
<div class="container" id="vueify">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Users</div>

                <div class="panel-body">
                    <ul>
                        <li v-for="user in users">@{{ user.name + ' - ' + user.email }}</li>
                    </ul>
                </div>
                <button class="btn btn-default" @click="loadMore">Load More</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: '#vueify',
        data: {
            offset: 0,
            users: []
        },
        methods:{
            getResults: function(){
                axios.get('/api/users?offset='+this.offset)
                  .then(function (response) {
                    vm.users = vm.users.concat( response.data );
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
            },
            loadMore: function(){
                this.offset += 10;
                this.getResults();
            }
        },
        created: function(){
            this.getResults();
        }
    });
</script>
@endsection

Now, when we visit our URL.com/users, using Vue.js our application will display a list of users in an unordered list. We can then click on the Load More button and we will get the next 10 results of users. If you have any questions about this video be sure to visit the forums at https://devdojo.com/forums.

Thanks for watching :)