acacha/tasks

The Laravel Framework.

Maintainers

Details

github.com/acacha/Tasks

Source

Issues

Installs: 0

Dependents: 0

Suggesters: 0

Stars: 0

Watchers: 3

Forks: 1

Type:project


README

localhost/:1 Failed to load http://127.0.0.1:8050/api/v1/tasks: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

Resources:

Laravel

Testing

HTTP

Relacions

Una bona forma aprendre com funciones es via TDD i Wishfull programming

Recursos:

Eloquent

CRUD (CREATE RETRIVE UPDATE DELETE)

'''Recursos'''

LIST

Mètodes:

  • Task::all() -> Resultat una col·lecció
  • Task::where('completed', true)->orderBy('name', 'desc')->take(10)->get();
  • Fresh: $freshFlight = $flight->fresh();

Recursos

Collections

Laravel collections: https://laravel.com/docs/5.7/collections

SHOW

$flight = App\Flight::find(1);
$flights = App\Flight::find([1, 2, 3]);
$flight = App\Flight::where('active', 1)->first();
$model = App\Flight::findOrFail(1);

Create

INSERTS: https://laravel.com/docs/5.7/eloquent#inserting-and-updating-models

$flight = new Flight;

        $flight->name = $request->name;

        $flight->save();

Mass assignement

OCO: Camp fillable:

protected $fillable = ['name'];
$flight = App\Flight::create(['name' => 'Flight 10']);

Update

$flight = App\Flight::find(1);

$flight->name = 'New Flight Name';

$flight->save();

Delete

$flight = App\Flight::find(1);

$flight->delete();

API CRUD (JSON) vs HTML CRUD

CRITERI: Mirar de no xocar amb el controlador ja existen NO API -> Espai de noms Api (carpeta)

app/Http/Controlloers/Api

ApiResources controller:

 Route::apiResource('photos', 'API\PhotoController');
php artisan make:controller API/PhotoController --api

NO CALEN ELS METODES create i edit (no hi ha formularis PHP/HTML)

RUTES CRUD

  • CRUD (Cru en anglès)
  • BREAD (Pà en anglès):
  • BROWSE READ EDIT ADD DELETE

Vídeo recomanat: https://laracasts.com/series/laravel-from-scratch-2018/episodes/11

RUTES:

  • GET /projects (index)
  • GET /projects/create (create) -> Formulari creació
  • GET /projects/1 (show)
  • POST /projects (store)
  • GET /projects1/edit (edit)
  • PATCH /projects/1 (update)
  • DELETE /projects/1 (destroy)

Ajudes de Laravel (https://laravel.com/docs/5.7/controllers#resource-controllers):

 Route:resource('/projects') 

o

Route::resources([
    'photos' => 'PhotoController',
    'posts' => 'PostController'
]);

Controladors:

Quan les coses siguin més complicades/més reals (no sempre farem només CRUD) seguirem els criteris de Cruddy By Design:

  • Exemple més complicat: canviar l'estat d'una tasca de completa a no completa o viceversa

Tècniques:

  • Give nested resources a dedicated controller
  • Treat properties edited independently as separate resources
  • Treat pivot models as their own resource
  • Think of different states as different resources

Recursos:

Route Model Binding

https://laravel.com/docs/5.7/controllers#resource-controllers

Verb URI Action Route Name GET /photos index photos.index GET /photos/create create photos.create POST /photos store photos.store GET /photos/{photo} show photos.show GET /photos/{photo}/edit edit photos.edit PUT/PATCH /photos/{photo} update photos.update DELETE /photos/{photo} destroy photos.destroy

Vue

vue-tasks

Guia de treball

does the same thing as:

<input v-bind:value="searchText" v-on:input="searchText = $event.target.value"

Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: <input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)" > })

VUE DEV-TOOLS

Lists

V-IF i V-SHOW

Mostrar tasques completades i no completades

RANGES:

{{ n }}

CRUD

EDIT MODE

Laracast video test utils: https://laracasts.com/series/testing-vue/episodes/7

Computed Properties

  • IMPORTANT: sempre són calculs realitzats a partir de dades de vue (data). No fer sobre elements no monitoritzats per vue o constants
  • A vegades es pot fer el que es fa amb un computed amb un mètode
  • Exemple filtre de tasques: filteredTasks -> tasques completes o tsques incompletes
  • https://vuejs.org/v2/guide/computed.html

COMPONENTS PROPS

Comunicació amb components/API/CONTRACTE

Comunicació pares fills:

VUE EVENTS

SLOTS

TODO

Axios

  • Comunicació amb la API
  • Javascript Promises
  • Programació asíncrona i Javascript

-->

tasks_javascript

  • Carpeta: tasks:javascript
  • tailwind CSS

Troubleshooting. Resol·lució de problemes

CORS. Failed to load URL: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ... is therefore not allowed access.

IMPORTANT: CORS no caldrà quan l'aplicació client/frontend i la backend/server siguin al mateix domini

Cal instal·lar la llibreria de Laravel:

https://github.com/barryvdh/laravel-cors

$ composer require barryvdh/laravel-cors

I afegir Middleware:

protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
];